在现代 Web 应用程序中，实时交互已经成为了一种很重要的功能。例如，在一个聊天应用中，用户需要实时地看到他们的聊天消息，而在一个股票市场应用中，用户需要实时地看到股票价格的变化。在这些应用中，传统的轮询方式已经不再适用了，因为它们会浪费大量的带宽和服务器资源。
为了解决这个问题，HTML5 引入了一种新的技术，叫做 Server-Sent Events (SSE)。SSE 允许服务器向客户端发送事件流，这些事件可以是任意的文本数据。客户端可以通过 JavaScript API 监听这些事件，并在事件发生时做出相应的反应。
本文将介绍如何使用 SSE 实现实时交互。我们将从 SSE 的基本概念开始，然后讨论如何在客户端和服务器端实现 SSE，最后给出一个完整的示例代码。
SSE 的基本概念
SSE 是一种基于 HTTP 的协议。它使用了 HTTP 的长连接机制，也就是说，客户端向服务器发送一个 HTTP 请求，然后服务器一直保持连接，直到有数据要发送给客户端为止。这种机制与传统的轮询方式不同，轮询方式中，客户端需要不停地向服务器发送请求，服务器需要不停地响应请求，这样会产生很多的网络流量和服务器负载。
SSE 的数据格式是纯文本，它使用了一种叫做“事件流”的机制。服务器可以向客户端发送任意数量的事件，每个事件都是一个文本字符串，格式如下：
event: <event-name> data: <event-data>
其中，<event-name> 是一个可选的事件名称，如果指定了事件名称，客户端可以根据事件名称来区分不同的事件。<event-data> 是事件的数据，可以是任意的文本字符串，它可以包含任何类型的数据，例如 JSON 数据、HTML 片段等。
客户端可以通过 JavaScript API 来监听这些事件。具体来说，客户端需要创建一个 EventSource 对象，并指定服务器的 URL，例如：
var eventSource = new EventSource('/events');这里的 /events 是服务器端的 URL，它用来接收 SSE 事件。
客户端可以监听 message 事件来处理服务器发送的事件，例如：
eventSource.addEventListener('message', function(event) {
console.log('Received event:', event.data);
});这里的 event.data 就是服务器发送的事件数据。
在客户端实现 SSE
在客户端实现 SSE 非常简单，只需要创建一个 EventSource 对象，并指定服务器的 URL 即可。例如：
var eventSource = new EventSource('/events');这里的 /events 是服务器端的 URL。
客户端可以监听 message 事件来处理服务器发送的事件，例如：
eventSource.addEventListener('message', function(event) {
console.log('Received event:', event.data);
});这里的 event.data 就是服务器发送的事件数据。
在服务器端实现 SSE
在服务器端实现 SSE 也非常简单。服务器只需要保持与客户端的连接，并不断地发送事件即可。例如，在 Node.js 中，可以使用 http 模块来实现 SSE，代码如下：
-- -------------------- ---- -------
--- ---- - ----------------
----------------------------------- --------- -
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
--------------------- - - --- ------ - --------
-- ------
----------------这里的 response.writeHead 方法用来设置 HTTP 响应头，它指定了 SSE 的 MIME 类型、缓存控制和连接类型。setInterval 方法用来定时发送事件，这里每隔一秒钟就发送一个事件。
完整示例代码
下面是一个完整的示例代码，它演示了如何在客户端和服务器端实现 SSE：
-- -------------------- ---- -------
-- ---------
--- ----------- - --- -----------------------
--------------------------------------- --------------- -
--------------------- -------- ------------
---
-- ---------
--- ---- - ----------------
----------------------------------- --------- -
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
--------------------- - - --- ------ - --------
-- ------
----------------在命令行中执行以下命令即可启动服务器：
node server.js
然后在浏览器中打开以下 URL：
http://localhost:8080/
你应该能看到浏览器控制台输出类似以下内容的信息：
Received event: data: Fri Jul 23 2021 11:05:22 GMT+0800 (中国标准时间) Received event: data: Fri Jul 23 2021 11:05:23 GMT+0800 (中国标准时间) Received event: data: Fri Jul 23 2021 11:05:24 GMT+0800 (中国标准时间) ...
这些信息表示服务器每隔一秒钟发送一个事件，事件的数据是当前时间。
结论
使用 SSE 可以轻松地实现实时交互功能，它比传统的轮询方式更加高效和可靠。在实际开发中，我们可以将 SSE 应用于各种 Web 应用程序，例如聊天应用、股票市场应用等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674675a8158934bddec19d88