大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 ShareJS

Collaborative editing in any app

ShareJS 是一个小型服务器和客户端库，允许通过 OT 同时编辑任何类型的内容。服务器在 NodeJS 上运行，客户端在 NodeJS 或 Web 浏览器中运行。ShareJS 目前支持对纯文本和任意 JSON 数据进行操作转换。

在浏览器支持方面 ShareJS 也非常给力，目前支持几乎所有主流浏览器，低至 IE5.5（尽管新版本尚未测试 IE 支持）。

目前 ShareJS 在 Github 通过 MIT 协议开源，有超过 5k 的 star、是一个值得关注的前端开源项目。

如何使用 ShareJS

首先需要安装相应依赖：

npm install share

要开始使用 ShareJS 服务器 API，开发者需要做 2 件事：

• 确定要将数据存储在何处，比如：使用 livesdb 内存存储
• 确定客户端和服务器的通信方式，最简单的解决方案是使用 browserchannel。

下面是创建 ShareJS 服务器实例：

var livedb = require('livedb');
var sharejs = require('share');

var backend = livedb.client(livedb.memory());
var share = require('share').server.createClient({backend: backend});
// 方法称为 createClient，因为是数据库的客户端

服务器公开了一个 share.listen(stream) 方法 ，开发者可以使用与客户端通信的 Node.js 流调用该方法。 下面是使用 browserchannel 的示例：

var Duplex = require('stream').Duplex;
var browserChannel = require('browserchannel').server
var share = require('share').server.createClient({backend: ...});
var app = require('express')();
app.use(browserChannel({webserver: webserver}, function(client) {
  var stream = new Duplex({objectMode: true});
  stream._read = function() {};
  stream._write = function(chunk, encoding, callback) {
    if (client.state !== 'closed') {
      client.send(chunk);
    }
    callback();
  };
  client.on('message', function(data) {
    stream.push(data);
  });
  client.on('close', function(reason) {
    stream.push(null);
    stream.emit('close');
  });
  stream.on('end', function() {
    client.close();
  });
  // 将流给 sharejs
  return share.listen(stream);
}));

客户端需要一个类似 websocket 的会话对象来进行通信。如果需要，也可以使用普通的 websocket：

var ws = new WebSocket('ws://' + window.location.host);
var share = new sharejs.Connection(ws);

如果决定使用 browserchannel，只需告诉 browserchannel 重新连接，其内部会处理好一切：

var socket = new BCSocket(null, {reconnect: true});
var share = new sharejs.Connection(socket);

更多关于 ShareJS 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/josephg/ShareJS

https://github.com/share/sharedb

https://pubuzhixing.medium.com/exploration-of-collaborative-editing-technology-b2f4c41c31ff

https://ckeditor.com/blog/lessons-learned-from-creating-a-rich-text-editor-with-real-time-collaboration/