在前端开发中，经常有需要将数据实时推送到客户端的情况，这时我们通常会使用 WebSocket 或者轮询来实现。但是，这两种方式存在一些问题，比如 WebSocket 会受到防火墙的限制，轮询会消耗服务器资源等。Server-sent Events (SSE) 就是一种解决这些问题的技术方案。
SSE 是什么？
SSE 是 HTML5 引入的一种协议，它允许服务器向客户端主动推送数据，而不需要客户端不停地向服务器发送请求。SSE 利用了 HTTP/1.1 的持久连接来实现，所以它比轮询更高效，比 WebSocket 更容易实现。
SSE 的使用
首先，在客户端，我们需要使用 EventSource 对象来与服务器进行通信：
----- ----------- - --- -------------------- --------------------- - ----- -- - -------------------- ------------ --
这里的 /sse 是 SSE 的事件源，也就是服务器用来发送消息的地址。
在服务器端，我们需要设置响应头，告诉浏览器这是 SSE 的响应，并保持连接：
------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ ---
然后，可以使用 res.write() 方法来向客户端发送消息：
---------------- -----------------
这里的 message 是要发送的消息内容，需要按照 SSE 的协议格式发送，即以 data: 开头，以两个换行符结尾。
SSE 的优点
SSE 是基于 HTTP 协议的，所以它不受防火墙的限制，而 WebSocket 需要使用特定的端口。（当然，也可以使用 wss 协议来避免这个问题）
SSE 比起轮询和 WebSocket 更加简单易用。客户端只需要通过
EventSource对象连接到服务器，就可以立即接收到数据。而 WebSocket 需要手动建立连接，处理断线重连等操作。SSE 只是单向通信，只有服务器可以向客户端主动发送消息，而客户端不能向服务器发送消息。这使得 SSE 更加适合用于服务器向客户端发送实时更新的场景，比如股票行情、聊天室等。
示例代码
下面是一个使用 SSE 实现实时股票行情的示例代码：
-- ------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
-------------------
----------
-------
-
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- ------ - -------- -------- ------- --------
-------------- -- -
----- ----- - ------------------------------- - ----------------
----- ----- - -------------- - -----------------
----- ------- - --------------------
---------------- -----------------
-- ------
---
--------------------
-- -----
----- ----------- - --- --------------------
--------------------- - ----- -- -
-------------------- ------------
--结论
SSE 是一种非常实用的技术，它可以帮助我们在不使用 WebSocket 的情况下实现服务器向客户端的实时推送。SSE 能够有效地减少服务器和客户端的通信延迟，提高应用程序的响应速度，如果你需要实时推送数据的功能，那么 SSE 绝对是一种值得考虑的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671cb6659babaf620fb21775