yjs用socket.io-client

前言

yjs的官网只有y-websocket,可是我的项目使用的是2.0版本的egg.js，本着用egg提供的socket.io的能力，我只能使用socket.io-clent来修改y-websocket进行数据交互了，本文主要会是说我改了哪些地方以及遇到的坑。

修改

首先我下载了y-websocket的github源码在自己的项目中使用源码让项目正常运行起来了，然后就开始修改工作了，当前前提咱们还是要看看socket.io-client的文档对这个是有了解的，不然你也不知道要该改些什么地方。

1.在源码中找到websocket

const setupWS = (provider) => {
  if (provider.shouldConnect && provider.ws === null) {
    const websocket = new provider._WS(provider.url)
    websocket.binaryType = 'arraybuffer'
    provider.ws = websocket
    provider.wsconnecting = true
    provider.wsconnected = false
    provider.synced = false
    ...

很明显的发现了websocket，本着不管有没有打三杆的原则，我就把他给改了。

//安装socket.io-client@2.3.0
//导入
import io from 'socket.io-client';
//代码修改位置
const setupWS = (provider: WebsocketProvider) => {
	if (provider.shouldConnect && provider.ws === null) {
	const websocket = io(provider.url, {
            transports: ['websocket']
        },
    });
    provider.ws = websocket;
    provider.wsconnected = false;
    provider.synced = false;

这里有个坑，不加上transports: ['websocket']就一直连接断开，不知道为什么加上接没事了。

后面就是把websocket的事件改成socket.io-client的

websocket.onopen 改成 websocket.on('connect'

websocket.onerror 改成websocket.on('error'

对于信息 websocket.onmessage要单独说下，这个用socket你要和后端商量好用什么(命名空间)字符串，发送信息也是要后端告诉你是需要发送到那个(命名空间)字符串。

其他坑

1. 数据传输的时候使用的是ArrayBuffer使用socket。io就不行了，后面通过百度查询才知道需要在发送数据之前把数据获取出来const arrayBuffer = buf.buffer.slice(0);使用websocket不用应该是websocket.binaryType = 'arraybuffer'这个配置的原因吧。
2. 加了socket就会有个ctx的上下文，这个在后端更新函数updateHandler中需要添加建议是挂到doc上面，不然yjs内部的update不会更新内容
3. 同步是是消息类型0，鼠标状态是1

总结

如果知道单纯的修改其实还算好，改动的地方不会是很多，只要你熟悉socket然后对照官方这个区该就基本可以运行起来，如果大家还有其他问题遇到了，也可以评论区中讨论下。我文档用的是aomao,表格用的是luckysheet,后面也在研究univer暂时还没有调试完弄完了后面再写个univer对接的文章。还有就是后面看了下github中有个y-socket但是他是用的最新版的socket.有个回调事件区更新yjs,有需要和兴趣的特可以去搜索了解下这里我就不再赘述了。