SSE 如何实现多路复用-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE

SSE（Server-Sent Events）是 HTML5 新增的一种协议，用于服务器向客户端推送数据。与 WebSocket 相比，SSE 的优势在于它使用了 HTTP 协议，不需要像 WebSocket 那样建立全双工通信的连接，而是通过持久化的 HTTP 连接实现了服务器向客户端的单向通信。

SSE 的多路复用

在 SSE 中，服务器可以向客户端推送多个事件流，每个事件流都对应一个 EventSource 对象。如果服务器向多个 EventSource 对象推送数据，就需要实现多路复用。下面介绍两种实现多路复用的方法。

方法一：使用多个 URL

最简单的方法是使用多个 URL，每个 URL 对应一个事件流。这种方法的优点是实现简单，缺点是需要在客户端创建多个 EventSource 对象，增加了网络连接的开销。

以下是示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE 多路复用</title>
</head>
<body>
  <h1>事件流 1</h1>
  <div id="event-stream-1"></div>
  <h1>事件流 2</h1>
  <div id="event-stream-2"></div>
  <script>
    var eventSource1 = new EventSource('/event-stream-1');
    var eventSource2 = new EventSource('/event-stream-2');
    eventSource1.onmessage = function(event) {
      document.getElementById('event-stream-1').innerHTML += event.data + '<br>';
    };
    eventSource2.onmessage = function(event) {
      document.getElementById('event-stream-2').innerHTML += event.data + '<br>';
    };
  </script>
</body>
</html>

服务器端代码如下：

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

http.createServer((request, response) => {
  if (request.url === '/event-stream-1') {
    response.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    setInterval(() => {
      response.write(`data: ${new Date().toISOString()}\n\n`);
    }, 1000);
  } else if (request.url === '/event-stream-2') {
    response.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    setInterval(() => {
      response.write(`data: ${Math.random()}\n\n`);
    }, 2000);
  } else {
    response.writeHead(404);
    response.end();
  }
}).listen(3000);

方法二：使用一个 URL

另一种方法是使用一个 URL，每个事件流都使用不同的事件类型。这种方法的优点是只需要创建一个 EventSource 对象，缺点是服务器需要根据事件类型来推送数据。

以下是示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE 多路复用</title>
</head>
<body>
  <h1>事件流</h1>
  <div id="event-stream"></div>
  <script>
    var eventSource = new EventSource('/event-stream');
    eventSource.addEventListener('time', function(event) {
      document.getElementById('event-stream').innerHTML += event.data + '<br>';
    });
    eventSource.addEventListener('random', function(event) {
      document.getElementById('event-stream').innerHTML += event.data + '<br>';
    });
  </script>
</body>
</html>

服务器端代码如下：

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

http.createServer((request, response) => {
  response.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  setInterval(() => {
    response.write(`event: time\ndata: ${new Date().toISOString()}\n\n`);
  }, 1000);
  setInterval(() => {
    response.write(`event: random\ndata: ${Math.random()}\n\n`);
  }, 2000);
}).listen(3000);

总结

SSE 是一种简单实用的服务器推送技术，它使用 HTTP 协议，不需要像 WebSocket 那样建立全双工通信的连接，而是通过持久化的 HTTP 连接实现了服务器向客户端的单向通信。实现 SSE 的多路复用有多种方法，本文介绍了两种方法，分别是使用多个 URL 和使用一个 URL。在实际应用中，可以根据具体情况选择合适的方法。

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