在 Node.js 中使用 SSE 实现即时通讯的方法-JavaScript中文网-JavaScript教程资源分享门户

简介

Server-Sent Events (SSE) 是基于 HTTP 协议的一种服务器向客户端推送数据的技术。它可以实现服务器与客户端间的实时通信，广泛应用于在线聊天、实时数据更新等场景。本文将介绍在 Node.js 中如何使用 SSE 实现即时通讯的方法。

SSE 的特点

SSE 是一种简单、轻量级的技术，与 WebSocket 相比，它具有以下特点：

基于 HTTP 协议，不需要额外的端口或协议；
支持跨域访问；
支持自定义事件类型，可以根据事件类型来推送不同类型的数据；
可以实现简单的客户端错误处理，如连接断开等。

实现 SSE

下面我们将介绍在 Node.js 中使用 SSE 实现即时通讯的方法。首先，我们需要创建一个 HTTP 服务器，并在服务器端接收客户端的请求。

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

const server = http.createServer();

server.on('request', (req, res) => {
  // 处理客户端请求
});

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

在处理客户端请求时，我们可以根据请求的路径来判断客户端需要接收哪些数据。例如，如果客户端请求路径为 /stream，则说明客户端需要接收实时数据流。

server.on('request', (req, res) => {
  if (req.url === '/stream') {
    // 处理 SSE 请求
  }
});

下面，我们就可以开始使用 SSE 技术来向客户端发送数据了。在使用 SSE 技术时，需要注意以下几点：

使用 HTTP 206 状态码来表示 SSE 数据流；
使用 text/event-stream MIME 类型来表示 SSE 数据流；
在发送数据时，需要按照一定的格式来发送数据。

具体来说，每个消息都应该包含以下三个字段：

event：可选字段，用于表示事件类型；
data：表示要发送的数据；
id：可选字段，用于表示消息的编号。

一个简单的 SSE 数据流消息如下所示：

data: Hello, world!\n\n

其中，\n\n 表示消息结束。

接下来，我们可以编写一个简单的 SSE 服务器来实现上述功能：

// javascriptcn.com 代码示例
server.on('request', (req, res) => {
  if (req.url === '/stream') {
    // 设置 HTTP 头部
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    // 发送 SSE 数据流
    setInterval(() => {
      const data = Date.now();
      res.write(`data: ${data}\n\n`);
    }, 1000);
  }
});

在上述代码中，我们使用 setInterval 定时向客户端发送数据流。每一次发送，都会向客户端发送一个包含当前时间戳的消息。

客户端使用

在客户端使用 SSE 技术时，需要使用 EventSource 对象来接收数据。EventSource 对象的使用非常简单，只需要指定要接收数据的路径即可。

// javascriptcn.com 代码示例
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SSE Demo</title>
  </head>
  <body>
    <h1>SSE Demo</h1>
    <p id="output"></p>
    <script>
      const source = new EventSource('/stream');
      source.onmessage = (event) => {
        const data = JSON.parse(event.data);
        const output = document.getElementById('output');
        output.innerHTML = data;
      };
    </script>
  </body>
</html>

在上述代码中，我们创建了一个名为 source 的 EventSource 对象，并指定了要接收数据的路径为 /stream。每当接收到数据时，我们就会更新页面中的输出。

总结

本文介绍了在 Node.js 中使用 SSE 技术实现即时通讯的方法。通过实现一个简单的 SSE 服务器和客户端，我们可以看到 SSE 技术的简单、轻量级和易用性优点。SSE 技术虽然不如 WebSocket 大规模应用，但在某些简单场景中仍具有一定的优势。

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