在 Web 页面开发中，实时通信的需求越来越普遍。传统的实时通信方式有 WebSocket、Long Polling 等，但它们的实现和使用较为复杂。而 Server-Sent Events（SSE）则是一种简单易用的实时通信方式，本文将介绍 SSE 的全流程操作方法。
简介
SSE是一种通过HTTP协议在服务器和客户端之间单向流动的实时通信。它允许服务器实时地将数据传输到客户端，无需客户端发起请求。SSE的实现需要服务器端发送特定格式的数据，而客户端通过使用浏览器提供的 API 接收这些数据。
SSE 的应用场景
SSE 可以广泛应用于需要实时更新数据的场景，例如：
- 在线聊天室
- 股票市场行情
- 社交网络中的实时消息更新
- 游戏内的实时信息
SSE 的优点
与传统的实时通信方式相比，SSE 具有以下几个优点：
- 简单易用：使用 SSE 只需要浏览器提供的 API，无需使用第三方库或组件。
- 兼容性好：SSE 不需要特殊的协议或插件支持，它兼容所有现代浏览器。
- 轻量级：SSE 与 WebSocket 等传统实时通信方式相比，协议头部大小相对较小，通信过程中的数据传输效率更高。
- 实时性好：SSE 具有即时的响应能力，同时对于对实时性要求不高的应用场景也可通过缓存机制来提高性能。
SSE 的全流程操作方法
1. 服务器端的实现
服务器端的实现需要遵循以下格式的数据格式：
event: [自定义事件名称] data: [需要发送的数据]
其中，event: 可选，表示自定义事件名称，用于将收到的数据分类。data: 后的内容为需要发送的数据。
以下是 Node.js 中 Express 应用实现 SSE 的样例代码：
-- -------------------- ---- -------
--------------- ----- ---- -- -
----------------------------- --------------------
------------------------------ -----------
--------------------------- -------------
-------------- -- -
----- ---- - --- ---------------------------
---------------- -------------
-- -----
--上述代码中，我们使用 Express 应用搭建一个 SSE 的服务器，每秒钟向客户端发送当前时间，该 SSE 服务的 URL 为 '/sse'。
2. 客户端的实现
客户端使用浏览器提供的 EventSource 对象来接收服务器发送的数据。
以下是客户端接收 SSE 数据的样例代码：
const eventSource = new EventSource('http://localhost:3000/sse')
eventSource.onmessage = (event) => {
console.log(event.data)
}上述代码中，我们创建一个 EventSource 对象，通过 URL 指向服务器的 SSE 服务。当客户端接收到服务器发送的数据时，就会触发 onmessage 这个事件，我们可以在这个事件的回调函数中处理接收到的数据。
总结
本文介绍了 SSE 实现 Web 页面实时通信的全流程操作方法，包括服务器端和客户端的实现。相较于传统的实时通信方式，SSE 具有简单易用、兼容性好、轻量级、实时性好等优点。在实时更新数据的场景中使用 SSE，可以提高 Web 应用的性能和响应速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e21a23f6b2d6eab3d68830