尧图网站建设 
Hocuspocus 快速上手三步跑通一个实时协作服务器【免费下载链接】hocuspocusThe Yjs CRDT WebSocket backend for conflict-free real-time collaboration in your app.项目地址: https://gitcode.com/gh_mirrors/ho/hocuspocusHocuspocus 是基于 Yjs 构建的实时协作后端Yjs 是一套自动合并多人编辑冲突的 CRDT 库。你只需把服务起起来、把客户端连上去同一份文档的多次修改就会自动实时同步不用自己写同步协议。动手前要备好的东西Node.js 22 及以上版本Git本机 1234 端口空闲能访问 npm 仓库的网络Step 1一条命令装好 Hocuspocus 服务端和客户端 新建目录把服务器、日志、SQLite 持久化扩展和客户端一次性装齐mkdir collab-demo cd collab-demo npm init -y npm install hocuspocus/server hocuspocus/extension-logger hocuspocus/extension-sqlite hocuspocus/provider yjs装完记得在package.json里加一行type: module后面写的.js文件才能直接用import语法。✅ 验证node_modules/hocuspocus/server目录存在安装日志结尾没有 peer 依赖告警。⚠️ 用 yarn v1 的话yjs和y-protocols要显式补装它默认不装 peer 依赖。Step 2写一个十行的 Hocuspocus 服务器建server.js。Logger 扩展把每次连接打印出来SQLite 扩展负责把文档落盘import { Server } from hocuspocus/server import { Logger } from hocuspocus/extension-logger import { SQLite } from hocuspocus/extension-sqlite const server new Server({ port: 1234, extensions: [ new Logger(), new SQLite({ database: db.sqlite }), ], }) server.listen()这份配置做了三件事监听 1234 端口、记录连接日志、把文档存进db.sqlite。用node server.js启动它。✅ 验证进程常驻不报错、不退出。此时服务器已经挂起等客户端进来。Step 3第一个客户端确认数据真的在同步建client.js连上服务器并往共享数组里写一条数据import * as Y from yjs import { HocuspocusProvider } from hocuspocus/provider const doc new Y.Doc() const tasks doc.getArray(tasks) const provider new HocuspocusProvider({ url: ws://127.0.0.1:1234, name: example-document, document: doc, }) tasks.observe(() { console.log(Synced:, tasks.toArray()) }) tasks.push([购买牛奶])Provider 负责和服务器保持长连接name是文档的房号。用node client.js运行它。✅ 验证服务器终端多出一行 Logger 的连接日志客户端打印Synced: [ 购买牛奶 ]。到这一步一次真实的双向同步已经跑通了。第一次真实使用两个客户端共用一份任务清单把client.js另存为client2.js只改一处把push的内容换成[写文章]然后在第二个终端运行node client2.js。第二个客户端连进来后先做全量同步立刻拿到已有内容它新写的任务也会推给第一个客户端。✅ 验证第一个终端立刻打印Synced: [ 购买牛奶, 写文章 ]中间没有任何手动刷新。这就是实时协作的实际效果——两边各自持有完整且一致的文档。新手最常卡住的四个点现象启动报EADDRINUSE。原因1234 端口被别的进程占着常见于上一次的 node 没退干净。 解决换个空闲端口同时把客户端的url改掉两边必须一致。现象两个客户端都正常但互相不同步。原因name写得不一样。Hocuspocus 按name隔离文档房号不同就是两个房间。 解决检查每个客户端的name完全相同。现象重启服务器后文档内容消失了。原因没挂持久化扩展时文档只存在内存里进程一死就没了。 解决挂上new SQLite({ database: db.sqlite })下次启动自动恢复。现象客户端报Cannot find package yjs。原因yarn v1 不自动安装 peer 依赖而 provider 需要 yjs 才能工作。 解决显式执行yarn add yjs y-protocols或改用 npm / pnpm。从 Demo 到生产先想清楚三件事持久化单机用 extension-sqlite 最省事要接自己的库用 extension-database多实例部署再加 extension-redis 做跨实例同步。安全用onAuthenticate钩子校验客户端传来的token不合法的连接直接拒掉。性能用 extension-throttle 对异常客户端限流未认证客户端的缓冲消息默认就有上限防止内存被打爆。下一步往哪走想看完整协作编辑器仓库自带一套 Next.js Tiptap 示例服务端配置见playground/backend/src/default.ts前端在playground/frontend/下跑pnpm install pnpm start就能打开可编辑的多人页面。想理解钩子机制packages/server/README.md覆盖了 onAuthenticate、onLoadDocument、onStoreDocument 等全部生命周期钩子packages/provider/README.md则讲了客户端的 presence、断线重连和无状态消息。【免费下载链接】hocuspocusThe Yjs CRDT WebSocket backend for conflict-free real-time collaboration in your app.项目地址: https://gitcode.com/gh_mirrors/ho/hocuspocus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hocuspocus 快速上手：三步跑通一个实时协作服务器
Hocuspocus 快速上手三步跑通一个实时协作服务器【免费下载链接】hocuspocusThe Yjs CRDT WebSocket backend for conflict-free real-time collaboration in your app.项目地址: https://gitcode.com/gh_mirrors/ho/hocuspocusHocuspocus 是基于 Yjs 构建的实时协作后端Yjs 是一套自动合并多人编辑冲突的 CRDT 库。你只需把服务起起来、把客户端连上去同一份文档的多次修改就会自动实时同步不用自己写同步协议。动手前要备好的东西Node.js 22 及以上版本Git本机 1234 端口空闲能访问 npm 仓库的网络Step 1一条命令装好 Hocuspocus 服务端和客户端 新建目录把服务器、日志、SQLite 持久化扩展和客户端一次性装齐mkdir collab-demo cd collab-demo npm init -y npm install hocuspocus/server hocuspocus/extension-logger hocuspocus/extension-sqlite hocuspocus/provider yjs装完记得在package.json里加一行type: module后面写的.js文件才能直接用import语法。✅ 验证node_modules/hocuspocus/server目录存在安装日志结尾没有 peer 依赖告警。⚠️ 用 yarn v1 的话yjs和y-protocols要显式补装它默认不装 peer 依赖。Step 2写一个十行的 Hocuspocus 服务器建server.js。Logger 扩展把每次连接打印出来SQLite 扩展负责把文档落盘import { Server } from hocuspocus/server import { Logger } from hocuspocus/extension-logger import { SQLite } from hocuspocus/extension-sqlite const server new Server({ port: 1234, extensions: [ new Logger(), new SQLite({ database: db.sqlite }), ], }) server.listen()这份配置做了三件事监听 1234 端口、记录连接日志、把文档存进db.sqlite。用node server.js启动它。✅ 验证进程常驻不报错、不退出。此时服务器已经挂起等客户端进来。Step 3第一个客户端确认数据真的在同步建client.js连上服务器并往共享数组里写一条数据import * as Y from yjs import { HocuspocusProvider } from hocuspocus/provider const doc new Y.Doc() const tasks doc.getArray(tasks) const provider new HocuspocusProvider({ url: ws://127.0.0.1:1234, name: example-document, document: doc, }) tasks.observe(() { console.log(Synced:, tasks.toArray()) }) tasks.push([购买牛奶])Provider 负责和服务器保持长连接name是文档的房号。用node client.js运行它。✅ 验证服务器终端多出一行 Logger 的连接日志客户端打印Synced: [ 购买牛奶 ]。到这一步一次真实的双向同步已经跑通了。第一次真实使用两个客户端共用一份任务清单把client.js另存为client2.js只改一处把push的内容换成[写文章]然后在第二个终端运行node client2.js。第二个客户端连进来后先做全量同步立刻拿到已有内容它新写的任务也会推给第一个客户端。✅ 验证第一个终端立刻打印Synced: [ 购买牛奶, 写文章 ]中间没有任何手动刷新。这就是实时协作的实际效果——两边各自持有完整且一致的文档。新手最常卡住的四个点现象启动报EADDRINUSE。原因1234 端口被别的进程占着常见于上一次的 node 没退干净。 解决换个空闲端口同时把客户端的url改掉两边必须一致。现象两个客户端都正常但互相不同步。原因name写得不一样。Hocuspocus 按name隔离文档房号不同就是两个房间。 解决检查每个客户端的name完全相同。现象重启服务器后文档内容消失了。原因没挂持久化扩展时文档只存在内存里进程一死就没了。 解决挂上new SQLite({ database: db.sqlite })下次启动自动恢复。现象客户端报Cannot find package yjs。原因yarn v1 不自动安装 peer 依赖而 provider 需要 yjs 才能工作。 解决显式执行yarn add yjs y-protocols或改用 npm / pnpm。从 Demo 到生产先想清楚三件事持久化单机用 extension-sqlite 最省事要接自己的库用 extension-database多实例部署再加 extension-redis 做跨实例同步。安全用onAuthenticate钩子校验客户端传来的token不合法的连接直接拒掉。性能用 extension-throttle 对异常客户端限流未认证客户端的缓冲消息默认就有上限防止内存被打爆。下一步往哪走想看完整协作编辑器仓库自带一套 Next.js Tiptap 示例服务端配置见playground/backend/src/default.ts前端在playground/frontend/下跑pnpm install pnpm start就能打开可编辑的多人页面。想理解钩子机制packages/server/README.md覆盖了 onAuthenticate、onLoadDocument、onStoreDocument 等全部生命周期钩子packages/provider/README.md则讲了客户端的 presence、断线重连和无状态消息。【免费下载链接】hocuspocusThe Yjs CRDT WebSocket backend for conflict-free real-time collaboration in your app.项目地址: https://gitcode.com/gh_mirrors/ho/hocuspocus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考