如何使用 WebRTC 和 React 构建实时代码协作编辑器

远程办公越来越多，实时协作工具已成为开发团队必不可少的工具。虽然有 VS Code Live Share 这样的平台，但了解如何创建自己的协作代码编辑器可以为实时同步和点对点通信提供有价值的见解。在本文中，我们将使用 WebRTC 和 React 从零开始创建一个协作代码编辑器。

前提条件

React 和 TypeScript 的基础知识
已安装 Node.js
了解 JavaScript 异步/等待模式
熟悉 WebSocket 概念（可选）

设置项目

首先，使用 Vite 创建一个新的 React 项目：

npm create vite@latest collab-editor -- --template react-ts
cd collab-editor
npm install

安装依赖项：

npm install @monaco-editor/react y-webrtc y-monaco yjs @types/ws uuid

创建核心编辑器组件

从创建主编辑器组件开始。我们将使用 Monaco Editor 作为基础，并增强其协作功能：


import { useEffect, useRef } from 'react';
import * as Y from 'yjs';
import { WebrtcProvider } from 'y-webrtc';
import { MonacoBinding } from 'y-monaco';
import Editor from '@monaco-editor/react';

interface CollaborativeEditorProps {
  roomId: string;
  language?: string;
}

export const CollaborativeEditor = ({ 
  roomId, 
  language = 'javascript' 
}: CollaborativeEditorProps) => {
  const editorRef = useRef(null);
  const ydocRef = useRef<Y.Doc | null>(null);
  const providerRef = useRef<WebrtcProvider | null>(null);

  useEffect(() => {
    // 初始化 Yjs 文档
    const ydoc = new Y.Doc();
    const ytext = ydoc.getText('monaco');
    
    // 创建用于实时同步的 WebRTC provider
    const provider = new WebrtcProvider(roomId, ydoc, {
      signaling: ['wss://signaling.yourdomain.com'],
      password: null,
      awareness: new Map()
    });

    // 存储引用
    ydocRef.current = ydoc;
    providerRef.current = provider;

    // 卸载清理
    return () => {
      provider.destroy();
      ydoc.destroy();
    };
  }, [roomId]);

  const handleEditorDidMount = (editor: any) => {
    editorRef.current = editor;
    
    if (ydocRef.current) {
      // 创建 Monaco binding
      new MonacoBinding(
        ydocRef.current.getText('monaco'),
        editorRef.current.getModel(),
        new Set([editorRef.current]),
        providerRef.current!.awareness
      );
    }
  };

  return (
    <div className="editor-container">
      <Editor
        height="90vh"
        defaultLanguage={language}
        defaultValue="// Start coding here..."
        onMount={handleEditorDidMount}
        options={{
          minimap: { enabled: false },
          fontSize: 16,
          wordWrap: 'on'
        }}
      />
    </div>
  );
};

了解此实现中的核心组件

1. Yjs文档（Y.Doc）：

充当共享文档结构
管理冲突解决算法（CRDT）
自动处理并发编辑冲突

2. WebRTC Provider：

在用户之间建立点对点连接
管理文档更改的同步
处理感知功能（光标位置、选择）

3. Monaco Binding：

Bridges Monaco 编辑与 Yjs
同步编辑器和共享文档之间的文本更改
管理光标位置和选择

添加用户感知功能

让我们通过光标位置和用户信息等用户感知功能来增强我们的编辑器：

interface UserAwareness {
  name: string;
  color: string;
  cursor: {
    line: number;
    column: number;
  } | null;
}

const generateUserColor = () => {
  const colors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1',
    '#96CEB4', '#FFEEAD', '#D4A5A5'
  ];
  return colors[Math.floor(Math.random() * colors.length)];
};

export const CollaborativeEditor = ({ roomId, language = 'javascript' }) => {
  // ... 上一个代码 ...

  useEffect(() => {
    const ydoc = new Y.Doc();
    const provider = new WebrtcProvider(roomId, ydoc);
    
    // 设置用户感知
    const awareness = provider.awareness;
    awareness.setLocalState({
      name: `User ${Math.floor(Math.random() * 1000)}`,
      color: generateUserColor(),
      cursor: null
    } as UserAwareness);

    // 在选择改变时更新光标位置
    const handleCursorChange = (e: any) => {
      const position = e.position;
      if (position) {
        awareness.setLocalState({
          ...awareness.getLocalState(),
          cursor: {
            line: position.lineNumber,
            column: position.column
          }
        });
      }
    };

    if (editorRef.current) {
      editorRef.current.onDidChangeCursorPosition(handleCursorChange);
    }

    return () => {
      provider.destroy();
      ydoc.destroy();
    };
  }, [roomId]);

  // ... 组件的其余部分 ...
};

实施错误处理和恢复

实际应用程序需要强大的错误处理功能。添加重新连接逻辑和错误状态：

const useConnectionStatus = (provider: WebrtcProvider | null) => {
  const [status, setStatus] = useState<'connected' | 'disconnected'>('connected');
  
  useEffect(() => {
    if (!provider) return;

    const handleDisconnect = () => {
      setStatus('disconnected');
      // 尝试重新连接
      setTimeout(() => {
        provider.connect();
      }, 3000);
    };

    const handleConnect = () => {
      setStatus('connected');
    };

    provider.on('disconnect', handleDisconnect);
    provider.on('connect', handleConnect);

    return () => {
      provider.off('disconnect', handleDisconnect);
      provider.off('connect', handleConnect);
    };
  }, [provider]);

  return status;
};

性能优化技巧

1. 防抖动光标更新：

import { debounce } from 'lodash';

const debouncedCursorUpdate = debounce((awareness: any, position: any) => {
  awareness.setLocalState({
    ...awareness.getLocalState(),
    cursor: {
      line: position.lineNumber,
      column: position.column
    }
  });
}, 50);

2. 延迟加载 Monaco Editor:

const LazyMonacoEditor = lazy(() => import('@monaco-editor/react'));

部署注意事项

部署协作编辑器时，请考虑以下重要因素：

信令服务器：

设置可靠的 WebRTC 信令服务器
考虑使用 Firebase 之类的服务或使用 WebSocket 实现自己的服务

2. TURN 服务器：

对位于严格防火墙后的对等网络而言必不可少
考虑使用 Twilio 的 TURN 服务器之类的服务

3.安全：

实施房间访问控制
为敏感代码共享添加加密
净化用户输入

测试实现

以下是使用 Jest 和 React Testing Library 的基本测试套件：

import { render, screen } from '@testing-library/react';
import { CollaborativeEditor } from './CollaborativeEditor';

describe('CollaborativeEditor', () => {
  it('initializes with default values', () => {
    render(<CollaborativeEditor roomId="test-room" />);
    expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
  });

  // 添加更多测试...
});