现代 Web 应用程序越来越需要实现实时通信功能，例如在线游戏、实时聊天、股票行情等。在过去，Web 开发人员通常使用长轮询或 WebSocket 等技术来实现实时通信。但是，这些技术都有一些不足之处，如长轮询需要频繁的 HTTP 请求，而 WebSocket 需要特殊的协议支持等。
Server-Sent Events（SSE）是一种不同寻常的技术，它使得服务器可以发送事件流到浏览器，而无需任何额外的协议支持。本文将介绍如何使用 SSE 来实现高效实时通信。
什么是 Server-Sent Events
Server-Sent Events 是一种基于浏览器和服务器之间单向传输的技术，它可以让服务器通过 HTTP 技术推送消息到前端。在 SSE 中，服务器向浏览器发送一个长期存在的 HTTP 响应，该响应的 MIME 类型为 text/event-stream。在传输过程中，服务器会定期发送事件（类似于 WebSocket 中的帧），而浏览器则可以监听这些事件并执行相应的操作。
相较于其他实时通信技术，SSE 有以下优点：
- 无需特殊协议支持。 SSE 不需要特殊的协议支持，只需使用标准的 HTTP 协议即可。这意味着 SSE 可以很容易地集成到现有的 Web 应用程序中，而无需修改现有的基础架构。
- 可与标准的 Web 技术集成。 SSE 是基于 HTTP 的，因此它可以与任何基于 Web 的技术（如 HTML、CSS、JavaScript 等）集成。这也使得它在现代 Web 应用程序中非常流行。
- 灵活性和可扩展性。 在 SSE 的基础上，可以构建出各种各样的应用程序，例如聊天应用、实时博客、实时股票行情等。
如何使用 Server-Sent Events
要使用 SSE 实现实时通信，我们需要完成以下步骤：
1. 创建一个 SSE 服务端点
在服务器上，我们需要创建一个可以推送消息的 SSE 服务端点。该端点需要定义一个路由（例如 /sse），并向客户端发送 text/event-stream 类型的响应。
下面是一个 Node.js 示例，它使用 express 框架创建 SSE 服务端点：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- --- ----
--------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
-- ----
---------------------- -
----------------- ---------
---------------- ------- --------------
-- ------
---
---------------- ---------- -
------------------- ------- -- ---- -------
---在上面的代码中，我们使用 setInterval 定期发送事件流到浏览器。每个事件都以以下形式传递：
event: ping
data: {"msg": "pong"}浏览器将收到该事件，并执行相应的操作。
2. 监听 SSE 事件
在客户端上，我们需要创建一个事件监听器来接收 SSE 事件。我们可以使用 JavaScript 来完成此操作。
以下是一个基本示例：
const eventTarget = new EventSource('/sse');
eventTarget.addEventListener('ping', function(event) {
const data = JSON.parse(event.data);
console.log(data.msg); // 输出 'pong'
});在上面的代码中，我们使用 EventSource API 来创建一个事件源，其中 /sse 是 SSE 的服务端点。我们还使用 addEventListener 方法监听 ping 事件并将其处理为 JSON 格式的数据。
3. 处理 SSE 事件
在客户端收到事件后，我们需要处理它们以执行特定的操作。这通常涉及使用 JavaScript 更新 DOM、调用其他 API、发送请求等。
以下是一个使用 jQuery 更新页面的示例：
const eventTarget = new EventSource('/sse');
eventTarget.addEventListener('ping', function(event) {
const data = JSON.parse(event.data);
$('body').append(`<p>${data.msg}</p>`);
});在上面的代码中，我们使用 jQuery 更新 body 元素以显示接收到的消息。
总结
Server-Sent Events 是一种简单、易于使用的技术，它可以很容易地实现实时通信。相较于其他实时通信技术，SSE 具有灵活性、可扩展性和易集成等优点。在应用程序中使用 SSE 可以提高用户体验和应用程序性能，特别是当需要通过 Web 应用程序进行实时数据传输时。
值得注意的是，在处理 SSE 事件时要小心。由于 SSE 是建立在标准的 HTTP 协议之上，它具有相应的安全问题。我们应该始终确保服务器端点是受保护的，并通过 SSL/TLS 等加密技术对数据进行安全传输。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a7ef448841e98948a12d7