在前端开发中，实时数据是一个非常常见的需求，例如聊天室、股票行情等等。在传统的开发模式中，我们通常使用轮询或者 WebSocket 来实现实时数据的获取，但是这些方法都有各自的缺点，轮询会造成不必要的网络流量，WebSocket 的实现相对较为复杂。而 Server-sent Events(SSE) 则是一种轻量级的实时数据获取方式，它使用 HTTP 协议，无需额外的握手和协议，能够轻松实现实时数据的推送。
SSE 原理
SSE 是一种基于 HTTP 的协议，它通过一个长期存在的 HTTP 连接，将实时数据推送给客户端。SSE 的原理非常简单，客户端通过 HTTP 请求与服务器建立连接，服务器将需要推送的数据通过该连接发送给客户端。客户端通过监听该连接的事件，即可实时获取到数据。SSE 与 WebSocket 不同的是，SSE 是单向的，只能从服务器向客户端推送数据，而不能将数据推送回服务器。
SSE API
SSE 的 API 非常简单，只需要使用 EventSource 对象即可。EventSource 对象可以通过一个 URL 来建立与服务器的连接，连接建立后，服务器会不断地向客户端发送数据，客户端通过监听 EventSource 对象的 onmessage 事件即可获取到数据。
创建连接
----- ----------- - --- -----------------------------------------
监听事件
--------------------- - --------------- - ------------------------ --
关闭连接
--------------------
SSE 服务器端实现
SSE 服务器端的实现非常简单，只需要在 HTTP 响应头中设置 Content-Type 为 text/event-stream，然后将需要推送的数据通过该连接发送给客户端即可。下面是一个使用 Node.js 实现 SSE 服务器端的示例代码。
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- -----------------------------------
-- ------
- ---- -
------------------ -
--------------- -----------
---
---------
------
------
---------- ------------
-------
------
------- ---------
--------
----- ----------- - --- --------------------
--------------------- - --------------- -
----- ---- - -----------
----- - - ----------------------------
----------- - -----
-----------------------------
--
---------
-------
-------
---
-
----------------总结
Server-sent Events(SSE) 是一种轻量级的实时数据获取方式，它使用 HTTP 协议，无需额外的握手和协议，能够轻松实现实时数据的推送。SSE 的 API 非常简单，只需要使用 EventSource 对象即可。SSE 服务器端的实现也非常简单，只需要在 HTTP 响应头中设置 Content-Type 为 text/event-stream，然后将需要推送的数据通过该连接发送给客户端即可。SSE 的使用能够大大简化实时数据获取的开发难度和实现复杂度，是一个非常值得掌握的技术。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6613b5a8d10417a222431b5c