使用 SSE 实现文本编辑器实时协同编辑功能教程-JavaScript中文网-JavaScript教程资源分享门户

在现代的互联网应用中，协同编辑功能已经成为了标配。而实时协同编辑则更是其中的重要一环。在前端开发中，使用 SSE（Server-Sent Events）技术可以轻松地实现实时协同编辑功能。本文将为大家详细介绍如何使用 SSE 实现文本编辑器实时协同编辑功能。

什么是 SSE

SSE 是一种基于 HTTP 的服务器推送技术，它允许服务器通过单向连接向客户端发送事件流。与 WebSocket 不同，SSE 建立在 HTTP 协议之上，因此不需要进行特殊的协议升级。SSE 的优势在于它的轻量级和易用性，适合于实现一些简单的实时应用。

实现思路

本文将使用 Node.js 和 Express 框架来实现一个简单的文本编辑器应用，支持多个用户实时协同编辑同一个文本文件。实现的思路如下：

服务器端维护一个文本文件，用于存储编辑器的内容。
服务器端使用 SSE 技术向客户端推送文本文件的变化。
客户端通过 SSE 技术接收服务器端推送的文本文件变化，并实时更新编辑器的内容。
客户端通过 WebSocket 技术向服务器端发送文本文件的变化。

服务器端实现

安装依赖

首先，在命令行中进入项目目录，使用以下命令安装所需的依赖：

npm install express fs

其中，express 是一个流行的 Node.js Web 框架，而 fs 则是 Node.js 内置的文件系统模块。

创建服务器

在项目目录下创建一个名为 index.js 的文件，并输入以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const fs = require('fs');

const app = express();

const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

这段代码创建了一个 Express 应用，并启动了一个 HTTP 服务器监听在 3000 端口上。在浏览器中访问 http://localhost:3000，应该能看到一个类似于“Cannot GET /”的提示。

创建 SSE 路由

接下来，我们需要创建一个 SSE 路由，用于向客户端推送文本文件的变化。在 index.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const clients = new Set();

function sendUpdatesToClients() {
  fs.readFile('document.txt', 'utf8', (err, data) => {
    if (err) {
      console.error(err);
      return;
    }
    clients.forEach(client => client.res.write(`data: ${data}\n\n`));
  });
}

app.get('/stream', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  clients.add({ req, res });
  req.on('close', () => {
    clients.delete({ req, res });
  });
});

setInterval(sendUpdatesToClients, 1000);

这段代码创建了一个 /stream 路由，用于向客户端推送文本文件的变化。首先，我们创建了一个 clients 集合，用于存储所有连接到服务器的客户端。然后，我们定义了一个 sendUpdatesToClients 函数，它会读取文本文件的内容，并将其发送给所有客户端。最后，我们使用 setInterval 函数每秒钟执行一次 sendUpdatesToClients 函数。

创建编辑器路由

我们还需要创建一个路由，用于处理客户端的编辑请求。在 index.js 文件中添加以下代码：

// javascriptcn.com 代码示例
app.use(express.json());

app.post('/edit', (req, res) => {
  fs.writeFile('document.txt', req.body.text, (err) => {
    if (err) {
      console.error(err);
      res.status(500).send('Error');
      return;
    }
    sendUpdatesToClients();
    res.send('OK');
  });
});

这段代码创建了一个 /edit 路由，用于处理客户端的编辑请求。首先，我们使用 express.json() 中间件来解析 POST 请求中的 JSON 数据。然后，我们使用 fs.writeFile 函数将客户端发送来的文本内容写入到文本文件中。最后，我们调用 sendUpdatesToClients 函数向所有客户端推送文本文件的变化，并返回一个 OK 响应。

客户端实现

创建编辑器界面

在项目目录下创建一个名为 index.html 的文件，并输入以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Real-time Editor</title>
  <style>
    #editor {
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  <textarea id="editor"></textarea>
  <script src="/sse.js"></script>
  <script src="/websocket.js"></script>
</body>
</html>

这段代码创建了一个简单的编辑器界面，包含一个 textarea 元素和两个 JavaScript 文件的引用。其中，/sse.js 和 /websocket.js 分别是 SSE 和 WebSocket 的客户端实现，我们稍后会讲到。

创建 SSE 客户端

在项目目录下创建一个名为 sse.js 的文件，并输入以下代码：

const eventSource = new EventSource('/stream');

eventSource.onmessage = (event) => {
  document.querySelector('#editor').value = event.data;
};

这段代码创建了一个 SSE 客户端，用于接收服务器端推送的文本文件变化。首先，我们使用 new EventSource('/stream') 创建了一个 EventSource 对象，它会自动向服务器端发送一个 GET 请求，并打开一个长连接。然后，我们使用 eventSource.onmessage 事件监听器来处理服务器端推送的消息，将其更新到编辑器的内容中。

创建 WebSocket 客户端

在项目目录下创建一个名为 websocket.js 的文件，并输入以下代码：

// javascriptcn.com 代码示例
const webSocket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}`);

document.querySelector('#editor').addEventListener('input', () => {
  const text = document.querySelector('#editor').value;
  webSocket.send(JSON.stringify({ text }));
});

webSocket.onmessage = (event) => {
  if (event.data === 'OK') {
    console.log('Text saved');
  } else {
    console.error(event.data);
  }
};

这段代码创建了一个 WebSocket 客户端，用于向服务器端发送文本文件的变化。首先，我们使用 new WebSocket 函数创建了一个 WebSocket 对象，它会自动向服务器端发送一个 WebSocket 握手请求，并打开一个双向连接。然后，我们使用 document.querySelector('#editor').addEventListener('input', ...) 监听器来处理编辑器的输入事件，并使用 webSocket.send 函数将文本内容发送给服务器端。最后，我们使用 webSocket.onmessage 事件监听器来处理服务器端的响应，如果服务器端返回了 OK，则表示文本已经成功保存。

运行应用

现在，我们已经完成了编辑器应用的开发。在命令行中进入项目目录，并使用以下命令启动应用：

node index.js

然后，在浏览器中访问 http://localhost:3000，就可以看到一个简单的文本编辑器界面。在多个浏览器窗口中打开该网址，就可以看到多个用户协同编辑同一个文本文件的效果。

总结

本文介绍了如何使用 SSE 技术实现文本编辑器的实时协同编辑功能。通过本文的学习，我们可以了解到 SSE 的基本原理和用法，并掌握如何在 Node.js 中使用 SSE 技术实现实时应用。同时，本文还介绍了如何结合 WebSocket 技术实现双向通信，以及如何使用 Express 框架来简化服务器端的开发。希望本文对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655de60dd2f5e1655d832412