在现代 Web 应用程序中，实时协作变得越来越常见。例如，多人在线游戏、视频会议、在线聊天和多人协同编辑器等应用程序都需要实时通信。在这些应用程序中，用户可以看到其他用户的操作，而不必等待页面刷新。
在本文中，我们将介绍如何使用 Server-Sent Events（SSE）实现实时在线多人协同编辑器。SSE 是一种 Web 技术，它允许服务器向客户端发送实时事件流。在这种情况下，我们将使用 SSE 来实现实时通信，并使用 JavaScript 和 Node.js 构建一个简单的多人协同编辑器。
Server-Sent Events
SSE 是一种 Web 技术，它允许服务器向客户端发送实时事件流。 SSE 基于 HTTP 协议，所以它可以在所有现代 Web 浏览器中使用。SSE 的主要优点是它可以在客户端和服务器之间建立长连接，而不必像 WebSocket 那样使用二进制数据。
SSE 的协议非常简单。服务器将事件流发送到客户端，客户端通过监听事件流来接收事件。事件可以是任何类型的数据，例如文本、JSON 或 XML。
以下是 SSE 的基本示例：
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------ ---------------
-------
------
---- --------------------
--------
----- -------- - ------------------------------------
----- ----------- - --- -----------------------
--------------------- - ------- -- -
----- ------- - -----------------------
------------------ -- -------------------------
--
---------
-------
-------在这个示例中，我们创建了一个 EventSource 对象，它连接到 /events 路径上的服务器端点。服务器将发送事件流到客户端，每次接收到新事件时，我们将事件的文本显示在页面上。
构建多人协同编辑器
现在我们已经了解了 SSE 的基础知识，让我们开始构建一个实时在线多人协同编辑器。在这个编辑器中，多个用户可以同时编辑同一个文档，并实时看到其他用户的编辑。
服务器端
我们将使用 Node.js 构建服务器端。首先，我们需要创建一个 HTTP 服务器，该服务器将向客户端发送事件流。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------
-- ----- ---- ------
---
--------------------在这个示例中，我们创建了一个 HTTP 服务器，并在响应中设置了 SSE 的标头。我们还在响应中写入了一个空行，这是必需的，因为 SSE 要求每个事件都以一个空行开头。
接下来，我们需要向客户端发送事件流。在我们的多人协同编辑器中，我们将发送两种类型的事件：编辑事件和撤销事件。编辑事件表示用户输入了新文本，撤销事件表示用户撤销了先前的编辑操作。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------
----- --------- - ------- ----- -- -
----------------- -------------
---------------- ------------------------------
--
-- ----- ------ ------
---
--------------------在这个示例中，我们定义了一个名为 sendEvent 的函数，它将事件作为参数，并将其发送到客户端。我们使用 event 和 data 字段来表示事件的类型和数据。
我们还需要处理客户端发送的事件。在我们的多人协同编辑器中，我们将处理两种类型的事件：编辑事件和撤销事件。我们将使用一个名为 documents 的对象来存储所有文档的状态。每个文档都由一个名为 text 的字符串表示。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------
----- --------- - ---
----- --------- - ------- ----- -- -
----------------- -------------
---------------- ------------------------------
--
-------------- ------- -- -
----- ----- - ------------------
------ ------------ -
---- -------
------------------------- - -----------
----------------- -------
------
---- -------
----------------- -------
------
-
---
---
--------------------在这个示例中，我们使用 req.on('data', ...) 方法来处理客户端发送的事件。我们将事件解析为 JSON 对象，并根据事件的类型执行不同的操作。
如果事件的类型是 edit，则我们将文档的状态更新为新文本，并将事件发送到所有客户端。如果事件的类型是 undo，则我们只需将事件发送到所有客户端。
客户端
我们将使用 JavaScript 构建客户端。客户端将连接到服务器，并监听编辑和撤销事件。
-- -------------------- ---- -------
--------- -----
------
------
-------------------- --------------
-------
------
--------- -----------------------
--------
----- ------ - ----------------------------------
----- ----------- - --- -----------------------
--------------------- - ------- -- -
----- ------- - -----------------------
------ -------------- -
---- -------
-- ------------- --- -------------------- -
------------ - -------------
-
------
---- -------
-- ----- ------ ----
------
-
--
-------------------------------- -- -- -
----- ----- - -
----- -------
----- --------------------
--------- ------------
----- ------------
--
----- --- - --- -----------------
---------------- -----------
--------------------------------
---
---------
-------
-------在这个示例中，我们创建了一个名为 editor 的 textarea 元素。我们还创建了一个名为 eventSource 的 EventSource 对象，该对象连接到服务器上的 /events 路径。每当我们接收到新事件时，我们将根据事件的类型执行不同的操作。
如果事件的类型是 edit，则我们将更新编辑器的文本，但仅在当前用户不是事件的发送者时。我们使用 editor.dataset.user 属性来存储当前用户的 ID。
如果事件的类型是 undo，则我们将执行撤销操作。我们将在下一节中实现撤销操作。
最后，我们使用 editor.addEventListener('input', ...) 方法来监听编辑器的输入事件。每当用户输入新文本时，我们将创建一个事件对象，并使用 XMLHttpRequest 对象将其发送到服务器。
撤销操作
现在让我们实现撤销操作。我们将使用一个名为 history 的数组来存储编辑历史记录。每个历史记录都由一个名为 text 的字符串表示。我们还将使用一个名为 index 的变量来跟踪当前历史记录的索引。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------
----- --------- - ---
----- ------- - ---
--- ----- - ---
----- --------- - ------- ----- -- -
----------------- -------------
---------------- ------------------------------
--
-------------- ------- -- -
----- ----- - ------------------
------ ------------ -
---- -------
-- ----------- --- --------------- -
-------------------- - ---
-------------------------
----- - -------------- - --
------------------------- - -----------
----------------- -------
-
------
---- -------
-- ------ - -- -
--------
------------------------- - ---------------
----------------- -
----- -------
----- -----------
--------- ---------------
----- --------------
---
-
------
-
---
---
--------------------在这个示例中，我们在服务器端定义了一个名为 history 的数组和一个名为 index 的变量。我们还更新了事件处理程序，以便在编辑事件发生时记录编辑历史记录。如果事件的文本与历史记录中的最后一个文本不同，则我们将新文本添加到历史记录中，并将当前索引设置为历史记录的末尾。
我们还更新了撤销事件处理程序，以便将索引向后移动一步，并将文档状态设置为历史记录中的前一个文本。我们还发送了一个新的编辑事件，以便将编辑器的文本设置为历史记录中的前一个文本。
结论
在本文中，我们介绍了如何使用 Server-Sent Events 实现实时在线多人协同编辑器。我们使用 Node.js 构建了服务器端，并使用 JavaScript 构建了客户端。我们还介绍了如何处理编辑和撤销事件，并将文档状态存储在服务器端。这个示例可以帮助你了解 SSE 的基础知识，并为你构建实时协作应用程序提供了一个良好的起点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67561aad3af3f99efe56d6a3