随着 Web 应用程序规模的不断扩大，服务器与客户端之间的实时通信需求越来越大。在前端技术栈中，Server-Sent Events（SSE）成为了一种较为广泛使用的实现实时通信的技术。本文将对 SSE 进行优劣分析，并探究适用场景。
Server-Sent Events 原理
SSE 是一种基于 HTTP 的实时通信技术，采用的是单向的持久连接，客户端向服务器发送一个 HTTP 请求，服务器保持连接打开并持续向客户端发送消息。由于是单向连接，因此 SSE 并不能实现双向通信。
服务器端通过 Content-Type 设为 text/event-stream，浏览器会以流的方式解析返回数据，根据事件名和数据进行处理。
Server-Sent Events 优点
基于 HTTP 协议
SSE 是基于 HTTP 协议的，不存在类似 WebSocket 需要升级协议的问题，因此 SSE 的兼容性较好，可以在各种设备和浏览器上运行。
支持跨域
SSE 支持跨域请求，可以被用于构建跨域通信功能。
单向数据流
SSE 采用的是单向的持久连接，服务器端向客户端发送数据，而客户端只能接收数据，不会向服务器端发送任何请求。这种单向数据流的特点，使得 SSE 适用于一些场景，例如实时数据展示和事件推送。
自带重连机制
由于 SSE 采用的是持久连接方式，因此在网络不稳定或者连接断开的情况下，浏览器会自动进行重连，保证通信的可靠性。
Server-Sent Events 缺点
不支持双向通信
SSE 是单向的持久连接，只能由服务器端向客户端发送数据，无法实现类似 WebSocket 那样的双向通信。
单向数据流
SSE 的单向数据流特点，使得客户端接收到的数据是一种非常流式和不可靠的形式，容易出现丢失和错位的情况。
不支持二进制数据
SSE 只能发送纯文本数据，无法发送二进制数据，这在一些需要传输二进制数据的场景下可能存在问题。
适用场景
实时数据展示
由于 SSE 支持单向数据流且自带重连机制，因此比较适合用于实时数据展示场景，例如股票行情或者天气预报等。
事件推送
SSE 可以用于事件推送场景，例如在线聊天室或者邮件提醒等。
轻量级交互
由于 SSE 基于 HTTP 协议且支持跨域请求，因此可以作为轻量级的交互方式，例如网页内部的通知提醒或者用户行为记录等。
SSE 示例
-- -------------------- ---- ------- -- ----- ----- ---- - ---------------- ----------------------- ---- -- - ------------------ - --------------- -------------------- -- -- ------------ ---------------- ----------- -- ---- ------------- ------------ -- ---- --- -- ---- ----- ---- - --------------- ----- - ----------------- - - ----- - ------ ---------------- - - ---- - -------- -- --------------- ------ --------- -- - - ------- -------------- -- - --------------- --- ---------------------- -- ------ --------------- -- -- - ------------------- ------- -- ------------------------- --- -- ----- ----- ------ - --- ------------------------------------- ---------------------------------- ------- -- - ------------------------ -- ----------- ---展开代码
上述代码展示了如何使用 Node.js 和 SSE 进行实时消息推送。服务器端设置 Content-Type 为 text/event-stream，禁用缓存并保持连接，然后通过 send 函数发送消息。客户端则通过 EventSource 对象监听 message 事件，接收服务器端发送的消息并进行处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc2311a231b2b7edd8cb3b
