在 web 开发中，实时通信是一个很重要的需求。传统的实现方式是使用 WebSocket，但是在某些场景下，我们可能需要一种更轻量级的实现方式。这时，Server-sent Events（简称 SSE）就成为了一个不错的选择。
什么是 Server-sent Events
Server-sent Events 是一种基于 HTTP 的实时通信技术。它允许服务器向客户端推送数据，而无需客户端发起请求。SSE 的实现方式是通过一个长连接，服务器不断发送数据给客户端，客户端通过监听这个连接来接收数据。
SSE 的优点
相比于 WebSocket，SSE 有以下优点：
- SSE 是基于 HTTP 的，因此不需要特殊的协议和端口，可以直接使用标准的 HTTP 端口（80 和 443）。
- SSE 是单向通信，只有服务器向客户端推送数据，因此相对更安全。
- SSE 是轻量级的，不需要像 WebSocket 那样建立一个全双工的通信通道，因此对服务器的负载更小。
如何使用 SSE
使用 SSE 非常简单，只需要在客户端通过 JavaScript 创建一个 EventSource 对象，然后监听服务器端推送的事件即可。
-- -------------------- ---- ------- ----- ------ - --- -------------------- -- ---- ----------- -- ---------------------------------- --------------- - -- --------- ------- -- ------------------------ -- ----------- --- -------------------------------- --------------- - -- ------ ------------------ ------- ------- ---
在服务器端，我们需要发送一个 Content-Type 为 text/event-stream 的响应，并且在响应体中发送一系列以 data: 开头的数据块，每个数据块之间以空行分隔。
-- -------------------- ---- -------
----- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
---------------- - - --- ------ - -------- -- -----
-- ------
----------------上面的代码会每秒钟向客户端发送一个当前时间的数据块。
SSE 的注意事项
使用 SSE 时需要注意以下几点：
- SSE 的连接是单向的，只能由服务器向客户端发送数据，因此无法实现客户端向服务器发送数据的双向通信。
- SSE 的连接是长连接，因此需要注意服务器端的资源占用情况，避免连接过多导致服务器负载过高。
- SSE 的兼容性不如 WebSocket，部分浏览器可能不支持 SSE。
总结
Server-sent Events 是一种轻量级的实时通信技术，相比于 WebSocket，它更加简单、安全和轻量级。使用 SSE 可以轻松实现服务器向客户端的实时推送，但需要注意连接的资源占用情况和浏览器的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6556c5e2d2f5e1655d123a29