在前端开发中，我们经常需要通过服务器推送消息到客户端，实现实时更新的效果。传统的方式是使用 WebSocket，但是它需要建立双向连接，对服务器的负载较大，而且不是所有浏览器都支持。另外一种推送消息的方式是使用 Server-Sent Events（简称 SSE），它可以实现单向连接，对服务器的负载较小，而且几乎所有现代浏览器都支持。
SSE 的基本原理
SSE 是一种基于 HTTP 协议的单向连接，它使用了浏览器的 EventSource 接口来接收服务器推送的消息。客户端向服务器发送一个 HTTP 请求，服务器在响应中返回一个 Content-Type 为 text/event-stream 的响应头，然后不断地向客户端发送文本数据，每个数据以一个空行结束。客户端通过 EventSource 接口监听服务器发送的消息，一旦收到消息，就会触发一个 message 事件，然后我们可以在事件处理函数中处理消息。
SSE 的使用方法
服务器端的实现
在服务器端实现 SSE 的过程非常简单，只需要在响应头中设置 Content-Type 为 text/event-stream，然后不断地向客户端发送消息即可。下面是一个使用 Node.js 实现 SSE 的示例代码：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
----------------这个服务器会每秒钟向客户端发送一个时间戳，客户端可以通过 EventSource 接口接收这些消息，并在页面上实时更新。
客户端的实现
在客户端使用 SSE 也非常简单，只需要创建一个 EventSource 对象，然后通过监听 message 事件来处理服务器发送的消息。下面是一个使用原生 JavaScript 实现 SSE 的示例代码：
----- ------ - --- -------------------- ---------------------------------- ----- -- - ------------------------ ---
这个客户端会向服务器发送一个 SSE 请求，并在控制台输出服务器发送的消息。
SSE 的优缺点
SSE 作为一种推送消息的方式，具有以下优点：
- 单向连接，对服务器的负载较小。
- 几乎所有现代浏览器都支持，包括移动设备上的浏览器。
- 可以通过 EventSource 接口监听服务器发送的消息，实现实时更新效果。
但是 SSE 也有一些缺点：
- SSE 只能发送文本数据，不能发送二进制数据。
- SSE 的连接不能被重用，每次都需要建立新的连接。
- SSE 的连接可能会被防火墙或代理服务器阻止。
总结
SSE 是一种基于 HTTP 协议的单向连接，可以实现服务器向客户端推送消息的效果。它具有很多优点，如对服务器的负载较小、几乎所有现代浏览器都支持等。在实际开发中，我们可以根据项目需求选择合适的推送消息方式，如果只需要单向推送文本数据，那么 SSE 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66028a9bd10417a222e46955