大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 ShareJSCollaborative editing in any appShareJS 是一个小型服务器和客户端库，允许通过 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').servervar 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/
