透过Node.js的Server-Side Events 深入探索服务端推送

2024-02-15 20:20:24

Node.js 中的 Server-Side Events

在Web开发中，Server-Side Events(SSE)是一种轻量级技术，它允许服务器向已建立的连接持续推送事件。使用SSE，服务器可以将数据变化或更新实时发送给连接的客户端，而无需客户端主动发起请求。这使得SSE成为构建实时应用的理想选择，例如股票行情、聊天室或社交媒体更新。

SSE 的工作原理

SSE的工作原理非常简单：

客户端与服务器建立连接，通常是通过HTTP长轮询或WebSocket。
服务器向客户端发送一个特殊的HTTP头信息"Content-Type: text/event-stream"，表明这是一个SSE连接。
服务器开始向客户端发送事件数据，每个事件由以下部分组成：
- 事件类型：标识事件类型，例如"message"或"update"。
- 数据：事件相关的数据。
- 注释：可选的注释信息。
客户端接收事件数据并对其进行处理，例如更新用户界面或播放声音。

SSE 与 WebSocket 的对比

SSE 和 WebSocket都是服务器端推送技术，但它们有一些关键区别：

协议： SSE 基于HTTP协议，而 WebSocket 是一个独立协议。这意味着 SSE 可以使用现有的HTTP基础设施，而WebSocket需要额外的配置和支持。
连接： SSE使用HTTP长轮询或WebSocket建立连接，而 WebSocket 使用TCP连接。这使得WebSocket在延迟方面比SSE更具优势。
数据格式： SSE使用文本格式发送数据，而 WebSocket可以使用文本或二进制格式发送数据。这使得WebSocket在传输大量二进制数据时更有效。

使用 Node.js 开发 SSE 服务

以下是如何使用Node.js开发SSE服务的步骤：

安装必要的软件包：

npm install express event-stream

创建一个Node.js服务器：

const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

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

app.listen(3000);

在客户端建立SSE连接：

const EventSource = window.EventSource;

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

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