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

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

image.png

项目介绍

image.png

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

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

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

项目安装


npm install --save sharedb

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

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

基本使用

Node服务端

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


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 来获取文档,订阅文档变化,并在浏览器中增加计数器的值。


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

使用方式:


const backend = new Backend({
  db: new MemoryDB(),
})

发布/订阅适配器

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

使用方式:


const backend = new Backend({
  pubsub: new MemoryPubSub(),
})

里程碑适配器

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

官方示例

计数器

排行榜

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

github.com/share/share…

总结

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

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

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

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

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



相关文章
|
前端开发 JavaScript Java
Springboot2.x+Websocket+js实现实时在线文本协同编辑,并展示协同用户
Springboot2.x+Websocket+js实现实时在线文本协同编辑,并展示协同用户
Springboot2.x+Websocket+js实现实时在线文本协同编辑,并展示协同用户
|
Web App开发 编解码 安全
【WebRTC 入门教程】全面解析WebRTC:从底层原理到Qt和FFmpeg的集成应用
【WebRTC 入门教程】全面解析WebRTC:从底层原理到Qt和FFmpeg的集成应用
6578 2
|
安全 数据处理 C++
【Qt 底层之事件驱动系统】深入理解 Qt 事件机制:主事件循环与工作线程的交互探究,包括 QML 的视角
【Qt 底层之事件驱动系统】深入理解 Qt 事件机制:主事件循环与工作线程的交互探究,包括 QML 的视角
3322 3
|
9月前
|
数据采集 资源调度 JavaScript
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
|
12月前
|
人工智能 IDE 程序员
GitHub Copilot 免费了!程序员们的福音来了!
《GitHub Copilot 免费了!程序员们的福音来了!》 近日,GitHub 宣布其 AI 编程助手 GitHub Copilot 现在可以免费使用。曾经每月需支付 10 美元订阅费的 Copilot,现在向所有人开放免费版本,这对个人开发者、初学者和小型团队来说是个大好消息。免费版支持 GPT 和 Claude 模型,并提供每月 2000 次代码补全和 50 条聊天消息等核心功能。用户只需注册或登录 GitHub 账户,在 VS Code 中安装扩展并激活免费版即可使用。此外,Visual Studio Code 也完全免费,进一步降低了开发门槛。 除了
12093 7
GitHub Copilot 免费了!程序员们的福音来了!
|
XML JavaScript 前端开发
JavaScript中的DOM解析器DOMParser api的讲解
`DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例,使用`.parseFromString(string, type)`方法进行解析,其中`string`为待解析的字符串,`type`指定解析类型如`text/html`或`text/xml`等,返回一个`Document`对象。例如,可解析包含`<p>666</p>`的字符串并获取其文本内容`666`。
653 1
|
存储 JSON JavaScript
使用JavaScript实现实时在线协作编辑器:从设计到实现
使用JavaScript实现实时在线协作编辑器:从设计到实现
|
JavaScript C++
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
本文详细介绍了如何使用Vite创建Vue3+TypeScript项目,并整合ElementPlus、Axios、Pinia、Less、Vue-router等组件或插件的步骤和配置方法。
4392 2
|
关系型数据库 数据库 PostgreSQL
【docker-compose】一键安装PostgreSQL数据库
【docker-compose】一键安装PostgreSQL数据库
5717 0
【docker-compose】一键安装PostgreSQL数据库
|
消息中间件 存储 Kafka
Kafka 2.13-3.7.0 在 Windows 上的安装与配置指南
Kafka 2.13-3.7.0 在 Windows 上的安装与配置指南
2155 0

热门文章

最新文章