Websocket-Front-End-Kapselungscode, Trennung und Wiederverbindung des Heartbeat-Mechanismus

Einführung in WebSocket (kann übersprungen werden)

Websocket ist eine lange Vollduplex-Kommunikationsverbindung. Sie wird hauptsächlich zur Erzielung von Echtzeitkommunikation und an Orten mit hohen Anforderungen an Echtzeitdaten verwendet. Wenn Websocket nicht angezeigt wird, verwendet das Front-End das SetInterval-Rotationstraining, um Daten zu aktualisieren. An diesen Orten wo Echtzeitdatenanforderungen erforderlich sind. In Gebieten mit geringer Höhe können wir weiterhin Rotationstraining einsetzen.

(1) Basierend auf dem TCP-Protokoll ist die serverseitige Implementierung relativ einfach.

(2) Es ist gut mit dem HTTP-Protokoll kompatibel. Die Standardports sind ebenfalls 80 und 443, und in der Handshake-Phase wird das HTTP-Protokoll verwendet, sodass es während des Handshakes nicht einfach zu blockieren ist und verschiedene HTTP-Proxyserver passieren kann.

(3) Das Datenformat ist relativ leicht, weist einen geringen Leistungsaufwand und eine effiziente Kommunikation auf.

(4) Sie können Text- oder Binärdaten senden.

(5) Es gibt keine Ursprungsbeschränkung und der Client kann mit jedem Server kommunizieren.

(6) Das übliche Protokollsymbol ist http, während Websocket ws (Standardport 80) und verschlüsselte Kommunikation wss (Standardport 443) ist, was https entspricht

HTTP-lange und kurze Links

HTTP-Verbindungen werden in lange Verbindungen und kurze Verbindungen unterteilt. Derzeit verwenden wir häufig HTTP1.1, sodass wir alle lange Verbindungen verwenden. Dieser Satz ist eigentlich nur zur Hälfte richtig. Die meisten unserer aktuellen HTTP-Protokolle sind 1.1, daher verwenden wir im Grunde genommen lange Verbindungen. Im HTTP-Protokoll gibt es keine langen und kurzen Verbindungen. Das HTTP-Protokoll basiert auf dem Anforderungs-/Antwortmodell. Solange der Server antwortet, ist die HTTP-Verbindung beendet, oder genauer: die HTTP-Anfrage. Es gibt keine lange oder kurze Verbindung.

TCP-lange und kurze Links

Lange Verbindung und kurze Verbindung sind eigentlich TCP-Verbindungen. Die TCP-Verbindung ist ein Zwei-Wege-Kanal, der für einen bestimmten Zeitraum offen bleiben kann, sodass es bei der TCP-Verbindung echte lange und kurze Verbindungen gibt. Letztlich handelt es sich beim HTTP-Protokoll um ein Protokoll der Anwendungsschicht, während TCP das eigentliche Protokoll der Transportschicht darstellt. Lediglich die für die Übertragung zuständige Schicht muss eine Verbindung aufbauen.

Genauso wie die bei der Expresszustellung eingegebene Kurieradressennummer http ist und das entsprechende Transportmittel wie ein Auto TCP ist

Websocket-Heartbeat-Mechanismus/Trennungs-Wiederverbindungsmechanismus

Wenn die Kommunikation zwischen beiden Parteien verbunden wurde und keine externen Gründe vorliegen, wird die Verbindung nicht unterbrochen, sofern die beiden Parteien die Verbindung nicht trennen.

Es gibt jedoch externe Faktoren, die zu einer Unterbrechung des WebSockets führen, wie zum Beispiel: (Netzwerkunterbrechung, schlechter Netzwerkstatus, die Verbindung erfordert das interne Netzwerk und das interne Netzwerk kann nicht verbunden werden, der verknüpfte Prozess wird abgebrochen/der Server hat keine Kommunikation). für eine lange Zeit)

Um sicherzustellen, dass diese Kommunikation am Leben bleibt, müssen wir einen Heartbeat-Mechanismus/Trennungs-Wiederverbindungsmechanismus hinzufügen.

Herzschlagmechanismus

Heartbeat starten, wenn Verbindung zum Server hergestellt wird (offen)

