SSE 中的持久连接问题及解决方法-JavaScript中文网-JavaScript教程资源分享门户

SSE（Server-Sent Events）是一种支持从服务器端向客户端发送实时消息的传输协议。它与 WebSockets 相似，但比 WebSockets 更加简单明了，适用于那些不需要双向通信的场景。在使用 SSE 时，一个重要的问题就是如何维持持久连接，以保证消息能够实时地传递。本文将介绍 SSE 中的持久连接问题及解决方法，并给出示例代码。

什么是 SSE？

SSE 是一种基于 HTTP 协议的实时通信机制，它允许服务器将消息发送到客户端，而无需客户端发起请求。SSE 运行在现代浏览器上，并使用了文本流传输协议。SSE 支持断线重连机制，能够保持良好的性能，因此被广泛地应用于实时通信、即时聊天等场景。

持久连接问题

SSE 中的持久连接问题主要是指连接断开的情况。在 SSE 中，浏览器会向服务器端发送一条请求，然后服务器会在响应中建立一个持久连接。随着时间的推移，这个持久连接可能会由于网络问题、服务器重启等原因而被断开。如果没有及时地发现并处理这个问题，浏览器将不再能够接收到服务器发送的实时消息。

解决方法

为了解决 SSE 中持久连接可能断开的问题，我们需要采取一些措施来检测连接是否已经断开，并及时地重新建立连接。下面是几个常用的解决方法：

1. 心跳机制

通过定时向服务器发送请求，客户端可以检测连接是否正常。如果一段时间内没有收到服务器的响应，客户端可以认为连接已经断开。在这种情况下，客户端需要重新向服务器发起连接请求。

示例代码如下：

// javascriptcn.com 代码示例
var source = new EventSource('/stream');
var timer = setTimeout(function() {
  if (source.readyState !== EventSource.OPEN) {
    // 连接已经断开，需要重新建立连接
    source.close(); // 关闭旧连接
    source = new EventSource('/stream'); // 创建新连接
  }
}, 30000); // 每隔 30 秒发送一次请求

source.onopen = function() {
  clearTimeout(timer); // 取消计时器，说明连接已经成功建立
};

source.onerror = function() {
  // 连接出现错误，需要重新建立连接
  source.close(); // 关闭旧连接
  source = new EventSource('/stream'); // 创建新连接
};

在上面的示例中，我们通过每隔 30 秒发送一次请求的方式检测连接是否正常。如果超过一定时间没有收到服务器的响应，就认为连接已经断开。在连接断开时，我们关闭旧连接，然后重新创建一个新连接。

2. 服务器端检测

通过在服务器端持续不断地向客户端发送消息，可以检测连接是否正常。如果服务器端一段时间内都没有收到来自客户端的响应，就认为连接已经断开。在这种情况下，服务器端可以主动关闭连接，或者发送一条特殊的消息告知客户端连接已经断开。

示例代码如下：

// javascriptcn.com 代码示例
// 服务器端代码（仅示意，不可运行）
function sendSSEMessage(res) {
  res.write('data: hello world\n\n');

  setTimeout(function() {
    if (res.finished) {
      // 连接已经关闭，不需要进行处理
    } else {
      // 连接还在，继续发送消息
      sendSSEMessage(res);
    }
  }, 30000); // 每隔 30 秒发送一次消息
}

// 客户端代码
var source = new EventSource('/stream');

source.onmessage = function(event) {
  if (event.data === 'disconnect') { // 服务器发送的特殊消息
    // 连接已经断开，需要重新建立连接
    source.close(); // 关闭旧连接
    source = new EventSource('/stream'); // 创建新连接
  }
};

在上面的示例中，服务器端不断地向客户端发送消息。如果服务器端在一段时间内都没有收到来自客户端的响应，就认为连接已经断开。在这种情况下，服务器端可以关闭连接，或者发送一条特殊的消息告知客户端连接已经断开。客户端在收到这条消息后，就需要重新建立连接。

3. WebSocket 转 SSE

通过在服务器端实现 WebSocket 转 SSE 的功能，可以使 SSE 得到更好的支持。在这种情况下，WebSocket 与 SSE 共享同一个连接，客户端可以同时监听 WebSocket 和 SSE，从而可以更加方便地处理连接断开的问题。

示例代码如下：

// javascriptcn.com 代码示例
// 服务器端代码（使用 Node.js + ws 库）
const WebSocket = require('ws');
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'
  });
});

const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
  const stream = createSSEStream(ws);

  ws.on('message', function incoming(message) {
    // 处理 WebSocket 消息
  });

  ws.on('close', function close() {
    // WebSocket 连接关闭
    stream.pushMessage('disconnect');
    stream.end();
  });
});

function createSSEStream(ws) {
  const stream = new SSEStream();

  ws.on('message', function incoming(message) {
    // 处理 WS 消息
  });

  ws.on('close', function close() {
    // WebSocket 连接关闭
    stream.pushMessage('disconnect');
    stream.end();
  });

  stream.pipe(ws);
  return stream;
}

class SSEStream extends require('stream').Readable {
  _read() { }

  pushMessage(data) {
    if (!this.push(`data: ${JSON.stringify(data)}\n\n`)) {
      this._readableState.awaitDrain = true;
    }
  }
}

在上面的示例中，我们使用了 Node.js 和 ws 库，创建了一个 WebSocket 服务器。我们还实现了一个 SSEStream 类，它通过 Node.js 的 Stream 实现，将数据流转换为 SSE 格式，并通过 WebSocket 与客户端通信。在客户端实现时，我们可以同时监听 WebSocket 和 SSE，以便更加方便地处理连接断开的问题。

总结

本文介绍了 SSE 中的持久连接问题及解决方法。我们可以通过心跳机制、服务器端检测和 WebSocket 转 SSE 等方式来解决这个问题。我们在实际开发中应该仔细地考虑这些问题，并选择合适的解决方法来提高 SSE 的性能和可靠性。

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