SSE 实现服务器端实时消息推送-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的发展，实时消息推送已经成为了现代 Web 应用程序的标配。传统的 HTTP 请求-响应模型无法满足实时消息推送的需求，因此出现了 SSE（Server-Sent Events）技术。SSE 是一种基于 HTTP 协议的服务器端推送技术，它可以实现服务器端实时向客户端推送消息。

SSE 的工作原理

SSE 的工作原理非常简单。客户端通过 HTTP 协议向服务器发送一个请求，请求的头部包含了 Accept: text/event-stream，表示客户端希望接收服务器端的事件流。服务器端收到请求后，会将事件流通过 HTTP 响应的方式返回给客户端。客户端通过监听 EventSource 对象的 onmessage 事件来接收服务器端推送的消息。

SSE 的事件流格式如下：

event: <event-name>
data: <event-data>

event: <event-name>
data: <event-data>

...

其中，event-name 表示事件名称，event-data 表示事件数据。每个事件通过空行分隔。

使用 SSE 实现服务器端实时消息推送

下面我们来看一下如何使用 SSE 实现服务器端实时消息推送。假设我们有一个在线聊天室应用程序，当有用户发送消息时，服务器需要实时将消息推送给所有在线用户。

首先，我们需要在服务器端创建一个 SSE 端点，用于处理客户端的 SSE 请求。代码如下：

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

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

    // TODO: 将客户端连接添加到连接池中

    res.write('\n');
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(3000);

在客户端连接到 SSE 端点时，我们需要将其添加到连接池中，以便在有新消息时可以将消息推送给所有在线用户。代码如下：

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

const connections = new Set();

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

    // 将客户端连接添加到连接池中
    connections.add(res);

    res.write('\n');
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(3000);

接下来，我们需要在服务器端监听新消息的事件，并将消息推送给所有在线用户。代码如下：

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

const connections = new Set();

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

    // 将客户端连接添加到连接池中
    connections.add(res);

    res.write('\n');
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(3000);

// 监听新消息的事件
const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

eventEmitter.on('new-message', (message) => {
  // 将消息格式化为事件流格式
  const event = `event: new-message\ndata: ${JSON.stringify(message)}\n\n`;

  // 将消息推送给所有在线用户
  connections.forEach((res) => {
    res.write(event);
  });
});

最后，我们需要在客户端监听 SSE 的 onmessage 事件，以接收服务器端推送的消息。代码如下：

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);

  // TODO: 处理新消息
};

总结

SSE 技术可以实现服务器端实时消息推送，是现代 Web 应用程序不可或缺的一部分。本文介绍了 SSE 的工作原理，并通过一个在线聊天室应用程序的示例代码演示了如何使用 SSE 实现服务器端实时消息推送。希望本文对大家有所帮助。

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