ShareDB:构建实时应用从未如此简单

项目介绍

ShareDB 是一个支持多用户实时协作的全栈库,适用于构建各种需要同步数据更新的在线应用,如在线文档编辑器、实时仪表板和多玩家游戏等。

它提供了一套全面的实时同步和多用户协作解决方案,具备异步最终一致性、实时查询订阅、数据库集成、水平扩展、字段投影、中间件支持、跨平台使用、离线更改同步、内存数据库测试、历史版本访问和实时用户状态同步等特性。

ShareDB 包括一个 Node.js 服务器,用于协调和提交来自多个客户端的编辑,以及一个可在 Node.js 或浏览器中运行的 JavaScript 客户端,用于操作文档。核心通过操作转换(OT)来处理底层的冲突管理,其实现由 ShareDB 的类型插件负责。

项目安装

bash 复制代码
npm install --save sharedb

如果服务器和客户端有不同的依赖,ShareDB 应该被添加到两个包中。

也可以安装其他的OT类型。具体类型查看地址:share.github.io/sharedb/typ...

基本使用

Node服务端

服务端示例使用 Expressws 作为 WebSocket 服务器,并使用 @teamwork/websocket-json-stream 扩展将 WebSocket 转换为 Stream

javascript 复制代码
var express = require('express')
var WebSocket = require('ws')
var http = require('http')
var ShareDB = require('sharedb')
var WebSocketJSONStream = require('@teamwork/websocket-json-stream')

var app = express()
var server = http.createServer(app)
var webSocketServer = WebSocket.Server({server: server})

var backend = new ShareDB()
webSocketServer.on('connection', (webSocket) => {
  var stream = new WebSocketJSONStream(webSocket)
  backend.listen(stream)
})

server.listen(8080)

客户端

客户端示例使用 ShareDBConnection 来获取文档,订阅文档变化,并在浏览器中增加计数器的值。

javascript 复制代码
var ReconnectingWebSocket = require('reconnecting-websocket')
var Connection = require('sharedb/lib/client').Connection

var socket = new ReconnectingWebSocket('ws://localhost:8080', [], {
  // ShareDB handles dropped messages, and buffering them while the socket
  // is closed has undefined behavior
  maxEnqueuedMessages: 0
})
var connection = new Connection(socket)

var doc = connection.get('doc-collection', 'doc-id')

doc.subscribe((error) => {
  if (error) return console.error(error)

  // If doc.type is undefined, the document has not been created, so let's create it
  if (!doc.type) {
    doc.create({counter: 0}, (error) => {
      if (error) console.error(error)
    })
  }
});

doc.on('op', (op) => {
  console.log('count', doc.data.counter)
})

window.increment = () => {
  // Increment the counter by 1
  doc.submitOp([{p: ['counter'], na: 1}])
}

适配器

数据库适配器

ShareDB 支持多种数据库,包括MemoryDBShareDBMongoShareDBMingoMemoryShareDBPostgres

使用方式:

javascript 复制代码
const backend = new Backend({
  db: new MemoryDB(),
})

发布/订阅适配器

发布/订阅(pub/sub)适配器,包括内存型(MemoryPubSub)Redis(ShareDBRedisPubSub)WebSocket总线(ShareDBWSBusPubSub)适配器

使用方式:

javascript 复制代码
const backend = new Backend({
  pubsub: new MemoryPubSub(),
})

里程碑适配器

ShareDB 的里程碑适配器目前只支持 ShareDBMilestoneMongo,它用于存储文档的定期快照以加速文档历史记录的访问,并通过中间件自定义快照行为。

官方示例

计数器

排行榜

更多官方示例可以下方地址中查阅:

github.com/share/share...

总结

github地址:github.com/share/share...

我们在服务端代码中演示了如何设置 Express 应用、WebSocket 服务器和流式转换。

在客户端代码演示了创建 WebSocket,连接到 ShareDB 服务器,获取文档,订阅文档操作,以及如何提交操作来更新文档。

介绍了 ShareDB 适配器的支持情况和基本使用。

希望通过对ShareDB的简单介绍,能对你了解和使用它有一定的帮助。

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,gonghao同名

相关推荐
没资格抱怨13 分钟前
vue3中利用路由信息渲染菜单栏
前端·vue.js
TttHhhYy16 分钟前
vue写后台管理系统,有个需求将所有的$message消息提示换成确认框来增强消息提示效果,遇到嵌套过多的情况,出现某些问题
前端·javascript·vue.js·anti-design-vue
雪峰30 分钟前
使用 Web Search 插件扩展 GitHub Copilot 问答
vscode·github·copilot
计算机学姐38 分钟前
基于Python的高校成绩分析管理系统
开发语言·vue.js·后端·python·mysql·pycharm·django
FIRE1 小时前
uniapp小程序分享使用canvas自定义绘制 vue3
前端·小程序·uni-app
四喜花露水1 小时前
vue elementui el-dropdown-item设置@click无效的解决方案
前端·vue.js·elementui
jokerest1231 小时前
web——sqliabs靶场——第五关——报错注入和布尔盲注
前端
wclass-zhengge1 小时前
SpringCloud篇(服务拆分 / 远程调用 - 入门案例)
后端·spring·spring cloud
A_cot2 小时前
一篇Spring Boot 笔记
java·spring boot·笔记·后端·mysql·spring·maven
谢尔登2 小时前
前端开发调试之 PC 端调试
开发语言·前端