前言
前端页面通常是通过 Ajax 轮询或 WebSocket 进行实现实时消息推送的，但是这些方案都有一些不足之处。Ajax 轮询的实时性可能不够，WebSocket 在某些场景下需要特殊的网络支持。而 Server-sent Events 是 HTML5 中新增的一种实时消息推送方案，解决了上述方案的不足。
Server-sent Events 是什么
- Server-sent Events（简称 SSE），是一种 HTML5 的 API，允许服务器发送事件流（event stream）到客户端。
- 通过 SSE，服务端可以向客户端发送纯文本数据或其他格式数据（比如 JSON），并在客户端接收到数据时触发一个事件，从而实现实时消息的推送。
SSE 的能力
SSE 通过 keep-alive 连接，对于实时消息的推送效果较好，相比其他实时消息推送方式，具有以下优点：
- 不需要额外的网络支持，能够跨越网络和协议，实现 Web 和服务器端的实时数据交互。
- 可以发送文本数据，也可以发送二进制数据，可以自定义数据格式。
- 支持服务端推送的多个事件类型。
- SSE 支持服务器端推送消息的“只读”特性，增加了数据安全性。
- SSE 自动支持客户端断开连接的处理。
实战
前置条件
- 服务端需要实现 SSE 的支持。本篇文章使用 PHP 作为示例语言。
- 前端需要使用支持 SSE 的浏览器。
服务端代码示例
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
------------------- -------------
---- ------- --------
-- ------
-------- ------------
-
----- - --------
--- ------ ------ ----- -
----------------- ------------
-
------ ------
-
-- ----------
----- ------ -
----- - -------------
---------- - ------
------ -- -------------------
------- -- ------
--
---- ------ - - ----------------------- - -------
--------
---------
-
--上述代码中，通过 header 设置 SSE 的一些相关属性，之后使用 echo 输出数据，格式为：
event: event type\n data: some data\n\n
其中 event 为自定义的事件类型，data 为服务端向客户端传递的实时数据。
客户端代码示例
-- -------------------- ---- ------- ----- ----------- - --- ----------------------- --------------------- - ----------- - ----- --------- - ------------------- ---------------------------- -- ------------------- - ----------- - --------------------- --
客户端需要实例化 EventSource，并从服务端接收 SSE 数据。onmessage 回调函数会在接收到服务端消息时调用。上述示例代码将收到的数据 JSON 解析后，打印在控制台上。
总结
SSE 是 HTML5 中一种轻量级的实时消息推送方式，不需要额外的网络支持，安全性较高，适用于大部分实时消息的推送场景。需要注意的是，SSE 不适合数据量过大的实时消息推送，因为长时间保持连接会影响服务器的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ef1eb5f6b2d6eab392427d
