Linera Social 社交应用 Web 前端本地启动、GraphQL 对接与事件流实战指南【免费下载链接】linera-protocolMain repository for the Linera protocol项目地址: https://gitcode.com/GitHub_Trending/li/linera-protocol导读本文围绕 Linera 协议仓库中examples/social示例的 Web 前端examples/social/web-frontend展开讲解如何把一个基于微链即用户模型的去中心化社交应用前端跑起来从部署智能合约、启动 Node Service到理解前端的 URL 访问规则、GraphQL 查询/订阅链路与全部 npm 脚本。读完本文你将掌握在本地 Linera 网络上完整运行 Social 应用发帖、点赞、评论、订阅的端到端流程并能深入源码理解事件流驱动的实时刷新机制。前置条件先让后端在网络上活起来Web 前端本身只是一个壳真正的业务逻辑全部在链上合约Contract与链下服务Service中。因此在启动前端之前必须完成以下三步编译并部署 Social 应用合约 服务到本地 Linera 网络启动 Node Service前端通过它访问应用完成 examples/social/README.md 中描述的全部操作初始化钱包、创建链、发布应用等该文档是前端运行的正式前置条件。其中 Node Service 的默认端口约定为8000。前端代码中如果 URL 未提供port参数会默认回退到8000见 examples/social/web-frontend/src/index.tsx// 确保 port 是数字若非法或缺失则默认 8000 if (isNaN(port)) { port 8000 }注意codegen.ts中 GraphQL schema 拉取默认使用端口8080examples/social/web-frontend/codegen.ts与前端运行默认端口8000不同配置时需留意区分。这个应用是干什么的微链即用户的事件流社交网络从 examples/social/README.md 可以确认该示例的核心理念每条微链microchain代表一个用户其 owner用户可以订阅其他用户并发布文本帖子帖子会通过**事件流event stream**推送给所有订阅者。应用支持的操作定义于 examples/social/src/lib.rs操作作用Subscribe { chain_id }订阅另一条链用户Unsubscribe { chain_id }取消订阅另一条链Post { text, image_url }发布新帖子并推送到事件流所有订阅者都会收到Like { key }点赞某条帖子发送给帖子作者所在链Comment { key, comment }评论某条帖子发送给帖子作者所在链前端 README 特别强调点赞与评论只能由创建链即帖子作者所在链处理这正是like/comment 通过跨链消息发送给作者链这一设计在前端的体现。每条帖子由Key { timestamp, author, index }唯一定位examples/social/src/lib.rs其中author是发帖者链的ChainId。前端要展示自己发的帖子可在 GraphiQL IDE 中通过ownPost查询查看。访问入口URL 里藏着链、应用与端口前端采用 React Router 的:id路径参数 查询参数组合来定位目标链与应用examples/social/web-frontend/src/index.tsx。README 给出的通用 URL 格式为http://localhost:3000/$CHAIN_1/$APP_ID/$OWNER_1/$PORT结合源码实际参数解析规则如下路径:id目标链的ChainId查询参数app应用 ID必填缺失会直接抛错Missing app query param查询参数owner链的所有者必填缺失抛错Missing owner query param查询参数portNode Service 端口可缺省默认8000。README 中给出的完整示例注意其中?分隔的查询参数才是当前代码真正解析的形态http://localhost:3000/aee928d4bf3880353b4a3cd9b6f88e6cc6e5ed050860abae439e7782e9b2dfe8?appaee928d4bf3880353b4a3cd9b6f88e6cc6e5ed050860abae439e7782e9b2dfe8000000000000000000000000aee928d4bf3880353b4a3cd9b6f88e6cc6e5ed050860abae439e7782e9b2dfe8020000000000000000000000owner019d0849200869c4c88493db9966afad44194714cf76ed5d0639a7cdc37cb286port8080将实际运行中linera ... wallet request-chain输出的CHAIN_1、APP_ID、OWNER_1与 Node Service 端口代入即可。前端技术栈与项目结构该前端最初由 Create React App 脚手架创建但当前仓库实际已迁移到Vite React 18 TypeScript Apollo Client Tailwind CSS的技术栈见 examples/social/web-frontend/package.json核心依赖包括apollo/client、graphql、graphql-wsGraphQL 查询与 WebSocket 订阅react-router-dom路由解析链 ID 与查询参数tailwindcsstailwind-styled-componentsUI 样式graphql-codegen/cliclient-preset从 schema 自动生成 TypeScript 类型。主要源码文件文件职责src/index.tsx路由与入口解析链/应用/端口参数src/GraphQLProvider.jsx构建 Apollo ClientHTTP 与 WS 链路拆分src/App.tsx帖子列表、订阅通知、懒加载查询src/components/Navbar、NewPost、PostCard、LeftSideMenu四个 UI 组件src/generated/npm run compile生成的 GraphQL TypeScript 类型codegen.tsGraphQL Codegen 配置tailwind.config.jsTailwind 主题配置可用脚本详解在examples/social/web-frontend目录下执行以下命令npm run tailwind运行 Tailwind CLI 构建流程将src/input.css编译输出到src/index.css并开启监听模式--watch。Tailwind 相关知识可参考其官方文档。配置在 tailwind.config.js。npm run compile执行graphql-codegen根据 codegen.ts 中指定的 schema 地址http://localhost:${port}/chains/${chainId}/applications/${app}扫描src/**/*.{ts,tsx}中的 GraphQL 文档生成必要的 TypeScript 类型到src/__generated__/目录。执行前请确保.env中的CHAIN_ID、APP、PORT正确否则 codegen 无法拉到 schema。对应脚本定义package.jsonscripts: { dev: vite, build: vite build, preview: vite preview, compile: graphql-codegen, watch: graphql-codegen -w, tailwind: npx tailwindcss -i ./src/input.css -o ./src/index.css --watch }npm start/npm run dev以开发模式运行应用浏览器访问 http://localhost:3000 即可查看。代码修改后页面会自动热重载控制台会显示 lint 错误。README 中写作npm start沿用 CRA 惯例当前仓库的实际脚本名为npm run devVite两者等价地启动开发服务器。npx prettier --write .使用 Prettier 格式化整个项目。npm run build构建生产版本到build目录React 会被正确打包并针对生产环境优化压缩、文件名带 hash产物可直接部署。npm run eject该脚本来自 CRA 模板说明是单向操作一旦执行无法回退。它会移除单一构建依赖把 webpack、Babel、ESLint 等全部配置文件拷入项目让你获得完全控制权。由于当前项目已迁移到 Vitevite.config.tseject概念上已不适用此处保留 README 说明以还原文档原意。日常使用无需 eject默认配置已足够中小规模部署。数据流Apollo 如何对接 Node Service前端的数据通路在 GraphQLProvider.jsx 中定义这是理解整条链路的关键HTTP 查询HttpLink指向http://localhost:${port}/chains/${chainId}/applications/${applicationId}即 Node Service 的应用 GraphQL 端点负责所有普通查询与变更WebSocket 订阅GraphQLWsLink指向ws://localhost:${port}/ws负责订阅类操作链路拆分split根据操作定义类型subscription 走 WS其余走 HTTP。在 App.tsx 中前端通过useSubscription订阅 Node Service 的notifications(chainId)通知——链上有新事件新帖子、点赞、评论时Node Service 会推送通知前端随即重新拉取ReceivedPosts查询从而以订阅推送 查询拉取的方式实现实时刷新query ReceivedPosts { receivedPosts { entries { value { key { timestamp author index } text imageUrl comments { text chainId } likes } } } }这套数据流与前端的 SocialState 视图一一对应own_posts自己的帖子LogView与received_posts订阅到的帖子CustomMapView以Key索引。端到端验证从命令行到浏览器结合 examples/social/README.md 的完整流程前端可用的端到端验证路径如下启动本地网络与 faucet仓库根目录export PATH$PWD/target/debug:$PATH source /dev/stdin $(linera net helper 2/dev/null) FAUCET_PORT8079 FAUCET_URLhttp://localhost:$FAUCET_PORT linera_spawn linera net up --with-faucet --faucet-port $FAUCET_PORT初始化两个钱包并创建链得到CHAIN_1、CHAIN_2、OWNER_1、OWNER_2发布并创建应用APP_ID$(linera --with-wallet 1 project publish-and-create examples/social)分别启动两个 Node Servicelinera --with-wallet 1 service --port 8080 sleep 2 linera --with-wallet 2 service --port 8081 sleep 2启动前端在examples/social/web-frontend下执行npm install、npm run tailwind、npm run compile、npm run dev用链 2 的浏览器标签页打开http://localhost:3000/$CHAIN_2?app$APP_IDowner$OWNER_2port8081先执行订阅mutation { subscribe(chainId: $CHAIN_1) }再用链 1 的标签页port8080发帖mutation { post(text: Linera Social is the new Mastodon!) }回到链 2 的页面帖子应实时出现经由订阅通知触发重新拉取也可以在 GraphiQL IDE 中执行query { receivedPosts { keys { timestamp author index } } }核对订阅结果。源码纵深事件流在合约侧如何闭环前端能实时收到帖子背后是合约侧的事件流机制examples/social/src/contract.rs帖子操作execute_post_operation会把OwnPost追加到own_posts日志并通过runtime.emit(STREAM_NAME, Event::Post { post, index })把事件写入名为posts的流订阅/取消订阅通过subscribe_to_events/unsubscribe_from_events注册对目标链posts流的监听process_streams消费流更新将Event::Post写入本地received_posts视图点赞/评论若作用于他人帖子会通过send_message跨链发送Message::Like/Comment作者链处理后同样 emit 事件回传Checkpoint 摘要summarize_events会在检查点保留最近 10 条帖子SUMMARY_POST_COUNT以Event::Summary事件让后来加入的订阅者也能补齐历史帖子examples/social/src/contract.rs。值得注意的还有Key的自定义序列化CustomSerialize对时间戳与索引取反后存储使得键的字典序即时间倒序、作者升序、索引倒序保证received_posts按最新优先排列examples/social/src/lib.rs对应测试见同一文件中的test_key_custom_serialize。结语examples/social/web-frontend是一个麻雀虽小五脏俱全的 Linera 前端范例它以微链代表用户以事件流驱动跨链内容分发前端则通过 Node Service 的 GraphQL/WebSocket 双通道实现实时社交体验。掌握了 URL 参数规则、Apollo 双链路配置与compile/tailwind/dev三个核心脚本你就能在本地复现完整的订阅—发帖—推送—展示闭环并以此为模板开发自己的事件流驱动应用。【免费下载链接】linera-protocolMain repository for the Linera protocol项目地址: https://gitcode.com/GitHub_Trending/li/linera-protocol创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考