在 Web 开发中，客户端（浏览器）与服务器之间的通讯是至关重要的。为了构建一个可靠的通讯渠道，开发人员通常需要使用特定的技术和协议。在本文中，我们将介绍 Server-sent Events (SSE) 技术，它是一种 HTML5 API，用于将服务器发出的数据实时推送到客户端。
SSE 概述
SSE 是一种单向通讯协议，用于将服务器推送的事件流（Event Stream）实时传递给 Web 应用程序。SSE 与 WebSocket 不同，WebSocket 提供了双向通信，而 SSE 只提供了单向通信。由于 SSE 协议只用于服务器到客户端的通信，因此服务器可以根据需要发送多个事件流。客户端可以订阅任意数量的事件流，并且可以随时取消订阅。
要使用 SSE，您需要创建一个连接到服务器的 EventSource。一旦连接成功，EventSource 将自动开始接收服务器的事件流。每个事件流都由一个标识符（id），可选的事件类型（event）和数据（data）组成。事件类型和数据格式是任意的，可以由开发人员根据项目需要自由定义。
由于 SSE 是基于 HTTP 的，因此可以与现有的 Web 应用程序和基础设施一起使用。这意味着您不需要配置新的端口或协议，任何基于 HTTP 的服务器都可以使用 SSE。
建立 SSE 连接
要创建 SSE 连接，请使用 EventSource 对象。EventSource 对象可以指向服务器端的一个 URL，并启动一个长期的 HTTP 连接。服务器将在需要时不断地向客户端发送更新。下面是创建 EventSource 对象的基本语法：
var eventSource = new EventSource(url)
URL 参数是服务器的地址，用于发送事件流。
要从服务器接收事件，必须注册 EventSource 的 message 事件处理程序。每次服务器发送事件时，此处理程序都将被触发。可以在 event 参数中找到事件类型，data 参数中包含了事件流的正文。
例如，在下面的示例中，我们将创建一个 EventSource 对象，并使用 message 处理程序显示来自服务器的事件流：
var eventSource = new EventSource('/eventsource');
eventSource.onmessage = function(event) {
console.log(event.data);
};服务器端实现
要发送 SSE 事件，服务器必须使用特定格式的数据流发送实时更新。服务器可以通过 HTTP 响应向客户端推送数据包。初始响应必须包含响应的“Content-Type”头字段的值为 “text/event-stream”。另外，服务器必须发送带有事件流数据的消息。事件流包含“event”和“data”字段，用于标识事件流的类型和数据。例如：
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- ----- ---- -- -- ------- ------ ------ ------- --- ---- ----- ------- ------ ------ ------------ --- ----
SSE 代码实例
下面是一个简单的 SSE 代码示例，它演示如何使用 SSE 在客户端和服务器之间建立实时通信。该示例创建一个计数器应用程序，客户端会每间隔一秒钟向服务器请求计数器值，服务器会将最新值推送回客户端。
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
--- ----- - --
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------------------------ ---
---
---------------------- -
-------------- - - ------- - ------
----------------- ------------
---------------- - - ----- - --------
-- ------
----------------在此示例中，我们启动了一个本地 Web 服务器，该服务器每秒钟都会向客户端推送一个计数器值。在每个事件流中，我们使用“id”字段指定了事件流的唯一标识符，并使用“event”字段指定了事件类型。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------- ---------------
-------
------
------- ------- ------------
---- -------------------
--------
--- ------- - -----------------------------------
--- ----------- - --- -------------------------------------
--------------------------------------- --------------- -
--- ---- - -----------------------
----------------- - -----
-- -------
---------
-------
-------在此示例中，我们向服务器发出 SSE 请求，并在客户端接收到事件时将其显示在网页上。由于事件是计数器增量，因此我们可以通过将其更新到网页上来展示其实时更新。
总结
在本文中，我们介绍了 SSE 技术，它是一种 HTML5 API，用于将服务器发出的数据实时推送到客户端。SSE 可以建立单向、可靠的客户端-服务器通讯，与 WebSocket 不同，SSE 只提供了单向通讯。SSE 可以与现有的基础设施和服务器一起使用，因此无需额外配置。最后，我们提供了一个简单的代码示例，以演示如何使用 SSE 进行实时通讯。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e85541f6b2d6eab33dbf17