随着 Web 技术的不断发展，现在越来越多的应用需要利用服务端推送消息。当服务器频繁地向客户端推送消息，例如实时聊天、股票实时行情等情境，会给服务器带来很大的负担，甚至可能导致服务器崩溃。这种情况下，SSE（Server-Sent Events）成为了解决方案。
什么是 SSE
SSE 是 HTML5 中的一种实现服务器向客户端推送消息的 API。SSE 只能用于从服务器到客户端的单向通信，客户端无法向服务器发送消息。
SSE 的优点
SSE 优点如下：
- 省略了很多类似 WebSocket 的复杂实现，只需在服务端实现即可。
- 服务器不断地向客户端推送消息，与客户端长连接和轮询不同，不需要大量的请求和响应头，因此很省带宽。
- 对于浏览器兼容性方面，主流浏览器均能支持 SSE。
经过比较，SSE 在服务器推送频繁消息的情境中表现优异，这也是它广泛运用于实时消息发送场景的原因之一。
如何使用 SSE
SSE 是通过在服务端向客户端发送特殊格式的事件来实现的。开启 SSE 的方式有两种：
使用 JS API
-- -------------------- ---- -------
--- --- - --- ------------ ---- --- --
------------- - -------- ------- -
------------------------ -------------
--
----------- - -------- ------- -
--------------------- --------
--
----------- - -------- ------- -
------------------- ---- --- --
--原生 HTML
<script>
var source = new EventSource("/url");
source.onmessage = function(event) {
console.log(event.data);
};
</script>其中，/url 是服务器推送消息的地址。
示例
服务端实现
-- -------------------- ---- -------
---- ---- --
----- ---- - ----------------
-------- ------------ --- ----- ---------- -
--- ------- - ---
-- ----------- -
------- -- ------- ----------------
-
------- -- ---- ---------
------- -- ------ -----------------------------
-------------------
-
----------------------- -------
---------------------------------------
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
--- -- - --
-----------------
-----
------------ --- --------- ----------- -- - ---------
-- ------
----------------
------------------- ------- -- -------------------------该代码启动后，会在 http://localhost:3000/ 上启动成功，每隔一秒钟向客户端推送一条信息，id 递增，消息体为 这是服务器发送的消息 id 为 ${id}。
客户端实现
客户端使用 XMLHttpRequest 对象来发起 HTTP 请求，获取 SSE 数据。以下代码是一个简单的 SSE 客户端实现：
let source = new EventSource('/url');
source.onmessage = function(event) {
console.log(event.data);
}该代码会不断地在浏览器控制台输出服务端返回的数据。客户端通过 EventSource API 发起与服务端的 SSE 连接，不断接收服务端发送的消息，浏览器支持 SSE，不需要像 WebSocket 那样在 Node.js 中安装 ws 包以及在客户端写 WebSocket 的兼容性判断代码。
总结
SSE 是一种存在广泛使用价值的技术，它解决了由服务端推送消息频繁导致的性能问题，同时还省去了与 WebSocket 相比较的复杂实现。SSE 兼容性良好，只需在服务端实现即可，对 Web 开发人员而言，掌握这项技术是非常有必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2ed0ff6b2d6eab3e3939a