背景
在现代 Web 应用中，很多场景需要实时或准实时的大数据展示或处理，比如股票行情、聊天室、监控等。这些场景通常需要一个实时的数据通信机制，能够实时推送数据给前端页面，让页面可以即时响应并展示数据。
WebSocket
首先想到的可能是 WebSocket，WebSocket 是 TCP 协议上的双向通信协议，它能够在客户端和服务器之间创建持久性的连接，实现实时双向数据通信。不过它的缺点也明显，需要额外的握手，需要服务器端支持，不适合长轮询的场景。
SSE
应对这种场景，可以使用 SSE（Server-Sent Events）技术，它是一种无需握手，服务器可以即时向客户端推送数据的协议。SSE 是一个基于 HTTP/1.1 的协议，它的实现纯属浏览器和服务器的工作，客户端不需要额外的插件或库即可使用。
实现方式
服务器端
服务器端需要按照 SSE 约定的协议格式向客户端发送数据，具体的协议格式如下：
------ ------------ ----- ----------
其中 event-name 表示事件名，data 表示数据。
以下是 Node.js 中使用 SSE 推送数据的示例代码：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- -------------------- -- --- ----------------- --
---------------- -----------
------------- ------------ -- -------
---
----- -------- - ------ -- -
----------------- -------------- --------------
-
-------------- -- -
------------ --------
-- ------
----------------
------------------- --------- -- ---- -------该示例代码每秒向客户端推送一个当前时间值，并在数据前加上 event: myEvent，表示事件名为 myEvent。请注意，这里每次推送数据时，必须加上 \n\n，表示一次 SSE 事件的结束。
客户端
在客户端可以使用 JavaScript 的 EventSource 对象来接收 SSE 发送的事件和数据。
以下是使用 EventSource 对象接收 SSE 数据的示例代码：
----- -- - --- -------------------- ------------------------------ ------- -- - ------------------------ -- ------- ---
注意点
请注意，SSE 推送的数据量不能过大，推送的速率也需要控制，否则会对带宽造成负担，对应用程序产生不良影响。
结论
SSE 可以适用于需要时间即时性数据推送场景，并且相当容易实现。不过，它的局限性在于其只能从服务器慢慢地推送单向的消息，与 WebSocket 的双向通讯相比，功能上有限制。因此，在实际项目实现时，需要根据具体情况来选择 WebSocket 或 SSE 等实现技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671c90419babaf620fb15619