在现代的 Web 应用中，协作是一个非常重要的功能。Web 应用需要能够让多个用户同时在一个文档或者应用中工作。在这种情况下，服务器需要及时同步所有客户端的操作状态，以确保多个用户之间的同步。在许多情况下，这可以通过使用 Server-sent Events 来实现。在这篇文章中，我们将介绍如何使用 Server-sent Events 来实现在线协作客户端与服务器端心跳同步的功能。
什么是 Server-sent Events？
Server-sent Events（SSE）是一种 Web 技术，它允许 Web 服务器推送数据到客户端。这个数据是以文本的形式发送的，格式是纯文本，而不是像传统的 Websockets 那样使用二进制格式。这种技术的好处在于它比 Websockets 更简单，更易于实现。同时，由于使用了 HTTP 协议，因此 SSE 也比 Websockets 更容易在防火墙和代理中穿透。
在线协作的实现
在本文中，我们将使用 Server-sent Events 来实现一个在线协作的功能。我们将创建一个简单的应用程序，该应用程序允许多个用户同时编辑同一个文档。每当一个用户做出更改时，应用程序就会将这些更改发送到服务器，并将它们推送到所有其他已连接的客户端。这样，每个客户端都会看到文档的最新状态，并且所有客户端之间可以实现同步。
创建客户端
我们首先需要创建客户端应用程序。在我们的示例中，我们将使用 HTML、CSS 和 JavaScript 来创建一个简单的应用程序。该应用程序将包含一个文本区域，用户可以在其中编辑文本，并且将这些编辑结果发送到服务器上。这里是 HTML 文件的代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------- -
------ -----
------- ------
-
--------
------- -----------------------
-------
------
--------- -----------------------
-------
-------这里我们引入了一个名为 app.js 的 JavaScript 文件，它将包含我们的客户端应用程序。
实现心跳同步
我们需要让客户端定期向服务器发送一个心跳请求来同步操作状态。服务器会定期发送一个 SSE 事件，表示客户端需要更新状态。我们可以在 JavaScript 中使用下面这个函数：
-- -------------------- ---- -------
-------- ---------------- -
---------------------- -
-------------------
------------------------ -
-- ---------------- --- ---- -
-----------------------
-
---
-- ------
-这个函数将每隔 5 秒钟向服务器发送一个心跳请求。如果请求不成功，函数会打印出错误信息。请注意，我们不需要从服务器获取任何数据，因为我们只是希望和服务器通信以同步状态。
实现服务器端
现在我们需要为服务器端创建代码。我们将创建一个 Node.js 应用程序来处理 SSE 事件和心跳请求。首先，在我们的 JavaScript 文件中，我们需要引入一些必要的库：
const http = require('http');
const fs = require('fs');
const url = require('url');
const path = require('path');
const {EventEmitter} = require('events');然后，我们需要定义一些常量，用于存储文件路径和文件名：
const PUBLIC_PATH = path.join(__dirname, '..'); const INDEX_PATH = path.join(PUBLIC_PATH, 'index.html'); const PORT = process.env.PORT || 3000;
下一步，我们需要创建一个 ServerSentEvents 类，用于处理 SSE 事件和心跳请求：
-- -------------------- ---- -------
----- ---------------- ------- ------------ -
---------------- ---- -
--------
-------- - ----
-------- - ----
-------------------- -------------------------
----------------------- -
--------------- --------------------
---------------- -----------
------------- -------------
---
-
----------- ----- -
---------------------- -------------
--------------------- ------------------------------
-
--------- -
-----------------
-
-这个类继承了 Node.js 内置的 EventEmitter，并处理了 SSE 事件和心跳请求。我们在每个 SSE 事件中发送一个事件名称和数据。在心跳请求中，我们只是返回一个空响应。
接下来，我们需要创建一个 HTTP 服务器，它将使用上面创建的类处理 SSE 事件和心跳请求。下面是服务器代码：
-- -------------------- ---- -------
----- ------ - ----------------------- ---- -- -
----- - -------- ------- --- - - ----
----- --- - ----------------------------
-- ---- --- ---- -
----------------------- ----- ----- -- -
-- ----- -
-------------------
-----------------
-
-------------------
--------------
---
-
---- -- ---- --- ------------- -
-------------------
----------
-
---- -- ---- --- ---------- -
----- --- - --- --------------------- -----
--------------------- -----------
------------- -- -- --------------------------
-
---- -
-------------------
-----------------
-
---
------------------- -- -- -
-------------------- ------- ------
---在这段代码中，我们首先处理了根路径的请求，以返回包含我们的应用程序的 HTML 文件。接下来，我们处理了心跳请求，直接返回一个空响应。然后，我们处理了 SSE 事件的请求，使用我们刚刚创建的 ServerSentEvents 类处理事件。最后，如果 uri 不匹配任何已知的路径，我们返回一个 404 错误。
在服务器上运行应用程序
现在我们可以在命令行中启动我们的服务器应用程序：
node app.js
在浏览器中访问 http://localhost:3000，打开我们的在线协作应用程序。当我们编辑文本时，客户端将会向服务器发送请求，并通过 SSE 事件接收更新状态的通知。同时，我们的 startHeartbeat 函数将会在后台发送心跳请求，在客户端和服务器之间保持连接活跃。
总结
在本文中，我们介绍了使用 Server-sent Events 实现在线协作客户端与服务端心跳同步的方法。我们创建了一个简单的应用程序，可以允许多个用户一起编辑同一个文档，并使用 Node.js 实现了 SSE 事件和一个心跳请求处理器。我们希望这篇文章能够帮助你了解如何使用 SSE 技术来实现复杂的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b61ab0add4f0e0ffecb870