Server-sent Events（SSE）的断线重连机制及实现方法

简介

Server-sent Events（SSE）是一种用于在客户端浏览器与服务器之间实现实时通信的技术，它可以让服务器向客户端主动推送数据，而不需要客户端通过轮询或者长连接等方式不断地向服务器发送请求。SSE 与 WebSocket 技术类似，但是相对于 WebSocket 技术而言，SSE 更加轻量级，且更容易实现。

SSE 的优点在于它可以让客户端与服务器之间建立一个持久连接，从而实现实时通信，而且 SSE 可以在大多数现代浏览器中实现，不需要引入额外的库或者框架。

然而，SSE 也有一个不足之处，那就是在某些情况下，连接可能会断开，这时候就需要通过断线重连机制来保证连接的稳定性。

断线重连机制

SSE 的断线重连机制可以分为两种，一种是浏览器端的断线重连机制，另一种是服务器端的断线重连机制。

浏览器端的断线重连机制

在 SSE 中，浏览器端可以通过监听 EventSource 对象的 onerror 事件来实现断线重连机制。当连接断开时，onerror 事件会被触发，这时候我们可以在 onerror 事件处理函数中重新建立连接。

以下是一个简单的示例：

// www.javascriptcn.com code example
const source = new EventSource('/sse');
source.onmessage = function(event) {
  console.log(event.data);
};
source.onerror = function(event) {
  console.log('Connection lost, reconnecting...');
  setTimeout(() => {
    source = new EventSource('/sse');
  }, 1000);
};

在上面的代码中，当连接断开时，onerror 事件处理函数会被触发，我们可以在这个处理函数中重新建立连接，并且延迟一段时间，以避免频繁地重连。

服务器端的断线重连机制

在 SSE 中，服务器端也可以通过发送特定的消息来实现断线重连机制。当连接断开时，服务器端可以发送一个特定的消息，告诉客户端需要重新建立连接。

以下是一个简单的示例：

// www.javascriptcn.com code example
function sendEvent(res, data) {
  res.write('data: ' + JSON.stringify(data) + '\n\n');
}

function sendPing(res) {
  res.write(': ping\n\n');
}

function sendReconnect(res) {
  res.write('event: reconnect\ndata: {}\n\n');
}

function handleConnection(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  let intervalId = setInterval(() => {
    sendPing(res);
  }, 1000);

  req.on('close', () => {
    clearInterval(intervalId);
  });

  sendEvent(res, { message: 'Hello World!' });

  setTimeout(() => {
    sendReconnect(res);
  }, 5000);
}

const server = http.createServer(handleConnection);
server.listen(3000);

在上面的代码中，当连接断开时，服务器端会发送一个 reconnect 事件，告诉客户端需要重新建立连接。客户端可以在接收到这个事件后，重新建立连接。

实现方法

以下是一个完整的 SSE 断线重连的实现方法：

// www.javascriptcn.com code example
function createEventSource(url) {
  let source = null;
  let reconnectInterval = 1000;

  function connect() {
    source = new EventSource(url);

    source.onopen = function(event) {
      console.log('Connection opened.');
    };

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

    source.onerror = function(event) {
      console.log('Connection lost, reconnecting...');
      setTimeout(() => {
        connect();
      }, reconnectInterval);
    };
  }

  connect();

  return source;
}

const source = createEventSource('/sse');

在上面的代码中，我们定义了一个 createEventSource 函数，它会返回一个 EventSource 对象，同时也实现了断线重连机制。当连接断开时，我们会在 onerror 事件处理函数中重新建立连接，并且延迟一段时间，以避免频繁地重连。

指导意义

SSE 的断线重连机制是一个非常重要的机制，它可以保证连接的稳定性，从而实现实时通信。在实际开发中，我们需要根据具体的需求，选择合适的断线重连机制，以保证连接的稳定性。

同时，我们也需要注意一些细节问题，比如延迟时间的设置、服务器端发送消息的格式等等。只有在细节方面做到了严谨，才能够保证 SSE 的稳定性和可靠性。

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