前后端实时通讯神器 - Server-Sent Events-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用中，实时通讯已经成为了一个非常重要的需求。而 Server-Sent Events（SSE）正是一种非常优秀的前后端实时通讯解决方案。SSE 可以让服务器向客户端推送数据，而且还支持断线自动重连、自定义事件等多种特性，非常适合用于实现实时通知、实时消息、实时进度等场景。

SSE 基础

SSE 的基本原理是通过 HTTP 协议建立一条长连接，使服务器可以向客户端推送数据。SSE 是基于纯文本的，数据格式为一系列的事件流（Event Stream），每个事件流由多行文本组成，以空行（\n\n）作为事件流的结束符。其中第一行是事件类型（event），其余行为事件数据（data）。

客户端可以通过 JavaScript 中的 EventSource 对象来与 SSE 服务端进行通信。下面是一个简单的 SSE 服务端示例：

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

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  res.write('event: message\n');
  res.write('data: hello world\n\n');
});

server.listen(3000, () => {
  console.log('SSE server is running on http://localhost:3000');
});

上面的代码创建了一个 HTTP 服务器，当客户端请求该服务器时，返回一个 SSE 数据流。其中 Content-Type 设置为 text/event-stream，告诉浏览器这是一个 SSE 数据流；Cache-Control 设置为 no-cache，告诉浏览器不要缓存 SSE 数据；Connection 设置为 keep-alive，告诉浏览器保持长连接。

这里定义了一个事件类型为 message，事件数据为 hello world。浏览器收到 SSE 数据后，会自动触发 message 事件，并将 hello world 作为事件数据传递给监听该事件的 JavaScript 代码。

下面是一个简单的 SSE 客户端示例：

const es = new EventSource('http://localhost:3000');

es.addEventListener('message', (event) => {
  console.log(event.data);
});

上面的代码创建了一个 EventSource 对象，指定 SSE 服务端的 URL。当服务端向客户端推送数据时，会触发 message 事件。在该事件处理函数中，可以通过 event.data 获取到服务端推送的数据。

SSE 进阶

除了基本的 SSE 特性外，SSE 还支持一些进阶的特性，包括：

自定义事件类型

除了默认的 message 事件类型外，SSE 还支持自定义事件类型。客户端可以通过 eventSource.addEventListener(eventType, listener) 方法来监听自定义事件类型。

服务端可以通过 event 字段来指定事件类型，如下所示：

res.write('event: customEvent\n');
res.write('data: hello world\n\n');

上面的代码指定了一个自定义事件类型为 customEvent，事件数据为 hello world。客户端在监听该事件时，可以通过 eventSource.addEventListener('customEvent', listener) 来进行监听。

断线自动重连

SSE 还支持断线自动重连特性。当 SSE 连接断开时，客户端会自动发起重连请求。服务端可以通过 retry 字段来指定重连的时间间隔（单位为毫秒），如下所示：

res.write('retry: 5000\n');

上面的代码指定了断线自动重连的时间间隔为 5 秒。

多路复用

SSE 还支持多路复用特性。通过在 URL 后面添加查询参数来区分不同的 SSE 通道。客户端可以通过 new EventSource(url) 中的 URL 来指定 SSE 通道。

服务端可以通过 req.url 来获取 URL 中的查询参数，从而区分不同的 SSE 通道，如下所示：

// javascriptcn.com 代码示例
const server = http.createServer((req, res) => {
  const channel = req.url.split('?')[1];
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  res.write(`event: message\n`);
  res.write(`data: hello ${channel}\n\n`);
});

上面的代码通过查询参数来区分 SSE 通道，将 hello ${channel} 作为事件数据返回给客户端。

SSE 应用

SSE 可以应用于很多场景，包括实时通知、实时消息、实时进度等。下面是一个简单的实时消息应用示例：

服务端代码：

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

const server = http.createServer((req, res) => {
  const channel = req.url.split('?')[1];
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  setInterval(() => {
    res.write(`event: message\n`);
    res.write(`data: hello ${channel} ${Date.now()}\n\n`);
  }, 1000);
});

server.listen(3000, () => {
  console.log('SSE server is running on http://localhost:3000');
});

客户端代码：

// javascriptcn.com 代码示例
const es1 = new EventSource('http://localhost:3000?channel=1');
const es2 = new EventSource('http://localhost:3000?channel=2');

es1.addEventListener('message', (event) => {
  console.log(`channel 1: ${event.data}`);
});

es2.addEventListener('message', (event) => {
  console.log(`channel 2: ${event.data}`);
});

上面的代码创建了两个 SSE 通道，分别监听 channel=1 和 channel=2 的消息。服务端会每秒钟向客户端推送一条消息，消息内容包括通道编号和当前时间戳。客户端在接收到消息后，会将消息内容输出到控制台。

总结

SSE 是一种非常优秀的前后端实时通讯解决方案，具有简单、实用、灵活等特点。在实际应用中，可以根据具体的需求来选择不同的 SSE 特性，如自定义事件类型、断线自动重连、多路复用等。希望本文对你了解 SSE 有所帮助。

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