y-websocket 快速入门5 分钟搭建你的第一个实时协作应用【免费下载链接】y-websocketWebsocket Connector for Yjs项目地址: https://gitcode.com/gh_mirrors/yw/y-websocket你是否好奇过像在线文档、多人白板这类实时协作应用是怎么做到你打字、我同步的答案往往藏在一个叫y-websocket的库中。它是 Yjs 生态里最流行的WebSocket 连接器负责让多个客户端通过一个 WebSocket 服务器实时同步文档数据与在线状态。本文用 5 分钟带你完成y-websocket 快速入门从零搭建你的第一个实时协作应用。y-websocket 是什么为什么实时协作应用都爱用它y-websocket 采用经典的客户端-服务器模型客户端连接同一个 WebSocket 地址服务器负责在它们之间分发文档更新document updates和在线状态信息awareness。你可以把它理解成实时协作应用的通信枢纽。能力说明 文档同步自动把 Yjs 文档的增量更新广播给房间内所有客户端 光标共享通过 awareness 协议实时同步光标、选区和在线成员 断线重连内置指数退避重连机制网络抖动也能自动恢复 跨标签页通信同一浏览器打开多个标签页时无需服务器即可本地互通 认证友好WebSocket 会携带 Header 和 Cookie可复用现有登录体系简单来说只要你会写 Yjs 文档y-websocket 就能帮你把它变成多人实时协作应用。核心实现集中在 src/y-websocket.js整个仓库结构非常轻量适合新手阅读源码学习。5 分钟快速入门一键启动 y-websocket 服务器下面按步骤走全程只需要一个终端和一个文本编辑器。第一步安装依赖在你项目的终端里执行npm i y-websockety-websocket 依赖yjs、y-protocols、lib0等包npm 会自动一并安装无需手动处理。第二步启动 y-websocket 服务端这是最省事的一步——官方直接内置了一个可运行的服务器见 bin/server.cjs用一条命令即可启动HOSTlocalhost PORT1234 npx y-websocketPORT默认就是1234HOST默认是localhost所以直接运行npx y-websocket也可以看到终端输出监听信息说明服务端已经就绪 ✅ 想用 Docker 部署仓库里的 Dockerfile 已经帮你封装好了 Node 运行环境并暴露 1234 端口照着构建镜像即可。第三步编写你的第一个客户端新建一个index.js浏览器环境则直接在 HTML 中引入输入下面这段最小代码import * as Y from yjs import { WebsocketProvider } from y-websocket const doc new Y.Doc() const wsProvider new WebsocketProvider( ws://localhost:1234, // 服务器地址 my-roomname, // 房间名相同房间才能互相同步 doc ) wsProvider.on(status, event { console.log(event.status) // connected / disconnected })第四步打开两个页面见证实时同步再复制一份客户端代码让两个页面加入同一个房间my-roomname然后对doc做任意修改比如doc.getText(content).insert(0, 你好)。你会发现浏览器A ──┐ 浏览器B ──┼──► y-websocket 服务器 ◄── 浏览器C 浏览器C ──┘ │ 其他客户端……一个页面写入其他页面几乎同步收到更新——你的第一个实时协作应用就诞生了进阶玩法让 y-websocket 支持持久化与回调基础同步跑通后这几个进阶配置能帮你把项目推向生产环境。玩法一文档持久化到 LevelDB服务器默认把数据存在内存里重启即丢。加上YPERSISTENCE环境变量即可持久化HOSTlocalhost PORT1234 YPERSISTENCE./dbDir node ./node_modules/y-websocket/bin/server.cjs文档更新会自动写入./dbDir目录重启服务数据不丢失。玩法二文档变更触发 HTTP 回调想文档一有变化就通知业务系统配置CALLBACK_URL即可服务器会在收到更新后默认防抖 2 秒向你的接口发送POST请求CALLBACK_URLhttp://localhost:3000/ CALLBACK_OBJECTS{prosemirror:XmlFragment} npm start可选的环境变量还有CALLBACK_DEBOUNCE_WAIT防抖时间、CALLBACK_TIMEOUT超时时间等灵活度很高。玩法三在 Node.js 服务端使用Node.js 环境没有原生WebSocket对象用ws包做 polyfill 即可const wsProvider new WebsocketProvider(url, room, doc, { WebSocketPolyfill: require(ws) })新手常见问题 FAQQ1y-websocket 和 y-redis 有什么区别y-websocket 是内置的轻量内存版服务器适合中小规模场景y-redis 是支持水平扩展、带鉴权的替代后端。想快速验证想法用 y-websocket 就够了。Q2连接不上服务器怎么办先确认服务端端口是否被占用、客户端地址协议是否为ws://HTTPS 页面需用wss://再通过wsProvider.on(status)观察连接状态配合connection-error事件定位问题。Q3多个用户的光标怎么显示y-websocket 通过 awareness 协议自动同步在线状态配合 Yjs 的Awareness类即可获取每个客户端的自定义字段如光标坐标、用户昵称。Q4断开连接后如何重连这是内置能力。y-websocket 使用指数退避算法自动重连可通过wsOpts.maxBackoffTime控制最大等待间隔默认 2500ms几乎无需手动干预。总结从 5 分钟入门到实时协作应用实战通过本文的y-websocket 快速入门你已经完成了从安装、启动服务端、编写客户端到验证实时同步的全流程还掌握了持久化、HTTP 回调、Node.js 适配等进阶能力。y-websocket 把 WebSocket 协作最复杂的部分封装得足够简单让你能把精力集中在业务本身——无论是协同文档、实时白板还是多人画布它都是值得信赖的底层基石。下一步建议阅读仓库内的 README.md 和 src/y-websocket.js 源码理解消息类型与同步协议你的实时协作应用之路会越走越顺。【免费下载链接】y-websocketWebsocket Connector for Yjs项目地址: https://gitcode.com/gh_mirrors/yw/y-websocket创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 y-websocket 快速入门：5 分钟搭建你的第一个实时协作应用
y-websocket 快速入门5 分钟搭建你的第一个实时协作应用【免费下载链接】y-websocketWebsocket Connector for Yjs项目地址: https://gitcode.com/gh_mirrors/yw/y-websocket你是否好奇过像在线文档、多人白板这类实时协作应用是怎么做到你打字、我同步的答案往往藏在一个叫y-websocket的库中。它是 Yjs 生态里最流行的WebSocket 连接器负责让多个客户端通过一个 WebSocket 服务器实时同步文档数据与在线状态。本文用 5 分钟带你完成y-websocket 快速入门从零搭建你的第一个实时协作应用。y-websocket 是什么为什么实时协作应用都爱用它y-websocket 采用经典的客户端-服务器模型客户端连接同一个 WebSocket 地址服务器负责在它们之间分发文档更新document updates和在线状态信息awareness。你可以把它理解成实时协作应用的通信枢纽。能力说明 文档同步自动把 Yjs 文档的增量更新广播给房间内所有客户端 光标共享通过 awareness 协议实时同步光标、选区和在线成员 断线重连内置指数退避重连机制网络抖动也能自动恢复 跨标签页通信同一浏览器打开多个标签页时无需服务器即可本地互通 认证友好WebSocket 会携带 Header 和 Cookie可复用现有登录体系简单来说只要你会写 Yjs 文档y-websocket 就能帮你把它变成多人实时协作应用。核心实现集中在 src/y-websocket.js整个仓库结构非常轻量适合新手阅读源码学习。5 分钟快速入门一键启动 y-websocket 服务器下面按步骤走全程只需要一个终端和一个文本编辑器。第一步安装依赖在你项目的终端里执行npm i y-websockety-websocket 依赖yjs、y-protocols、lib0等包npm 会自动一并安装无需手动处理。第二步启动 y-websocket 服务端这是最省事的一步——官方直接内置了一个可运行的服务器见 bin/server.cjs用一条命令即可启动HOSTlocalhost PORT1234 npx y-websocketPORT默认就是1234HOST默认是localhost所以直接运行npx y-websocket也可以看到终端输出监听信息说明服务端已经就绪 ✅ 想用 Docker 部署仓库里的 Dockerfile 已经帮你封装好了 Node 运行环境并暴露 1234 端口照着构建镜像即可。第三步编写你的第一个客户端新建一个index.js浏览器环境则直接在 HTML 中引入输入下面这段最小代码import * as Y from yjs import { WebsocketProvider } from y-websocket const doc new Y.Doc() const wsProvider new WebsocketProvider( ws://localhost:1234, // 服务器地址 my-roomname, // 房间名相同房间才能互相同步 doc ) wsProvider.on(status, event { console.log(event.status) // connected / disconnected })第四步打开两个页面见证实时同步再复制一份客户端代码让两个页面加入同一个房间my-roomname然后对doc做任意修改比如doc.getText(content).insert(0, 你好)。你会发现浏览器A ──┐ 浏览器B ──┼──► y-websocket 服务器 ◄── 浏览器C 浏览器C ──┘ │ 其他客户端……一个页面写入其他页面几乎同步收到更新——你的第一个实时协作应用就诞生了进阶玩法让 y-websocket 支持持久化与回调基础同步跑通后这几个进阶配置能帮你把项目推向生产环境。玩法一文档持久化到 LevelDB服务器默认把数据存在内存里重启即丢。加上YPERSISTENCE环境变量即可持久化HOSTlocalhost PORT1234 YPERSISTENCE./dbDir node ./node_modules/y-websocket/bin/server.cjs文档更新会自动写入./dbDir目录重启服务数据不丢失。玩法二文档变更触发 HTTP 回调想文档一有变化就通知业务系统配置CALLBACK_URL即可服务器会在收到更新后默认防抖 2 秒向你的接口发送POST请求CALLBACK_URLhttp://localhost:3000/ CALLBACK_OBJECTS{prosemirror:XmlFragment} npm start可选的环境变量还有CALLBACK_DEBOUNCE_WAIT防抖时间、CALLBACK_TIMEOUT超时时间等灵活度很高。玩法三在 Node.js 服务端使用Node.js 环境没有原生WebSocket对象用ws包做 polyfill 即可const wsProvider new WebsocketProvider(url, room, doc, { WebSocketPolyfill: require(ws) })新手常见问题 FAQQ1y-websocket 和 y-redis 有什么区别y-websocket 是内置的轻量内存版服务器适合中小规模场景y-redis 是支持水平扩展、带鉴权的替代后端。想快速验证想法用 y-websocket 就够了。Q2连接不上服务器怎么办先确认服务端端口是否被占用、客户端地址协议是否为ws://HTTPS 页面需用wss://再通过wsProvider.on(status)观察连接状态配合connection-error事件定位问题。Q3多个用户的光标怎么显示y-websocket 通过 awareness 协议自动同步在线状态配合 Yjs 的Awareness类即可获取每个客户端的自定义字段如光标坐标、用户昵称。Q4断开连接后如何重连这是内置能力。y-websocket 使用指数退避算法自动重连可通过wsOpts.maxBackoffTime控制最大等待间隔默认 2500ms几乎无需手动干预。总结从 5 分钟入门到实时协作应用实战通过本文的y-websocket 快速入门你已经完成了从安装、启动服务端、编写客户端到验证实时同步的全流程还掌握了持久化、HTTP 回调、Node.js 适配等进阶能力。y-websocket 把 WebSocket 协作最复杂的部分封装得足够简单让你能把精力集中在业务本身——无论是协同文档、实时白板还是多人画布它都是值得信赖的底层基石。下一步建议阅读仓库内的 README.md 和 src/y-websocket.js 源码理解消息类型与同步协议你的实时协作应用之路会越走越顺。【免费下载链接】y-websocketWebsocket Connector for Yjs项目地址: https://gitcode.com/gh_mirrors/yw/y-websocket创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考