在 Web 应用中，实时数据的传输一直是难题。传统的方式是通过轮询实现，即客户端不断向服务器发送请求，服务器返回最新的数据。但是，这样会占用大量的网络资源，而且实时性也不够高。
Server-Sent Events（SSE）是一种新的技术，可以解决实时数据传输的问题。SSE 是通过 HTTP 协议在客户端和服务器之间建立持久的连接，服务器可以主动向客户端发送消息，而不需要客户端发送请求。
SSE 的优点
相较于传统的轮询方式，SSE 有以下优点：
实时性更高：SSE 的连接是持久的，可以保持实时的数据传输，只需要在服务器端有新消息时发送即可，无需客户端不断发送请求。
网络资源占用更少：SSE 的连接只需要建立一次，可以保持长时间的持久连接，不需要每次都发送请求，不会产生大量的网络请求。
可维护性更高：SSE 使用标准的 HTTP 协议，与传统的 Web 技术相兼容，不需要额外的组件或库。
SSE 的使用
SSE 的使用分为客户端和服务器两部分。
客户端
客户端需要创建一个新的 EventSource 对象来连接服务器，监听服务器的消息并处理。例如：
const source = new EventSource('/sse');
source.onmessage = e => {
console.log(e.data);
}在上面的例子中，客户端通过 EventSource 对象连接服务器，监听 /sse 路径下的消息，并在接收到消息时输出到控制台中。
服务器
服务器需要使用特定的 MIME 类型 text/event-stream 来标识 SSE 协议，并发送消息到客户端。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- - - --- --------------------------- - --------
-- ------
----------------在上面的例子中，服务器创建了一个 HTTP 服务器，监听 3000 端口。当客户端请求时，服务器返回的头部中包含 Content-Type、Cache-Control 和 Connection 等信息，并隔一段时间发送一条消息到客户端，消息包含当前时间字符串。
SSE 的兼容性
SSE 不被所有的浏览器支持，但可以使用 polyfill 的方式实现。常用的 polyfill 包括 EventSource 和 jQuery 等。可以在客户端使用 polyfill 来保证浏览器兼容性。
总结
SSE 技术的出现，解决了 Web 应用中实时数据传输的问题。SSE 具有实时性更高、网络资源占用更少、可维护性更高等优点，在工业控制、监控等领域有广泛应用。通过本文的介绍，读者可以了解 SSE 的原理和使用方式，并为实际应用提供指导和借鉴。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646831b6968c7c53b0860af1