在现代 Web 应用程序的开发中，实时通信已经成为了一个重要的组成部分。Web 程序通常需要一种机制来实现服务器与客户端之间的异步通信，以实时地更新数据。在过去，这种通信方式往往使用轮询技术来实现，但是这种方式存在一些问题，例如网络流量和服务器端性能的浪费。为了解决这些问题，开发人员开始使用 WebSocket 技术。然而，WebSocket 技术需要特定的浏览器和服务器支持，如果使用 Server-Sent Events 技术，则不需要这些支持，因此它成为了很好的替代方案。
了解 Server-Sent Events
Server-Sent Events（SSE）是一种能够实现客户端与服务器之间实时通信的技术。SSE 允许服务器主动向客户端推送事件数据，同时客户端也可以向服务器发送请求。SSE 采用“轻量级”方式建立连接，在这个连接上，服务器可以发送消息，而客户端只能接收消息。这种方式相对于 WebSocket 更加简单，因此可以在不支持 WebSocket 的浏览器上使用。
SSE 的一些优点包括：
- SSE 可以通过标准 HTTP 通信来实现，不需要额外的插件或客户端库软件。
- SSE 可以设置自定义事件名称，以便客户端可以分辨收到的消息。
- SSE 可以包含“重试”信息，如果服务器超时或出现了错误，客户端将自动重连。
- SSE 具备良好的兼容性，在 iOS ，Android 和大多数主流浏览器上可以正常运行。
使用 SSE 实现实时通信
要实现 SSE 实时通信，首先需要满足以下条件：
- 服务器必须支持 SSE。
- 浏览器支持 EventSource 对象。
接下来我们以 Node.js 作为服务器端环境，使用 Express 框架构建应用，来演示如何使用 SSE 实现实时通信。
服务器端实现
首先，我们需要在服务器端使用 Node.js 实现 SSE。代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----- ------ - -----------------------
----------------------------------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----------------- ------------
---------------- ----- -------------------------------
-- ------
--------------- -- -- -
------------------- ---------------
---
---
------------------- -- -- -
------------------- --------- -- ---- -------
---这段代码的作用是：
- 在 app 中设置静态资源目录。
- 设置 URL 路径为 /sse 的路由。
- 在路由函数中为响应头设置“text/event-stream”类型，因为 SSE 数据需要按照一定的格式发送。
- 设置“Cache-Control”和“Connection”头使连接保持活跃。
- 设置一个时间间隔，每秒钟将一个事件发送到客户端。
- 请求关闭事件时，此连接将被关闭。
客户端实现
在客户端，我们可以使用 EventSource 对象来接收 SSE 事件。代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
------
------- ---------
---- -------------------
--------
----- ------ - --- --------------------
---------------- - ------- -- -
----- ------- - -----------
----- ---- - -----------------------------------
-------------- - --------
--
---------
-------
-------在这段代码中，我们使用了一个 EventSource 对象向服务器发出请求，以便接收 SSE 事件。当事件到达客户端时，它将被 onmessage 回调函数处理，然后在网页上显示出来。
结论
如上所示，使用 SSE 实现实时通信非常简单，而且不需要复杂的包装或特定的支持，适合各种 Web 应用程序。如果您需要在浏览器中实现可靠的实时通信，那么 SSE 是您要考虑的技术之一。
示例代码
请访问 GitHub 仓库 查看完整的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66eeaabe6fbf9601972703e1