ShareDB入门指南：构建实时协作应用的基础教程-优快云博客

ShareDB入门指南：构建实时协作应用的基础教程

sharedb Realtime database backend based on Operational Transformation (OT) 项目地址: https://gitcode.com/gh_mirrors/sh/sharedb

什么是ShareDB

ShareDB是一个基于操作转换(OT)技术的实时数据同步框架，它允许开发者在多个客户端之间实现数据的实时同步和协作编辑功能。ShareDB的核心优势在于其强大的冲突解决能力，能够确保不同客户端之间的修改能够正确合并，非常适合构建需要实时协作功能的应用程序。

环境准备与安装

在开始使用ShareDB之前，需要确保你的开发环境已经安装了Node.js。ShareDB通过npm包管理器分发，安装非常简单：

npm install --save sharedb

值得注意的是，如果你的应用采用前后端分离的架构，ShareDB需要在前后端同时安装，因为它需要在两端都运行以实现完整的同步功能。

基础架构解析

ShareDB采用客户端-服务器架构，包含以下几个核心组件：

后端服务：负责接收、处理和广播客户端操作
前端客户端：连接后端并处理本地数据变更
WebSocket连接：作为前后端通信的桥梁

服务器端配置详解

以下是一个使用Express框架和WebSocket的完整服务器配置示例：

const express = require('express');
const WebSocket = require('ws');
const http = require('http');
const ShareDB = require('sharedb');
const WebSocketJSONStream = require('@teamwork/websocket-json-stream');

// 创建Express应用和HTTP服务器
const app = express();
const server = http.createServer(app);

// 创建WebSocket服务器
const webSocketServer = new WebSocket.Server({ server });

// 初始化ShareDB后端
const backend = new ShareDB();

// 处理WebSocket连接
webSocketServer.on('connection', (webSocket) => {
  // 将WebSocket转换为Stream
  const stream = new WebSocketJSONStream(webSocket);
  // 将流连接到ShareDB后端
  backend.listen(stream);
});

// 启动服务器
server.listen(8080, () => {
  console.log('ShareDB服务器已启动，监听端口8080');
});

这段代码完成了以下工作：

创建了一个Express应用
建立了一个WebSocket服务器
初始化了ShareDB后端
将所有WebSocket连接转换为流并连接到ShareDB

客户端实现指南

客户端需要连接到ShareDB服务器并处理文档的同步。以下是一个完整的客户端实现示例：

const ReconnectingWebSocket = require('reconnecting-websocket');
const { Connection } = require('sharedb/lib/client');

// 创建自动重连的WebSocket连接
const socket = new ReconnectingWebSocket('ws://localhost:8080', [], {
  maxEnqueuedMessages: 0  // ShareDB自行处理消息重传
});

// 创建ShareDB连接
const connection = new Connection(socket);

// 获取文档引用
const doc = connection.get('doc-collection', 'doc-id');

// 订阅文档变更
doc.subscribe((error) => {
  if (error) return console.error('订阅失败:', error);
  
  // 如果文档不存在则创建
  if (!doc.type) {
    doc.create({ counter: 0 }, (error) => {
      if (error) console.error('文档创建失败:', error);
    });
  }
});

// 监听文档操作事件
doc.on('op', (op) => {
  console.log('当前计数:', doc.data.counter);
});

// 定义修改文档的方法
window.increment = () => {
  // 使用JSON0操作类型递增计数器
  doc.submitOp([{ p: ['counter'], na: 1 }]);
};

这段代码实现了：