随着实时数据传输的需求日益增加，Server-sent Events(API 简称为 SSE) 逐渐成为前端开发中的一种流行解决方案。它可以轻松地实现服务器到客户端的实时数据推送，无需客户端的持续连接，从而大大降低了服务器的负担，使得系统具备更好的可扩展性和可维护性。
本文将详细介绍 Server-sent Events 相关知识，从 SSE 的基本原理到最佳实践，旨在帮助前端开发者更好地应用 SSE 技术。
SSE 的基本原理
Server-sent Events 是 HTML5 提供的一种实时通信的技术，采用基于 HTTP 的长连接通信方式，基于 EventSource API 来实现服务器端向客户端的数据推送。
SSE 是基于 HTTP 协议的，因此 SSE 消息的传输必须要符合 HTTP 规范。SSE 协议支持多种数据格式，如文本、二进制的消息等，通常选择文本格式，它具有广泛的兼容性、灵活性和易用性。
SSE 的原理是客户端与服务器建立 HTTP 长连接，服务器端向客户端推送数据，客户端通过浏览器内置的 EventSource API 来监听服务器端发出的数据变化事件，实现实时数据更新。客户端可以随时取消监听并关闭连接。
SSE 的优势
在实时数据传输方面，相比 WebSockets 等技术，SSE 的优势主要在于：
支持跨域：SSE 使用 HTTP 协议传输，更容易与现有的网络架构和安全规则进行集成和管理。相比 WebSockets 等传输协议，无需考虑跨域的问题。
易于集成：SSE 基于 HTTP 协议，可以使用浏览器内置的通信 API，而不需要使用额外的库或插件。
易于扩展和维护：SSE 消息采用文本格式，不需要手动解析二进制消息，易于扩展和维护。
降低服务器负载：SSE 使用 HTTP 长连接，可以避免频繁地建立和关闭连接对服务器产生的负担。
SSE 的示例代码
下面是一段基本的 SSE 示例代码，展示了如何使用 SSE 建立长连接并进行数据推送：
服务端代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- --------------------
-- ------
---
--------------------服务端使用 Node.js 自带的 http 模块，创建一个 HTTP 服务器，并以纯文本形式推送当前时间的消息。其中，Content-Type 是必需的头部信息，用于标识 SSE 数据的格式类型。
客户端代码
const eventSource = new EventSource('http://localhost:8080');
eventSource.onmessage = (event) => {
console.log(event.data);
};在客户端，我们可以通过 EventSource 接口来监听流事件，并实时获取来自服务器的数据。当有新的消息到达时，我们会在控制台中输出消息内容。
SSE 的最佳实践
1. 使用适当的数据格式
SSE 协议支持多种数据格式，如文本、二进制，其中文本格式是默认格式。对于文本数据而言，可以使用多行消息的格式，也可以采用 JSON 格式的消息。
在实际应用中，我们应该选择数据格式，以便在读取和修改数据时，能使代码更加规范清晰。对于结构化的数据，JSON 是更好的选择。而对于非结构化的数据，多行消息格式则更好。限制消息的长度，可以更加高效地传输数据。
2. 处理错误和断开连接
SSE 通常用于实时更新应用程序，因此需要对由于断网等原因而导致连接终止的情况进行处理。如果连接中断，则可以在事件源上发出 error 事件，并在控制台中记录错误消息：
eventSource.onerror = (error) => {
console.error('EventSource error:', error);
};在有死掉的连接的情况下，我们还可以通过在 setTimeout 中重新打开连接来打破客户端和服务器端之间的连接，从而减轻服务器的负担，避免发送大量无用的连接请求：
eventSource.onclose = (event) => {
setTimeout(() => {
const newEventSource = new EventSource('http://localhost:8080');
//重新绑定事件
}, 1000);
};3. 使用一些基本的安全措施
可以通过用 SSL 加密协议保护 SSE 长连接数据的传输，以避免数据被截获或篡改的风险。此外，服务器端也应该限制 SSE 通道的网络接入。限制 SSE 通道的网络接入可以限制恶意访问或数据丢失的风险。
4. 解决 SSE 在不同浏览器下的兼容性问题
虽然 SSE 是在 HTML5 中引入的，但不同浏览器可能会有不同的实现和兼容性问题。例如，MSIE 11 以下的浏览器不支持 SSE。此外，一些浏览器对一些错误的响应会表现出不同的行为，这些问题可能会对代码的效率和稳定性产生负面影响。
因此，建议使用在多种浏览器和设备下都能够稳定运行的 SSE 库，如 EventSource Polyfill 库等，在遇到 SSE 在不同浏览器下出现的兼容性问题时可以更加高效地排查问题。
总结
本文对 SSE 技术进行了详细介绍，并分享了 SSE 在实时数据传输中的诸多优势。本文还提供了一个基本的 SSE 示例代码以及相关的最佳实践建议，旨在为前端开发人员提供应用 SSE 技术的价值和方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64913e9348841e9894f3e3a6