使用Liveblocks、Yjs和CodeMirror构建Vue.js协同编辑器-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00845/article/details/148550274

使用Liveblocks、Yjs和CodeMirror构建Vue.js协同编辑器

liveblocks Liveblocks is a real-time collaboration infrastructure for developers. 项目地址: https://gitcode.com/gh_mirrors/li/liveblocks

前言

在现代Web应用中，实时协作功能变得越来越重要。Liveblocks作为一个实时协作基础设施，为开发者提供了构建高性能协作体验的能力。本文将详细介绍如何在Vue.js应用中集成Liveblocks、Yjs和CodeMirror，创建一个功能完善的协同代码编辑器。

技术栈介绍

在开始之前，让我们先了解下这个技术栈的核心组件：

Liveblocks：提供实时协作的后端基础设施，处理连接、状态同步和冲突解决
Yjs：一个CRDT（冲突自由复制数据类型）库，用于处理分布式数据同步
CodeMirror：一个功能强大的代码编辑器组件
Vue.js：流行的前端框架，用于构建用户界面

环境准备

安装依赖

首先需要安装必要的依赖包：

npm install @liveblocks/client @liveblocks/yjs yjs codemirror @codemirror/lang-javascript y-codemirror.next

这里安装的包包括：

Liveblocks客户端和Yjs集成包
Yjs核心库
CodeMirror编辑器及其JavaScript语言支持
Yjs与CodeMirror的集成包

初始化配置

创建Liveblocks配置文件：

npx create-liveblocks-app@latest --init --framework javascript

这个命令会生成一个基本的配置模板，后续可以用来定义应用的类型系统。

核心实现

编辑器组件实现

下面是一个完整的协同编辑器组件实现：

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { createClient } from "@liveblocks/client";
import { getYjsProviderForRoom } from "@liveblocks/yjs";
import * as Y from "yjs";
import { yCollab } from "y-codemirror.next";
import { EditorView, basicSetup } from "codemirror";
import { EditorState } from "@codemirror/state";
import { javascript } from "@codemirror/lang-javascript";

const parent = ref(null);
const leave = ref(null);
const view = ref(null);

// 初始化Liveblocks客户端
const client = createClient({
  publicApiKey: "{{PUBLIC_KEY}}",
});

// 进入协作房间
const info = client.enterRoom("my-room");
const room = info.room;
leave.value = info.leave;

// 设置Yjs文档和共享文本
const yProvider = getYjsProviderForRoom(room);
const yDoc = yProvider.getYDoc();
const yText = yDoc.getText("codemirror");

onMounted(() => {
  // 创建编辑器状态
  const state = EditorState.create({
    doc: yText.toString(),
    extensions: [
      basicSetup,
      javascript(),
      yCollab(ytext, yProvider.awareness, { undoManager }),
    ],
  });

  // 创建编辑器实例
  view.current = new EditorView({
    state,
    parent: parent.value,
  });
});

onUnmounted(() => {
  view?.destroy();
  leave.value?.();
});
</script>

<template>
  <div ref="parent" />
</template>

代码解析

Liveblocks客户端初始化：
- 使用createClient创建Liveblocks客户端实例
- 通过enterRoom方法进入指定的协作房间
Yjs集成：
- 使用getYjsProviderForRoom获取Yjs提供者
- 创建Yjs文档和共享文本对象
CodeMirror编辑器配置：
- 创建编辑器状态，包含基本设置、JavaScript语言支持和Yjs协作扩展
- 在组件挂载时初始化编辑器实例
资源清理：
- 在组件卸载时销毁编辑器实例并离开房间