通过 SSE 实现实时通讯和消息推送功能-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 Web 应用程序中，实时通讯和消息推送功能已经变得越来越重要。这些功能可以帮助我们构建更加交互性和实时性的应用程序，例如在线聊天、即时通讯、实时数据可视化等。

在这篇文章中，我们将介绍如何使用 SSE（Server-Sent Events）技术实现实时通讯和消息推送功能。我们将详细讨论 SSE 的工作原理、如何在前端和后端实现 SSE，以及一些实际应用场景和示例代码。

SSE 的工作原理

SSE 是一种基于 HTTP 的实时通讯技术，它允许服务器向客户端发送事件流（Event Stream）。这些事件流可以包含任意类型的数据，例如文本、JSON、XML 等。客户端可以通过 JavaScript API 监听这些事件流，并在收到新事件时执行相应的操作。

SSE 的工作原理非常简单。客户端通过 HTTP 协议向服务器发送一个特殊的请求，该请求包含一个特殊的头部 Accept: text/event-stream。服务器接收到这个请求后，会保持连接打开，并不断地向客户端发送事件流。客户端通过 EventSource API 监听这些事件流，当有新事件到达时，会触发 onmessage 事件，从而执行相应的操作。

SSE 的优点在于它不需要建立长连接或者轮询，而是使用 HTTP 的长连接机制，从而能够实现低延迟和高效率的实时通讯。

在前端实现 SSE

在前端实现 SSE 非常简单。我们只需要使用 EventSource API 创建一个 SSE 对象，并通过 onmessage 事件监听服务器发送的事件流。例如：

const source = new EventSource('/api/events');

source.onmessage = function(event) {
  console.log(event.data);
};

上面的代码创建了一个 SSE 对象，然后监听 /api/events 路径的事件流。当有新事件到达时，会将事件的数据输出到控制台中。

需要注意的是，SSE 的请求必须使用 GET 方法，并且不能设置 Content-Type 头部。否则，浏览器会将请求视为普通的 AJAX 请求，并且无法保持连接打开。

在后端实现 SSE

在后端实现 SSE 的过程也非常简单。我们只需要使用某种编程语言和框架，向客户端发送事件流即可。下面是使用 Node.js 和 Express 框架实现 SSE 的示例代码：

// javascriptcn.com 代码示例
app.get('/api/events', function(req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');

  setInterval(function() {
    const data = { message: 'Hello, SSE!' };
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 1000);
});

上面的代码定义了一个路由 /api/events，当有客户端连接时，会不断地向客户端发送事件流。事件流的格式必须遵循 SSE 的规范，即以 data: 开头，以两个换行符结尾。数据可以是任意类型的，但通常使用 JSON 格式。

应用场景和示例代码

SSE 可以应用于各种实时通讯和消息推送场景。下面是一些示例代码，帮助你更好地理解 SSE 的应用：

实时股票行情

// javascriptcn.com 代码示例
app.get('/api/stock', function(req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');

  setInterval(function() {
    const price = Math.random() * 100;
    const data = { symbol: 'AAPL', price: price.toFixed(2) };
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 1000);
});

上面的代码定义了一个路由 /api/stock，当有客户端连接时，会不断地向客户端发送股票行情数据。数据包含股票代码和价格，每秒钟更新一次。

实时聊天应用

// javascriptcn.com 代码示例
const clients = [];

app.get('/api/chat', function(req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');

  const clientId = Date.now();
  const newClient = { id: clientId, res };
  clients.push(newClient);

  req.on('close', function() {
    console.log(`${clientId} Connection closed`);
    clients.splice(clients.indexOf(newClient), 1);
  });
});

app.post('/api/chat', function(req, res) {
  const { message } = req.body;

  clients.forEach(function(client) {
    const data = { id: client.id, message };
    client.res.write(`data: ${JSON.stringify(data)}\n\n`);
  });

  res.send('OK');
});

上面的代码定义了两个路由 /api/chat 和 /api/chat，分别用于客户端连接和发送消息。当客户端连接时，会将客户端的响应对象保存到一个数组中。当有新消息到达时，会向所有客户端发送消息数据。

总结

通过本文的介绍，我们了解了 SSE 技术的工作原理、如何在前端和后端实现 SSE，以及一些实际应用场景和示例代码。SSE 技术可以帮助我们构建更加交互性和实时性的应用程序，是现代 Web 开发中不可或缺的一部分。

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