SSE API 的使用详解-JavaScript中文网-JavaScript教程资源分享门户

SSE（Server-Sent Events）API，即服务器推送事件，是一种轻量级实时通信协议。通过 SSE，可以实现服务器向客户端推送消息的功能，以及客户端可以在连接断开后自动重新建立连接的功能。

在前端开发中，SSE API 可以用来实现类似于聊天室、实时监控等功能。下面详细介绍 SSE API 的使用方法，包括事件的创建、连接的建立和断开，以及消息的推送和接收等方面。

SSE 事件的创建

在服务端，可以使用 EventSource 对象来创建 SSE 事件。EventSource 对象的构造函数如下：

var eventSource = new EventSource(url, config);

其中，url 是 SSE 事件的 URL 地址，config 是一个字典对象，用来配置连接的相关参数。

在创建 EventSource 对象时，可以传递一个可选的 event 和 id 参数。其中，event 参数用于指定需要监听的事件类型，id 参数用于指定事件的 ID。例如：

var eventSource = new EventSource('/sse', {
  event: 'message',
  id: '1234'
});

这样，服务端发送的消息会被标记为 ID 为 1234，类型为 'message' 的事件。

SSE 连接的建立和断开

当客户端请求 SSE 事件时，服务端应该返回一个正确的 MIME 类型。在大多数情况下，应该是 text/event-stream。例如：

HTTP/1.1 200 OK
Content-Type: text/event-stream

在建立连接后，服务端可以通过 write() 方法向客户端发送消息。例如：

response.write('data: Hello, world!\n\n');

在客户端，可以通过 EventSource 对象的 onopen 属性来监听连接建立事件。如下所示：

eventSource.onopen = function() {
  console.log('SSE connection opened.');
};

在客户端，可以通过 EventSource 对象的 onerror 属性来监听连接断开事件。如下所示：

eventSource.onerror = function() {
  console.log('SSE connection closed.');
};

SSE 消息的推送和接收

在服务端，推送消息时要满足一定的格式要求。每一个事件应该以以下格式进行发送：

event: <event-type>
id: <event-id>
data: <event-data>

其中，表示事件类型，表示事件 ID，表示事件数据。注意，每个字段的值必须以冒号+空格的形式与字段名分隔开来，并且每个字段之间必须用一个空行隔开。

在客户端，可以通过 EventSource 对象的 onmessage 属性来监听消息事件。如下所示：

eventSource.onmessage = function(event) {
  console.log('Received message:', event.data);
};

这里的 event.data 表示消息内容。

SSE 的使用示例

下面是一个简单的 SSE 使用示例。服务端代码如下所示：

// javascriptcn.com 代码示例
const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
  response.writeHead(200, {
    'Content-Type': 'text/event-stream'
  });

  setInterval(() => {
    const message = `data: ${new Date().toISOString()}\n\n`;
    response.write(message);
  }, 1000);
});

server.listen(8888);

这里使用 setInterval() 方法每隔 1 秒推送一个消息，消息内容是当前时间的 ISO 格式。

客户端代码如下所示：

const eventSource = new EventSource('http://localhost:8888/');

eventSource.onmessage = function(event) {
  console.log('Received message:', event.data);
};

这里使用 EventSource 对象连接服务端，并监听消息事件。每次接收到消息后，会将消息内容打印出来。

总结

本文介绍了 SSE API 的使用方法，包括事件的创建、连接的建立和断开，以及消息的推送和接收等方面。通过学习 SSE API 的使用，我们可以实现类似于聊天室、实时监控等功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6531d4e27d4982a6eb3cc0db