官方的同步示例我觉得还是很有参考价值的,值得深入学习下,所以这里扒了下源码。
官方的同步示例我觉得还是很有参考价值的,值得深入学习下,所以这里扒了下源码。需要注意的是这里面涉及到了yjs和y-protocols。请务必先了解这两个库。
上述源码代码过多同时涉及到yjs其他模块,我们梳理以下y-websocket的流程架构:
类似大多数ws通信初始化方式,我们通过new WebsocketProvider
来创建ws连接,yjs称其实例化对象为provider,我们后面也称其为provider。
初始化参数我上面都有注释,大部分很好理解,我们这只单独说一下WebSocketPolyfill
这个参数。官网对这个参数的解释是当在node环境下使用这个库时需要配置该参数。原因是浏览器环境下环境变量中有Websocket这个对象了可以直接调用,node全局环境下没有这个对象所以需要额外提供,这个参数本质上就是一个Websocket
对象(类)。以下是官网的代码实例:
const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', doc, { WebSocketPolyfill: require('ws') })
当然你硬要在浏览器环境下传也可以,就像下面这样:
const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', doc, { WebSocketPolyfill: Websocket })
初始化过程中会初始化一些属性,这些没什么好说的。其中有个this.mux = mutex.createMutex()
属性,是在对象实例上创建了一个互斥锁。这个方法确保了同一时刻只有一个mux函数在执行,如下是官网的示例:
js
上图示例中在mutex函数内部调用的mutex函数是不会执行的,因为执行内部函数时外层的函数没还没执行结束,相当于被锁住了。
初始化连接有两种方式,执行new WebsocketProvider
时传递connect
参数则会自动连接,否则需要手动调用connect()
连接。
connect方法内部会首先调用setupWS方法构建websocket连接。
随后调用connectBc方法初始化本地跨标签页更新
项目下的事件活动主要在这里处理。
WebsocketProvider对象继承自lib0库的Observable类。这个类就是个订阅发布模式的实现,WebsocketProvider类内部触发status事件来暴露连接的状态。我们可以绑定响应的监听事件函数来处理连接状态的变化。
当该字段变化时,WebsocketProvider内部会触发synced
和sync
事件.同样可以绑定对应的监听函数来满足一些业务上的需求(比如,保存中?或者加载中?)