SSE如何实现断线重连？-JavaScript中文网-JavaScript教程资源分享门户

在开发基于服务端发送事件（SSE）的Web应用程序时，用户会在浏览器和服务器之间建立一个长时间连接。这个连接可以允许服务器在需要时向浏览器推送数据，而不需要刷新整个页面。但是，由于网络故障和几种其他问题，这种连接可能会中断。在本文中，我们将讨论如何通过SSE实现断线重连。

什么是SSE？

SSE代表服务端发送事件。它是一种轻量级的协议，允许Web应用程序从服务器端接收数据。SSE是HTTP协议的一部分，因此它具有当前HTTP协议所具有的所有功能，如HTTP鉴定和Cookie管理。这样，我们可以使用现有的HTTP服务器基础架构，并将其用于使用SSE的Web应用程序。

##如何实现SSE？

要实现SSE，我们需要在客户端创建一个EventSource对象，该对象将连接到SSE服务器，并保持打开状态。在服务器端，需要创建一个HTTP路由，该路由将建立连接并向前推送事件。这意味着，我们需要一个HTTP服务器和一个Node.js进程，而且我们需要使用第三方模块express和cors。

如何实现断线重连？

当使用SSE时，断线重连通常会发生。这种情况下，失去的连接可能会很快恢复，也可能需要更长时间才能恢复，甚至可能永远失去。在所有这些情况下，我们需要确保客户端可以及时恢复连接，并重新与服务器进行通信。

实现断线重连的方法：

自动重连 - 尝试在3到5秒之间自动尝试重新连接，尝试次数最多为10次，然后停止并显示消息。
手动重连 - 在连接超时后显示重连按钮。

自动重连

function autoReconnect() {
  console.log('Trying to reconnect...')
  setTimeout(() => {
    if (source.readyState === EventSource.CLOSED) initSSE()
  }, 3000)
}

function initSSE() {
  source = new EventSource('/events')
  source.onerror = autoReconnect
  source.onclose = autoReconnect
  source.addEventListener('message', handleMessage)
}

手动重连

function handleTimeout() {
  showMessage('Connection timeout', 'error')
  const btn = document.createElement('button')
  btn.innerText = 'Retry'
  btn.onclick = initSSE
  document.body.appendChild(btn)
}

function initSSE() {
  source = new EventSource('/events')
  source.addEventListener('timeout', handleTimeout)
  source.addEventListener('message', handleMessage)
}

总结

SSE提供可靠的数据传输，可以通过自动或手动重连来减轻断线的影响。通过本文的学习，您将能够创建连接到SSE服务器的客户端，以及在连接丢失时自动或手动重新连接。我们希望本文对于初学者来说有一定的指导意义。

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