网络同步

Align
2023-08-15
3 min

网络同步

网络同步方式

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

支持回调的websocket连接