趁下班时间，用 Socket.io 实现在线协同编辑的简单示例在线协同编辑是一种让多个用户同时编辑同一个文档的技术。这种

在线协同编辑是一种让多个用户同时编辑同一个文档的技术。这种技术通常使用实时编辑和多用户通信技术，使得多个用户可以实时地协作编辑同一个文档。

一个在线协同编辑的应用程序通常具有以下功能：

创建文档和分享文档。用户可以创建新的文档，分享链接给其他用户，或将文档设为私有。
实时编辑和协同。多个用户可以同时编辑同一个文档，并实时查看其他用户的编辑结果。
文本格式化和样式编辑。用户可以为文本添加样式，例如粗体、斜体、下划线等。
历史记录和版本控制。文档中的每个编辑步骤会被记录下来，以便用户可以查看所有的操作历史。
实时通知和聊天功能。当其他用户对文档进行编辑时，即时通知其他用户，同时还可以通过聊天功能进行实时交流。

实现在线协同编辑可以使用不同的技术和方案，例如：

WebSocket 技术。在服务器端使用 WebSocket 创建一个实时通信通道，当用户进行文档编辑操作时将它们广播给所有其他用户。
WebRTC 技术。使用 WebRTC 技术创建点对点连接，允许多个用户之间进行实时通信和协同编辑。
Google Docs 和 Office 365 等在线协同编辑工具。这些在线应用程序使用一系列先进的技术，包括 WebSocket 和 WebRTC 通信、实时数据库、协同编辑引擎等。

要实现在线协同编辑工具，还需要考虑到安全问题，例如数据的保护和用户授权等。同时需要考虑到性能问题，确保并发编辑时工具的稳定运行和快速响应。

总之，实现在线协同编辑工具是一项复杂的任务，需要综合运用多种技术和方案，仍需要不断地改进和优化。

以下是一个使用实时通信技术（Socket.io）实现的在线协同编辑示例：

首先，在服务器端（Node.js）上，需要安装 Socket.io 模块，并创建一个 Express 应用程序。然后，在服务器端，创建一个 WebSocket 服务器和一个文档管理器（Document Manager）。文档管理器用于创建和管理多个文档。

// 引入 Express 和 Socket.io
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server);

// 创建文档管理器（Document Manager）
const documentManager = {
  // 存放文档
  documents: new Map(),

  //创建新文档
  createNewDocument(docId) {
    const document = {
      id: docId,
      content: ''
    };
    this.documents.set(docId, document);
    return document;
  },

  // 删除文档
  deleteDocument(docId) {
    this.documents.delete(docId);
  },

  // 获取文档内容
  getDocumentContent(docId) {
    const document = this.documents.get(docId);
    return document ? document.content : '';
  },

  // 更新文档内容
  updateDocumentContent(docId, content) {
    const document = this.documents.get(docId);
    if (document) {
      document.content = content;
    }
  }
}

// 监听连接事件
io.on('connection', (socket) => {
  console.log(`Client ${socket.id} connected`);

  // 在客户端连接后，向客户端发送文档内容
  socket.on('docId', (docId) => {
    socket.join(docId); // 加入到房间
    const content = documentManager.getDocumentContent(docId);
    socket.emit('content', content);
  });

  // 监听文档内容更新事件
  socket.on('update', (data) => {
    const { docId, content } = data;
    documentManager.updateDocumentContent(docId, content);
    socket.to(docId).emit('content', content);
  });

  // 监听断开连接事件
  socket.on('disconnect', () => {
    console.log(`Client ${socket.id} disconnected`);
  });
});

// 启动服务器
server.listen(3000, () => {
  console.log('Listening on port 3000');
});

然后，在客户端（浏览器）上，使用 Socket.io 连接 WebSocket 服务器，并创建一个文本编辑器。客户端可以通过使用 "docId" 事件告诉服务器连接到哪个文档。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Real-time Collaborative Editor</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>

  <div>
    <input id="docIdInput" placeholder="Enter document ID"><br>
    <textarea id="editor" style="width: 100%; height: 400px;"></textarea>
  </div>

  <script>
    const socket = io();

    // 获取文档 ID 并加入到房间
    const docIdInput = document.getElementById('docIdInput');
    docIdInput.addEventListener('change', () => {
      const docId = docIdInput.value.trim();
      if (docId) {
        socket.emit('docId', docId); // 发送文档 ID
      }
    });

    // 更新文档内容
    const editor = document.getElementById('editor');
    editor.addEventListener('input', () => {
      const content = editor.value;
      const docId = docIdInput.value.trim();
      socket.emit('update', { docId, content }); // 发送更新消息
    });
    
    // 监听文档内容更新
    socket.on('content', (content) => {
      editor.value = content;
    });
  </script>
</body>
</html>

这个简单的示例使用 Socket.io 实现了实时协同编辑，让多个用户可以同时编辑同一个文档。用户可以输入文档 ID，然后加入到对应的房间，开始协同编辑。