介绍
Server-sent Events（SSE）是 HTML5 中的一项功能，它允许从服务器的推送事件到客户端，建立一种单向的、持久性的连接。相较于 WebSocket 和 AJAX，SSE 更加轻量级，且能更好地处理丢包或连接断开的情况。
SSE 最初用于实现类似于即时通讯的功能，如聊天室和实时股票价格更新等。本文将介绍如何使用 SSE 实现一个简单的即时通讯服务。
准备工作
在本文的示例中，我们需要一个 Node.js 服务器，并使用 Express 框架作为 HTTP 服务器。同时，需要在浏览器端使用 JavaScript 代码来建立 SSE 连接。可以使用任何一种前端框架，如 jQuery 或 React。
实现 SSE 服务
服务端代码
首先，在 Node.js 中安装 Express：
npm install express --save
创建一个 app.js 文件，并在其中写入以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
--------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------------
-------- ------------ -
----- ---- - -------------------------------------
---------------- --------------
-
----------------------- ------
---
----- ---- - ---------------- -- -----
---------------- -- -- -
------------------- -- ------- -- ---------------------------
---代码中，我们首先创建一个 Express 应用，并使用 express.static() 中间件来为 public 目录中的静态文件提供服务。然后，我们创建了一个 /sse 路由来处理 SSE 连接的请求。
在 /sse 路由中，我们设置了响应的类型和额外的响应头信息，以便 SSE 客户端和服务器之间的通信能够正常建立。然后，我们在 sendEvents() 函数中定时向客户端推送事件，代码中是每隔 1 秒向客户端发送一个随机字符串。
最后，我们启动了 HTTP 服务器，并监听端口号为 3000 的请求。
客户端代码
客户端代码非常简单。我们只需要在 JavaScript 中创建一个 EventSource 对象，并指定 SSE 服务器的地址即可完成 SSE 连接的建立。以下是一个简单的例子：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------------------------- ------- -- - ------------------------ --- ------------------------------------- ------- -- - ------------------ ----------- ------- ---
在上面的代码中，我们将 /sse 作为参数传递给 EventSource 构造函数。然后，我们添加了一个 message 事件监听器，以便能够接收到从服务器发送的数据。在事件监听器中，我们只是简单地将数据打印到控制台上。
同时，我们还添加了一个 error 事件监听器，以便在出现问题时能够及时发现。
运行程序
在项目的根目录下，运行以下命令启动 HTTP 服务器：
node app.js
在浏览器中打开 http://localhost:3000，可以看到控制台上每隔一秒钟打印出一个随机字符串。
总结
本文介绍了如何使用 SSE 实现一个简单的即时通讯服务。相较于 WebSocket，SSE 更加轻量级，且适用于单向、不需要实时响应的通信场景。但是，在需要双向通信或实时响应的情况下，WebSocket 仍然是更好的选择。
本文示例代码已经上传到 GitHub 上，感兴趣的读者可以进一步学习和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7fd5cf6b2d6eab336751f