Senden Sie alle 30 Sekunden eine Heartbeat-Nachricht an den Server (oder die angegebene Zeit, hier werden vorübergehend 30 Sekunden verwendet).⌛Warten Sie auf eine Antwort vom Server

Wenn das Frontend innerhalb der angegebenen 30 Sekunden eine vom Server zurückgegebene Nachricht empfängt, setzt es den Heartbeat zurück und startet den Heartbeat 30 Sekunden lang neu.

Wenn keine Nachricht empfangen wird (möglicherweise aus Netzwerkgründen) und der Server nicht antwortet, rufen Sie websocke.close() auf, um den langen Link zu schließen und erneut eine neue Linkanforderung zu senden, um die Verbindung zum Server wiederherzustellen.

Wiederverbindungsmechanismus

Wir melden den Fehler /close/errno/no Response jeweils in websokcet (hier ruft der Heartbeat close direkt auf und verwendet dann close, um die Verbindung wiederherzustellen).

Kapseln Sie spezifischen Code

Aufrufmethode

import { socketContact } from '@/utils/websocket'
const wss = socketContact('/ws/quality_panel/', 'quality panel data', (data) => {
  tableData.value = data // 可以自定义数据处理
})

Spezifischer Verpackungscode:

const socketContact = function (contactUrl = '', getDataSecret = '', getDataFn = () => {}) {
  const baseUrl = process.env.VUE_APP_API_WEBSOCKET_URL // baseURL
  const callBack = getDataFn // callback返回数据函数
  const url = contactUrl // 后缀url
  // getDataSecret 需要发送给服务器的数据
  let socket // websocket本体
  let lock = false // 避免重复连接
  let replyOverTime = null // 服务器回复超时setTimeout
  let hearByteTime = null // 心跳 setTimeout
  try {
    socket = new WebSocket(baseUrl + url)
    socket.addEventListener('open', function (event) {
      socket.send(getDataSecret)
      heatByte() // 开始心跳
      console.log('链接成功', contactUrl, getDataSecret)
    })
    socket.addEventListener('message', function (event) {
      resetHardByte() // 重置心跳
      // 这里transporting...' 和'invalid command...'为服务器心跳回复 不做数据返回处理
      if (event.data === 'transporting...' || event.data === 'invalid command...') return
      // 处理服务器返回数据 这里可自定义
      const str = event.data.replaceAll('None', 'null')
      // eslint-disable-next-line no-eval
      const data = eval('(' + str + ')')
      callBack(data)
    });
    socket.addEventListener('close', function (event) {
      console.log('链接关闭', event.code)
      reconnect(url, getDataSecret, callBack) // 尝试重新连接
    });
    socket.addEventListener('errno', function (event) {
      console.log('链接报错')
      reconnect(url, getDataSecret, callBack)// 尝试重新连接
    });
  } catch (e) {
    console.log('catch', e)
    reconnect(url, getDataSecret, callBack) // 尝试重新连接
  }
  function heatByte (type) {
    hearByteTime && clearInterval(hearByteTime)
    replyOverTime && clearInterval(replyOverTime)
    // 每30s一次心跳
    hearByteTime = setTimeout(() => {
      if (socket.readyState === 1) {
        socket.send('heart byte') // 没问题进行心跳
        console.log('heart byte')
      }
      // 重新链接超时 60s无回复 关闭连接 尝试重新链接
      replyOverTime = setTimeout(() => {
        socket.close()
        console.log('网络/其他问题 回复超时间关闭')
      }, 60000)
    }, 30000)
  }
  function resetHardByte () {
    // 进行下一次心跳
    hearByteTime && clearTimeout(hearByteTime)
    replyOverTime && clearTimeout(replyOverTime)
    heatByte()
  }
  function reconnect (url, getDataSecret, callBack) {
    if (lock) return
    lock = true
    setTimeout(() => {
      lock = false
      socketContact(url, getDataSecret, callBack)
      console.log('正在尝试重新连接')
    }, 5000)
  }
  return socket
}

export { socketContact }

Referenz

Langer Link und kurzer Link: http://t.csdn.cn/Ne7g3

websocket Ruan Yifeng: https://www.ruanyifeng.com/blog/2017/05/websocket.html

websokcet: http://t.csdn.cn/j42h5