SSE 断开重连失败的问题解决方案-JavaScript中文网-JavaScript教程资源分享门户

前言

Server-Sent Events（SSE）是一种 HTML5 技术，它通过 HTTP 协议和服务器保持连接，服务器可以主动向客户端发送事件信息。SSE 在前端开发中应用广泛，例如实时聊天、实时消息推送等场景。

然而，SSE 的一个常见问题是断开重连失败，即在网络不稳定或服务器主动断开连接时，前端无法重新建立 SSE 连接，导致实时通信无法继续。下面将探讨 SSE 断开重连失败的原因及解决方案。

SSE 断开重连失败的原因

SSE 断开重连失败的原因常常是由于浏览器缓存导致的。默认情况下，浏览器将缓存上一次 SSE 连接的最后一个事件标识符（lastEventId），当重新建立 SSE 连接时会在请求头中带上该标识符，以此来继续上一次的事件流。但如果服务器此时已经不再发送事件，浏览器将会一直等待，直到超时断开连接，而无法重新建立连接。

SSE 断开重连失败的解决方案

方案一：在关闭 SSE 连接时，服务器返回一个特殊的事件

可以在服务器发送一个特殊的事件来告诉客户端 SSE 连接已经关闭，例如：

event: close
data: Connection closed

在客户端接收到该事件时，关闭 SSE 连接并发起新的连接。

服务器端代码示例（Node.js）：

res.write('event: close\ndata: Connection closed\n\n');
res.end();

客户端代码示例：

// javascriptcn.com 代码示例
const eventSource = new EventSource('/sse');

eventSource.onmessage = function(event) {
  console.log(event);
};

eventSource.addEventListener('close', function(event) {
  eventSource.close();
  setTimeout(function() {
    const newEventSource = new EventSource('/sse');
  }, 3000); // 3 秒后重新建立 SSE 连接
});

方案二：在客户端手动清除缓存的 lastEventId

在客户端新建 SSE 连接时，手动清除浏览器缓存的 lastEventId，以保证每次都能从头开始接收事件数据。可以通过使用 XMLHttpRequest 的方式获取 SSE 数据，而不是直接通过 EventSource，因为在 XMLHttpRequest 中可以清除请求头中的 lastEventId。示例代码：

// javascriptcn.com 代码示例
let lastEventId = null;

function connect() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/sse');

  if (lastEventId) {
    xhr.setRequestHeader('Last-Event-ID', lastEventId);
  }

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      const lines = xhr.responseText.split('\n');
      let event = null;

      for (let i = 0; i < lines.length; i++) {
        const line = lines[i];

        if (line.indexOf('event:') === 0) {
          event = new Event(line.substring(6).trim());
        } else if (line.indexOf('data:') === 0) {
          event.data = line.substring(5).trim();
        } else if (line.indexOf('id:') === 0) {
          event.lastEventId = line.substring(3).trim();
        } else if (line === '') {
          if (event) {
            lastEventId = event.lastEventId;
            onSSEMessage(event);
          }
        }
      }

      setTimeout(function() {
        connect();
      }, 500);
    }
  };

  xhr.send();
}

connect();

方案三：在客户端使用 WebSocket

WebSocket 是一种双向通信协议，在前端通信中应用广泛。与 SSE 不同，WebSocket 可以自定义协议并发送双向数据，也可以控制连接的建立和关闭。

WebSocket 的代码示例如下：

// javascriptcn.com 代码示例
const webSocket = new WebSocket('ws://localhost:8080');

webSocket.onopen = function(event) {
  console.log('WebSocket opened:', event);
};

webSocket.onmessage = function(event) {
  console.log('WebSocket message:', event);
};

webSocket.onclose = function(event) {
  console.log('WebSocket closed:', event);
};

webSocket.onerror = function(error) {
  console.log('WebSocket error:', error);
};

总结

以上是 SSE 断开重连失败问题的解决方案。方案一是在服务器主动关闭 SSE 连接时，返回一个特殊的事件，以通知客户端关闭连接并重新建立连接。方案二是在客户端手动清除浏览器缓存的 lastEventId，以保证每次都能从头开始接收事件数据。方案三是使用 WebSocket，通过双向通信协议来解决 SSE 的问题。

需要注意的是，在使用 SSE 和 WebSocket 时，要防止服务器返回过大的消息，以及断网等异常情况的处理，以保证实时通信的稳定性。

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