Github超19k+ strar的实时协同编辑的开源框架yjs

最新推荐文章于 2025-05-22 21:55:53 发布

diygwcom

最新推荐文章于 2025-05-22 21:55:53 发布

阅读量529

点赞数 13

文章标签： github 协同框架

本文链接：https://blog.csdn.net/luck332/article/details/148131605

版权

Yjs 是一个用于实现实时协同编辑的开源框架，具有以下关键特性和应用价值：

核心特性

基于 CRDT 算法
Yjs 采用无冲突复制数据类型（CRDT），确保多用户同时编辑同一文档时无需复杂锁机制或中央协调，最终实现数据一致性。其底层通过双向链表结构记录操作，保证操作的顺序无关性和幂等性。
多种数据类型支持
提供 YArray、YMap、YText 等共享数据类型，支持文本、数组、键值对等常见数据结构的协同操作，满足多样化应用需求。
灵活的网络同步
支持 WebSocket、WebRTC 等多种传输协议，通过 y-websocket、y-webrtc 等插件实现实时通信，确保多客户端数据同步。
用户状态追踪
内置 Awareness 协议，可跟踪用户在线状态、光标位置等，增强协同编辑的交互体验。
权限控制与认证
通过 Auth 模块支持用户认证和权限管理，确保文档访问的安全性。

应用场景

实时文档协作
类似 Google Docs 的多用户实时编辑功能，适用于在线文档、表格等场景。
协同编程
支持开发者实时协作编写代码，提升团队效率。
项目管理工具
多人协同规划任务、分配进度，适用于团队协作平台。
在线教育
教师与学生共享文档进行在线教学或作业批改。
图形编辑器协同
支持图形、思维导图等复杂数据结构的协同编辑，通过数据结构转换实现高效同步。

技术优势

去中心化架构
减少对中心服务器的依赖，支持点对点通信，提升系统容错性。
离线编辑支持
用户可在离线状态下编辑，恢复网络后自动同步数据。
版本控制与回滚
支持版本快照和撤销/重做操作，便于历史记录管理。
高性能与扩展性
优化内存使用和传输效率，支持大规模用户协同。

生态与集成

编辑器集成：提供 y-prosemirror、y-quill、y-codemirror 、y-monaco等插件，轻松集成主流富文本编辑器。
前端框架支持：通过 syncedstore 等库与 React、Vue 等框架无缝结合。
持久化存储：支持将数据持久化到 Redis、IndexedDB 等存储系统。

使用示例

以下是一个简单的 Yjs 协同编辑器实现流程：

初始化 Yjs 文档：

import * as Y from 'yjs';
const doc = new Y.Doc();

设置 WebSocket 连接：

import { WebsocketProvider } from 'y-websocket';
const provider = new WebsocketProvider('ws://localhost:1234', 'roomName', doc);

监听文档变化：

doc.on('update', (update) => {
  console.log('文档已更新:', update);
});

共享数据操作：

const sharedArray = doc.getArray('sharedArray');
sharedArray.push(['Hello', 'Yjs']); // 添加数据

vue简单用法


  </main>
</template>

<script>
import { store } from "./store";
import { ref } from "vue";
import * as Vue from "vue";
import { enableVueBindings } from "@syncedstore/core";

// make SyncedStore use Vuejs internally
enableVueBindings(Vue);

export default {
  name: "App",
  data() {
    return {
      store, // Put the store on the data() of the component
      newTodo: ""
    };
  },
  methods: {
    addTodo() {
      const value = this.newTodo && this.newTodo.trim();
      if (!value) {
        return;
      }
      this.store.todos.push({
        title: value,
        completed: false,
      });
      this.newTodo = "";
    },
    removeTodo(todo) {
      this.store.todos.splice(this.store.todos.indexOf(todo), 1);
    }
  }
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

ul {
  text-align:left;
}

li button {
  margin-left:1em;
}
</style>

import { syncedStore, getYjsDoc } from "@syncedstore/core";
import { WebrtcProvider } from "y-webrtc";

// (optional, define types for TypeScript)
type Todo = { completed: boolean, title: string };

// Create your SyncedStore store
export const store = syncedStore({ todos: [] as Todo[], fragment: "xml" });

// Create a document that syncs automatically using Y-WebRTC
const doc = getYjsDoc(store);
export const webrtcProvider = new WebrtcProvider("syncedstore-todos", doc);

export const disconnect = () => webrtcProvider.disconnect();
export const connect = () => webrtcProvider.connect();