yjs

网络同步

yjs提供了三种实现网络同步的方法，分别是y-websocket,y-webrtc和y-dat。

Aling

2023-08-15

阅读时长

#网络同步方式

yjs提供了三种实现网络同步的方法，分别是y-websocket,y-webrtc和y-dat。

本人不才只了解过websocket链接，并且后续开发也打算使用websocket链接，所以这里暂时只分享y-websocket的使用文档。另外两种链接方式的文档官方也在整理中尚未完成，您可通过下方链接查看官方文档进度:

#y-websocket

#起步

以下是官方给的使用y-websocket的示例：

js
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链接

js
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链接实例，只要链接存在，修改就会通过到服务器同步到其他的客户端。通过传递一个配置对象即可覆写默认的连接配置，配置对象的内容如下：

js
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连接

Shared Types

基础概念