ShareDB 简单使用介绍
ShareDB 是一个整合了前后端的 OT 框架,可以很方便地自行搭建服务端和客户端。框架基于 Node.JS 实现。
ShareDB 简单使用介绍
ShareDB 是一个整合了前后端的 OT 框架,可以很方便地自行搭建服务端和客户端。框架基于 Node.JS 实现。
服务端搭建步骤
- 新建 Node 项目
npm init -y
安装依赖
1234npm install ShareDB@1.0.0-beta.7 \ot-text \ws \websocket-push-stream --save创建 server.js 文件
1234567891011121314151617181920212223242526272829303132333435var ShareDB = require('sharedb');var WebSocket = require('ws');var WebSocketStream = require('websocket-push-stream');var otText = require('ot-text');// ShareDB 可以支持多种 OT 类型,例如 JSON 文本,普通文本,富文本等// 具体文档可以查看 https://github.com/ottypes/docs// 这里使用普通文本类型 ot-textShareDB.types.register(otText.type); // otText.type === 'text'var backend = new ShareDB();// 监听 9090 端口var wss = new WebSocket.Server({port: 9090}, () => {console.log('WebSocket Server Created.');});// 监听新的客户端 WebSocket 链接,对新的链接进行封装,交给 ShareDB 处理wss.on('connection', function(ws) {// ShareDB 使用 stream 来与客户端实现通信,从而可以忽略底层的传输方式// 这里使用 WebSocket 作为底层的传输方式,保证实时数据传输let stream = new WebSocketStream(ws);// ShareDB 的前后端通信的数据以 JSON 格式传输// 服务端收到数据后,需要将数据从 JSON 转换为 Object// 并通过放入 stream 的缓存区 (push),交给 ShareDB 处理ws.on('message', function(msg) {// 可以在这里对 msg 进行筛选,自定义的数据可以另行处理,不交给 ShareDB 处理stream.push(JSON.parse(msg));});// 使 ShareDB 监听新的链接backend.listen(stream);});启动 server
node server.js
客户端搭建步骤
ShareDB 的客户端可以在浏览器网页和 Node 项目中使用。嵌入浏览器网页的用法可以参考 https://github.com/share/sharedb/tree/master/examples
在 Node 项目中的使用
安装依赖
1npm install ShareDB@1.0.0-beta.7 ws --save示例代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657var ShareDB = require('sharedb/lib/client');var WebSocket = require('ws');var socket = new WebSocket('ws://localhost:9090');socket.on('open', function() {// 通过 WebSocket 与 ShareDB 建立链接var connection = new ShareDB.Connection(socket);// 从 ShareDB 返回 collectionName 下的 documentName 文档// 同一个 collectionName 下可以有多个文档// 类似于 MongoDB 的存储方式var doc = connection.get('collectionName', 'documentName');// 从 ShareDB 服务器获取最新文档内容// 并指示 ShareDB 将后续对此文档的操作事件发送到此客户端doc.subscribe( function(error) {if (error) throw error;if (doc.type === null) {// 返回的 doc.type 为 null,则说明此文档还没有被创建// ShareDB 上不存在这个文档,所以这里做一次创建文档的操作// 第一个参数是文档内容,依据 OT 类型(第二个参数)的不同有不同的格式// 这里指定新的 doc 的 OT 类型为 'text',所以文档内容为字符串this.doc.create(‘This is a new document’, 'text');} else {// doc.data 即为文档内容console.log(doc.data);}});// 监听事件,‘op’ 表示对文档有修改doc.on('op', function(op, source) {// source === true 表示是本客户端对 doc 的修改if (source) {return;}// op 是对文档的修改数据,对于不同的 OT 类型有不同的格式// 具体参考 https://github.com/ottypes/docsconsole.log(op);});// 通过 doc 提交文档改动// 在获得文档改动数据后,需要将改动数据转换成 OT 类型所对应的格式并通过 doc.submitOp 提交// 具体参考 https://github.com/ottypes/docs// 表示跳过 1 个字符,插入 alet op1 = [1, 'a'];// 提交改动到 ShareDB 服务端doc.submitOp(op1);// 表示跳过 2 个字符,删除 1 个长度的字符let op2 = [2, {d: 1}];// 提交改动到 ShareDB 服务端doc.submitOp(op2);});