文章目录
  1. 1. ShareDB 简单使用介绍
    1. 1.1. 服务端搭建步骤
    2. 1.2. 客户端搭建步骤
      1. 1.2.1. 在 Node 项目中的使用

ShareDB 是一个整合了前后端的 OT 框架,可以很方便地自行搭建服务端和客户端。框架基于 Node.JS 实现。

ShareDB 简单使用介绍

ShareDB 是一个整合了前后端的 OT 框架,可以很方便地自行搭建服务端和客户端。框架基于 Node.JS 实现。

服务端搭建步骤

  • 新建 Node 项目
    • npm init -y
  • 安装依赖

    1
    2
    3
    4
    npm install ShareDB@1.0.0-beta.7 \
    ot-text \
    ws \
    websocket-push-stream --save
  • 创建 server.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    var 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-text
    ShareDB.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 项目中的使用

  • 安装依赖

    1
    npm install ShareDB@1.0.0-beta.7 ws --save
  • 示例代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    var 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/docs
    console.log(op);
    });
    // 通过 doc 提交文档改动
    // 在获得文档改动数据后,需要将改动数据转换成 OT 类型所对应的格式并通过 doc.submitOp 提交
    // 具体参考 https://github.com/ottypes/docs
    // 表示跳过 1 个字符,插入 a
    let op1 = [1, 'a'];
    // 提交改动到 ShareDB 服务端
    doc.submitOp(op1);
    // 表示跳过 2 个字符,删除 1 个长度的字符
    let op2 = [2, {d: 1}];
    // 提交改动到 ShareDB 服务端
    doc.submitOp(op2);
    });
文章目录
  1. 1. ShareDB 简单使用介绍
    1. 1.1. 服务端搭建步骤
    2. 1.2. 客户端搭建步骤
      1. 1.2.1. 在 Node 项目中的使用