如何使用 Node.js 实现基于 Server-Sent Events 的消息推送-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 Web 应用程序中，消息推送已经成为了一个必不可少的功能。随着 WebSocket 的出现，我们可以很方便地实现实时通信。但对于一些简单的场景来说，WebSocket 可能显得过于复杂。这时候，使用 SSE (Server-Sent Events) 可能是比较合适的选择。

SSE 是一种单向、持久连接的协议，它允许服务器不断向客户端发送消息。SSE 使用 HTTP 连接，因此可以在几乎所有现代浏览器上使用。本文将介绍如何使用 Node.js 实现 SSE，以实现服务器向客户端的实时消息推送。

实现 SSE

首先，我们需要创建一个 HTTP 服务器。在使用 SSE 时，我们需要设置响应头，以告知浏览器这是一个 SSE 连接。响应头中必须包括以下字段：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

下面是一个简单的 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',
  });

  // 客户端连接关闭时，关闭响应流
  req.on('close', () => {
    res.end();
  });
});

server.listen(3000);
console.log('SSE server is listening on port 3000');

上述代码中，我们设置了响应头，当客户端连接关闭时，我们关闭响应流。现在，我们已经可以创建一个 SSE 服务器了，但我们还需要向客户端发送消息。

向客户端发送消息

SSE 的协议规定，每个消息以 event: eventName 开头，以 data: eventData 结尾。消息可以包含多个事件，每个事件使用相同的格式。

下面是向客户端发送消息的代码：

// 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',
  });

  // 发送消息
  setInterval(() => {
    const message = `event: testEvent\ndata: ${new Date().toISOString()}\n\n`;
    res.write(message);
  }, 1000);

  // 客户端连接关闭时，关闭响应流
  req.on('close', () => {
    res.end();
  });
});

server.listen(3000);
console.log('SSE server is listening on port 3000');

上述代码中，我们在 setInterval 中，向客户端发送 testEvent 事件，并携带当前时间戳数据。event 和 data 字段是 SSE 协议的规定字段，通过在每条消息中设置，我们就能向客户端传递数据了。

现在，我们已经成功地向客户端发送了 SSE 消息，但是客户端还没有能够获取到消息。

客户端处理 SSE 消息

在客户端，我们可以使用 JavaScript 的 EventSource 接口，监听 SSE 服务器的消息。

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

eventSource.addEventListener('testEvent', (event) => {
  console.log(event.data);
});

上述代码中，我们使用 EventSource 接口，连接 SSE 服务器，并监听 testEvent 事件。当服务器发送 testEvent 事件时，addEventListener 回调函数将被执行，并打印事件携带的数据。

总结

本文介绍了如何使用 Node.js 实现 SSE，以实现服务器向客户端的实时消息推送。要使用 SSE，我们需要创建一个 HTTP 服务器，并设置 SSE 协议规定的响应头。向客户端发送消息时，每条消息应该包含事件名称和携带的数据。客户端可以通过 EventSource 接口监听服务器的 SSE 消息。本文中，我们演示了 SSE 的基本用法，你可以根据实际需求，进一步扩展。

完整源码：https://github.com/wenguang81/Node.js-SSE-Demo。

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