网络同步
网络同步
网络同步方式
yjs提供了三种实现网络同步的方法,分别是y-websocket,y-webrtc和y-dat。
本人不才只了解过websocket链接,并且后续开发也打算使用websocket链接,所以这里暂时只分享y-websocket的使用文档。另外两种链接方式的文档官方也在整理中尚未完成,您可通过下方链接查看官方文档进度:
y-websocket
起步
以下是官方给的使用y-websocket的示例:
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) // logs "connected" or "disconnected"
})
特殊情况:在node端使用y-websocket链接
const ws = require('ws')
const wsProvider = new WebsocketProvider(
'ws://localhost:1234', 'my-roomname',
doc,
{ WebSocketPolyfill: ws }
)
API
创建链接
wsProvider = new WebsocketProvider(serverUrl: string, room: string, ydoc: Y.Doc [, wsOpts: WsOpts])
创建一个websocket链接实例,只要链接存在,修改就会通过到服务器同步到其他的客户端。 通过传递一个配置对象即可覆写默认的连接配置,配置对象的内容如下:
wsOpts = {
// 是否自动链接到服务器
connect: true,
// 指定传递的参数
// I.e. params = { auth: "bearer" } will be transformed to "?auth=bearer"
params: {}, // Object<string,string>
// You may polyill the Websocket object (https://developer.mozilla.org/en-US/docs/Web/API/WebSocket).
// E.g. In nodejs, you could specify WebsocketPolyfill = require('ws')
WebsocketPolyfill: Websocket,
// 指定现有的 Awareness instance - see https://github.com/yjs/y-protocols
awareness: new awarenessProtocol.Awareness(ydoc)
}
wsProvider.wsconnected: boolean 是否连接成功
wsProvider.wsconnecting: boolean 是否正在连接到服务器
wsProvider.shouldConnect: boolean 断线后是否自动重连
wsProvider.bcconnected: boolean 当前页面是否正通过浏览器的BroadcastChannel进行跨窗口通信。
wsProvider.synced: boolean 当前连接是否已经和服务器成功连接并同步数据
wsProvider.disconnect() 与服务器断开连接并停止重连
wsProvider.connect() 连接到服务器
wsProvider.destroy() 与服务器断开连接并销毁连接实例释放所有事件处理函数
wsProvider.on('sync', function(isSynced: boolean)) 该事件在收到来自服务器的消息时触发
服务器端
通过npx直接运行y-websocket-server下的可执行文件启动一个y-websocket服务器:
PORT=1234 npx y-websocket-server
默认使用的端口为1234.
具有持久化功能的websocket连接
通过将文件存储到LevelDB中实现持久化,详细内容见LevelDB Persistence
PORT=1234 YPERSISTENCE=./dbDir node ./node_modules/y-websocket/bin/server.js