简介
在 Web 应用程序中，客户端和服务器之间的数据交换是非常常见的。在过去，这通常通过轮询或长轮询来实现。然而，这种方法存在一些问题，比如效率低下、延迟高等等。为了解决这些问题，HTML5 引入了一种新的技术：Server-sent Events (SSE)。
SSE 是一种单向的、持续的数据传输方式，它允许服务器向客户端发送事件流，而客户端可以通过事件监听器来接收这些事件。SSE 的优点在于它能够实现实时数据更新，同时也能够减少网络流量和服务器负载。
在本文中，我们将深入探讨 SSE 规范的所有细节，包括 SSE 的基本用法、事件流的格式、连接的生命周期等等。我们还将提供一些示例代码来帮助读者更好地理解 SSE 的实现方式。
基本用法
SSE 的基本用法非常简单。首先，服务器需要设置一个 HTTP 响应头，告诉客户端它将发送 SSE 事件流。这个响应头的字段名为 "Content-Type"，字段值为 "text/event-stream"。例如：
HTTP/1.1 200 OK Content-Type: text/event-stream
接下来，服务器可以向客户端发送一系列的事件。每个事件都以 "data" 字段开始，后面跟着一个或多个数据行。例如：
data: Hello, world!\n\n
这个事件包含了一行数据 "Hello, world!"。注意，每个事件都必须以两个换行符（"\n\n"）结尾，表示这个事件已经结束了。客户端可以通过监听 "message" 事件来接收这些事件。例如：
var source = new EventSource('/events');
source.addEventListener('message', function(event) {
console.log(event.data);
}, false);这段代码创建了一个 EventSource 对象，它会向 "/events" 路径发送 SSE 事件流。当客户端接收到事件时，它会触发 "message" 事件，并将事件数据作为参数传递给回调函数。
事件流的格式
除了 "data" 字段之外，SSE 事件流还可以包含其他字段。下面是 SSE 事件流的格式：
-- -------------------- ---- ------- ------ ------------ --- ---------- ------ ------------ ----- ------------ ------ ------------ --- ---------- ------ ------------ ----- ------------ ---
每个事件都以 "event" 字段开始，后面跟着事件名称。如果没有指定事件名称，则默认为 "message"。事件名称一般用于区分不同类型的事件，比如 "login"、"logout" 等等。
接下来，可以使用 "id" 字段来指定事件的唯一标识符。这个标识符可以用于客户端重新连接时，服务器可以通过这个标识符来判断客户端是否已经收到了之前的事件。
如果客户端在指定时间内没有收到任何事件，则可以通过 "retry" 字段来指定服务器重新发送事件的时间间隔。
最后，每个事件都必须以 "data" 字段结束，后面跟着一个或多个数据行。
连接的生命周期
SSE 连接的生命周期包括三个阶段：连接建立、连接维持和连接关闭。
在连接建立阶段，客户端向服务器发送一个 HTTP 请求，请求 SSE 事件流。服务器在响应中设置 "Content-Type" 头为 "text/event-stream"，并且发送一个或多个事件。这些事件可以包含一些元数据，比如 "id"、"retry" 等等。客户端可以通过监听 "open" 事件来判断连接是否建立成功。例如：
var source = new EventSource('/events');
source.addEventListener('open', function(event) {
console.log('Connection opened');
}, false);在连接维持阶段，服务器会定期发送事件。客户端可以通过监听 "message" 事件来接收这些事件。如果客户端在指定时间内没有收到任何事件，则可以通过 "retry" 字段来指定服务器重新发送事件的时间间隔。例如：
var source = new EventSource('/events');
source.addEventListener('message', function(event) {
console.log(event.data);
}, false);在连接关闭阶段，客户端或服务器可以关闭连接。客户端可以通过监听 "error" 事件和 "close" 事件来判断连接是否关闭。例如：
var source = new EventSource('/events');
source.addEventListener('error', function(event) {
console.log('Connection error');
}, false);
source.addEventListener('close', function(event) {
console.log('Connection closed');
}, false);示例代码
下面是一个简单的 SSE 示例代码，它会向客户端发送一个计数器事件，每隔一秒钟增加一次计数器值。客户端会在接收到事件时更新页面上的计数器。
服务器端代码：
-- -------------------- ---- -------
----- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- ----- - --
---------------------- -
---------------- - - ----- - --------
--------
-- ------
----------------客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------------
-------
------
---- --------------------
--------
--- ------ - --- -----------------------
---------------------------------- --------------- -
-------------------------------------------- - -----------
-- -------
---------
-------
-------总结
在本文中，我们深入探讨了 SSE 规范的所有细节，包括 SSE 的基本用法、事件流的格式、连接的生命周期等等。我们还提供了一些示例代码来帮助读者更好地理解 SSE 的实现方式。相信通过阅读本文，读者已经对 SSE 有了更深入的了解，并可以在实际开发中使用 SSE 技术来构建更高效、更实时的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651407ff95b1f8cacdc81847