前置知识
在阅读本文之前，强烈建议您对以下知识拥有基本的了解：
- HTTP 协议
- AJAX（XMLHttpRequest）
- Node.js
如果您对上述知识还不熟悉，请先学习相关知识再阅读本文，否则可能会存在一定的难度。
什么是 Server-sent Events？
Server-sent Events（简称 SSE）是一种基于 HTTP 协议的技术，用于服务端向客户端实时推送数据。相对于传统的轮询或者长轮询方式，SSE 的最大优势就是能够实时推送数据，从而大大增强了客户端与服务端之间的互动效果。
SSE 协议是基于 HTTP/1.1 的，它采用了持续连接（persistent connection）的方式，也就是客户端与服务端之间的连接不会关闭，从而避免了大量的建立连接和断开连接的开销。另外，SSE 协议还支持断线重连以及自定义事件，这使得我们能够更灵活地应用 SSE 技术。
实现实时监控业务流程
在实际的应用场景中，SSE 技术可以被用来实现实时监控业务流程，比如：监控用户在某个网站上的行为，或者实时显示某个系统的运行情况等等。下面，我们将以一个在线聊天室为例，演示如何利用 SSE 技术实现实时推送聊天内容。
服务端实现
在服务端，我们将采用 Node.js 进行实现。因为 Node.js 采用了事件驱动的机制以及非阻塞的 I/O 模型，非常适合开发实时推送类的应用。
首先，我们要创建一个 HTTP 服务器，并在服务器上启用 SSE 协议：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- -------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- -------
-------------- ------
----------------- ----------
---------------- ------- -- ---- -----------
-- -------
--------------- -- -- -
------------------- ---------------
---
- ---- -
-------------------
----------
-
---
------------------- -- -- -
----------------- ---- ------ ------- -- ---- -------
---以上代码启用了一个 HTTP 服务器，并根据客户端请求的 URL 发送不同的响应。当客户端请求 /chat URL 时，服务器会将响应头中的 Content-Type 设置为 text/event-stream，表示 SSE 协议。此外，我们还在响应头中设置了 Cache-Control: no-cache，表示告诉浏览器不要缓存响应。最后，我们还设置了 Connection: keep-alive，表示使用持久连接。
接着，我们在响应中发送了一条初始化数据，用于告诉客户端 SSE 的连接已经建立成功，并欢迎用户加入聊天室。
最后，我们监听客户端的请求，如果客户端关闭了连接，则在服务器端输出一条日志告知客户端已经断开连接。这里需要注意的是，在 SSE 协议中，客户端与服务器之间的连接不会关闭，因此我们无法通过 req.on('end') 监听到客户端关闭连接的事件，而是需要监听 close 事件。
现在，我们已经完成了服务端的实现。
客户端实现
在客户端，我们同样采用 Node.js 进行实现。由于浏览器自带的 SSE API 尚未完全支持，因此我们将采用第三方库 sse-client 来实现客户端的 SSE 协议处理。
-- -------------------- ---- -------
----- --------- - ----------------------
----- ------ - --- ----------------------------------------
--------------------------- --- -- -
-----------------
---
------------------ --- -- -
-------------------
---以上代码创建了一个 SSE 客户端，并连接到了指定的 SSE 服务端。我们通过监听 hello 事件来接收服务端推送的消息，如果服务端没有推送事件，则 msg 为空。
最后，我们还监听了 error 事件，用于处理 SSE 协议连接出错的情况。
完整代码
下面是服务端和客户端的完整代码，您可以将其拷贝到本地并通过 node server.js 和 node client.js 分别启动服务端和客户端。
服务端代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- -------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- -------
-------------- ------
----------------- ----------
---------------- ------- -- ---- -----------
-- -------
--------------- -- -- -
------------------- ---------------
---
- ---- -
-------------------
----------
-
---
------------------- -- -- -
----------------- ---- ------ ------- -- ---- -------
---客户端代码
-- -------------------- ---- -------
----- --------- - ----------------------
----- ------ - --- ----------------------------------------
--------------------------- --- -- -
-----------------
---
------------------ --- -- -
-------------------
---结语
本文通过一个在线聊天室的例子，演示了如何利用 SSE 技术实现实时推送聊天内容。虽然 SSE 技术已经比较成熟，但是在实际应用中，还需要考虑到诸如跨域访问、负载均衡、断线重连等复杂情况，这需要工程师们在实践中做好充分的测试和调试工作。
希望本文能够对您理解 SSE 技术有一定的帮助，如果您还有任何疑问，欢迎留言交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67826cb9935627c90007f691
