在前端开发中，我们经常需要实时推送数据和消息，比如新闻推送、股票行情等。这时候，传统的方式使用 Ajax 请求和轮询是不太合适的，因为它们都需要客户端发起请求，相对较为消耗资源，且不方便服务端主动推送数据。而 Server-Sent Events (SSE) 可以解决这个问题，是一种服务器主动推送技术。
SSE 可以让服务器向客户端发送事件，而客户端通过 EventSource API 来接收这些事件。相比 Ajax 请求和轮询，SSE 有以下优势：
- 实时性好：当有新的数据或消息需要推送时，服务端可以立刻推送给客户端，客户端不需要频繁地向服务端发送请求。
- 节省带宽：SSE 使用 HTTP 长连接，可以避免客户端和服务端频繁地建立和断开连接，从而节省带宽。
SSE 应用场景比较广泛，例如：
- 实时股票行情
- 游戏实时推送消息
- 实时新闻推送
如何使用 Server-Sent Events
服务端
服务端实现 SSE 十分简单。服务端只需要向客户端发送带有事件类型和数据的消息即可，关键是要设置正确的 HTTP 头，例如：
-------- --- -- ------------- ----------------- -------------- --------
其中 Content-Type 指定响应内容类型为 text/event-stream，表示服务端会像一个数据流一样不断发送数据。Cache-Control 设为 no-cache 表示不缓存响应。
服务端发送数据的格式为：
------ ------ ----- ----- ------ ----- ------ ------ ----- ----- ------ -----
其中，event 行指定事件类型，data 行指定事件数据，可以有多个事件类型和数据。
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
----- ---- - ----- ------
----------------- -------------
---------------- --------------
-------------- -- -
---------------- -----------
-- ------
---
---------------- -- -- ---------------------- -- -------------------------上面的示例代码使用 Express 实现了一个 SSE 服务端，通过访问 http://localhost:3000/sse 可以获取 SSE 事件流。服务端定时发送一个 data 为 'ping' 的事件。
客户端
客户端使用 EventSource API 来接收从服务端推送来的事件。创建 EventSource 对象时需要指定 SSE 服务端的地址，如：
--------- -----
------
------
----- ----------------
------------------ --------------
-------
------
---- ------------------------
--------
----- ----------- - --- --------------------
---------------------------------------- - -- -
--------------------- ---------- ------ ----- ------------
---
--------------------- - - -- -
--------------------- ------- ------ ----- ------------
-
---------
-------
-------上面的示例代码创建了一个 EventSource 对象，通过 addEventListener 方法监听名为 greeting 的事件，每当服务端推送 greeting 事件时，就会触发回调函数。同时，通过 onmessage 属性设置一个默认的消息事件处理函数，以接收 ping 消息。这样，当服务端推送数据时，就会在客户端的控制台中输出相应的日志。
总结
Server-Sent Events 是一种服务器主动推送数据和消息的技术，相对于传统的 Ajax 和轮询方式，在实时性和资源消耗上有明显提升。在实际开发过程中，我们可以考虑使用 SSE 来实现实时推送功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664f0945d3423812e4fefdfe