Server-sent Events：从基础知识到高级应用程序-JavaScript中文网-JavaScript教程资源分享门户

什么是 Server-sent Events？

Server-sent Events（SSE）是一种服务器向客户端推送数据的技术。它是一种基于 HTTP 的协议，允许服务器发送单向的、持久的消息流到客户端。相比于传统的轮询方式，SSE 可以更加高效地实现实时通信，而且更加简单易用。

基础知识

SSE 的工作原理

SSE 的工作原理很简单，就是客户端通过 HTTP 连接到服务器，服务器保持连接打开，然后向客户端发送消息。客户端可以通过 JavaScript 代码监听服务器发送的消息，然后根据消息进行相应的处理。

SSE 的优势

SSE 相比于其他实时通信技术有以下优势：

简单易用：SSE 是基于 HTTP 的协议，不需要额外的插件或者库，可以直接使用浏览器内置的 API。
高效实时：SSE 采用了单向的持久连接，可以更加高效地实现实时通信，而且不会对服务器造成过大的负担。
可靠性高：SSE 的连接是基于 TCP 的，可以保证数据传输的可靠性。

SSE 的 API

SSE 的 API 主要有以下两个：

EventSource：用于连接到服务器并监听服务器发送的消息。
Server-Sent Events：用于定义服务器发送的消息的格式。

EventSource

EventSource 是浏览器内置的 API，用于连接到服务器并监听服务器发送的消息。它的基本用法如下：

const source = new EventSource(url);
source.onmessage = function(event) {
  console.log(event.data);
};

其中，url 是服务器的地址，onmessage 是监听消息的回调函数。

Server-Sent Events

Server-Sent Events 是一种定义服务器发送的消息格式的规范。它的基本格式如下：

event: event_name\n
data: message\n\n

其中，event_name 是消息的事件名称，可以为空；message 是消息的内容，可以是任意格式的数据。

高级应用程序

SSE 的断线重连

在实际应用中，SSE 的连接可能会因为网络问题或者其他原因断开，这时候需要进行断线重连。可以使用以下代码实现断线重连：

// javascriptcn.com 代码示例
function connect() {
  const source = new EventSource(url);
  source.onmessage = function(event) {
    console.log(event.data);
  };
  source.onerror = function(event) {
    source.close();
    setTimeout(connect, 1000);
  };
}
connect();

其中，onerror 是监听错误事件的回调函数，在发生错误时会关闭连接，然后调用 setTimeout 函数进行断线重连。

SSE 的多路复用

在实际应用中，可能需要同时监听多个事件，这时候可以使用 SSE 的多路复用功能。可以使用以下代码实现多路复用：

const source = new EventSource(url);
source.addEventListener('event1', function(event) {
  console.log(event.data);
});
source.addEventListener('event2', function(event) {
  console.log(event.data);
});

其中，addEventListener 方法可以添加多个事件监听器，可以同时监听多个事件。

总结

Server-sent Events 是一种非常实用的实时通信技术，它可以更加高效地实现实时通信，而且更加简单易用。本文介绍了 SSE 的基础知识和高级应用程序，希望对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65114fd895b1f8cacd9c1610