在 Web 应用程序中，常常需要实现实时通信功能，例如聊天室、股票行情等。而在传统的 Web 技术中，客户端要获取服务器端的数据必须通过定时轮询或 Websocket 连接方式实现，这种方式不仅增加了服务器端和客户端的网络通信负担，而且对服务器和客户端的处理性能也有极高要求，而 SSE（Server-Sent Events）技术恰好可以解决这个问题，SSE 可以直接实现服务器向客户端推送数据的功能，无须客户端发起请求，提供了一种简单高效的实时交互解决方案。
SSE 简介
SSE 是一种建立在 HTTP 协议基础上的服务器向客户端单向发送事件流的 Web 技术。SSE 通常被用来推送实时数据到客户端，例如 Web 应用程序中的通知，或者股票行情等实时数据。SSE 基于服务器端的 EventSource 接口实现，客户端可以通过 JavaScript 的 EventSource API 接收服务器端推送来的数据。
客户端与服务器端之间的通信是基于 HTTP 协议的，通过 HTTP HEAD 请求，建立持久连接。一旦连接建立，服务器端就可以开始不间断地发送事件流，直到连接被关闭。SSE 的数据传输方式是文本格式，因此它比 WebSocket 更容易理解和实现，并且在大多数现代浏览器中都得到了很好的兼容性支持。
SSE 实现
SSE 的实现可以分为客户端和服务器端两个部分。
客户端实现
在客户端内部，SSE 通过 JavaScript 的 EventSource 对象实现。客户端可以通过创建 EventSource 对象来建立 SSE 连接，并通过监听 message 事件来接收来自服务器端的推送数据。
下面是一个简单的示例代码，演示了如何使用 EventSource 对象来建立 SSE 连接：
-- -- ----------- ---- --- -- ----- ----------- - --- -------------------- -- ---------- --------------------------------------- ----- -- - ------------------------ ---
在上面的代码中，我们创建了一个 EventSource 对象，并通过指定服务器 SSE 终端的 URL（此处为 '/sse'）来建立持久连接。建立连接后，我们可以通过事件监听机制去接收来自服务器的推送数据，并在控制台中打印输出。
服务器端实现
在服务器端实现 SSE 的过程中，我们需要提供一个路由接口用于客户端建立连接，同时编写代码来向客户端不断发送事件流数据。
在 Node.js 环境中，我们可以使用 http.createServer() 创建 HTTP 服务器实例，并监听客户端的请求。当客户端请求 SSE 终端时，我们需要在响应头中添加 'Content-Type': 'text/event-stream' 和 'Cache-Control': 'no-cache' 两个字段，通知浏览器建立 SSE 连接。
然后我们可以将事件流数据通过 response.write() 方法不断写入响应体中，分别使用 data:、 event: 和 id: 三个字段表示数据、事件和数据序列的 ID。
以下是一个简单的 Node.js 示例：
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ------- -
-- ------------- --- --
------------------ -
--------------- --------------------
---------------- -----------
---
-- -------
--- ----- - --
-------------- -- -
--------
----------------- ----------
---------------- ------------------ ----- ----------
-- ------
- ---- -
------------------ - --------------- ------------ ---
-------------- ---------
-
----------------在上面的代码中，我们首先判断客户端请求的 URL 是否为 '/sse'，若是则设置响应头获知客户端 SSE 连接已建立。然后我们使用 setInterval() 不断向客户端发送带有事件和数据的响应数据。
总结
SSE 是一种服务器向客户端推送实时数据的高效方案，相较于轮询和 Websocket 连接，它更加轻量级和易于实现。令人惊叹的是，这种 Web 技术居然可以通过 HTTP 协议来实现。
利用 EventSource 对象和 SSE 协议，我们可以实现 Web 应用程序中实时化的功能，例如聊天室、股票行情等，其实现方式也相对简单。
现在，你可以尝试上述示例代码，建立简单的 SSE 连接并向客户端推送实时数据，同时，也可以通过 SSE 实现更多新奇的 Web 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b3acfd48841e9894fed9bf