随着 Web 应用逐渐向实时化方向演进，实现实时数据推送成为前端开发中的一大挑战。SSE 技术，也就是 Server-Sent Events，能够很好地解决这个问题。本文将介绍 SSE 技术的原理、应用场景以及具体实现方式。
原理
SSE 技术基于 HTTP 协议，客户端与服务器建立一条持久连接，服务器通过该连接向客户端发送数据，实现实时数据推送。
客户端通过 JavaScript API EventSource 来监听服务器推送的数据。当服务器有数据推送时，EventSource 会触发 onmessage 事件，并将数据以 Event 对象的形式传递给回调函数。
SSE 技术的数据传输方式是单向的，即服务器只能向客户端发送数据，不能接收客户端的数据。
应用场景
SSE 技术适用于以下场景：
- 实时消息通知：例如在线聊天室、股票行情等。
- 实时数据展示：例如网站实时访问量、游戏实时得分等。
与 Websocket 相比，SSE 技术的优势在于对浏览器和服务器的支持更加广泛，并且实现相对简单，不需要像 Websocket 那样实现复杂的握手协议。
实现方式
服务器端
Express
在 Express 框架中，可以通过 res.write() 方法向客户端发送数据，然后通过 res.end() 方法关闭连接。
-- -------------------- ---- -------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
----- ---- - ------ ----- ---------------------------
----------------
-- ------
--------------- -- -- -
----------------------- ----------
----------
---
---上面的示例代码中，我们创建了一个 /stream 的路由，使用 res.setHeader() 方法设置响应头，然后使用 setInterval() 方法每隔 1 秒向客户端发送当前时间戳。
当客户端关闭连接时，会触发 req.on('close') 事件，我们可以在该事件中关闭连接。
Koa
在 Koa 框架中，可以使用 ctx.body 属性向客户端发送数据。在 ctx.set() 方法中设置响应头。
-- -------------------- ---- -------
------------- ----- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-------- - ----- --------- -- -
----- ------ -
----- ------ ----- ---------------------------
----- --- --------------- -- ------------------- -------
-
--
------------------- -- -- -
----------------------- ----------
---
---上面是使用 Koa 框架实现 SSE 技术的示例代码，与 Express 实现方式类似。
客户端
客户端可以使用 EventSource 对象来监听服务器推送的数据。
-- -------------------- ---- ------- ----- ----------- - --- ----------------------- ------------------ - -- -- - ----------------------- ---------- -- --------------------- - ------- -- - ---------------------- ---------------- -- ------------------- - ------- -- - --------------------- ---------------------- --
上面的示例代码中，我们创建了一个 EventSource 对象，并使用其 onopen、onmessage、onerror 属性来监听事件。
onopen 事件表示连接已经建立，onmessage 事件表示接收到了服务器推送的数据，onerror 事件表示出现了错误。
总结
本文介绍了 SSE 技术的原理、应用场景以及具体实现方式。SSE 技术相对简单，易于实现，并且兼容性较好，可以很好地解决实时数据推送的问题。但需要注意的是，SSE 技术支持的协议为 HTTP，与服务器的连接数有一定限制，不适用于高并发的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec9aa8f6b2d6eab36e8489
