WebSocket協議

梦千裳~發表於2024-05-16
Web協議

前言

該文章是為了完善個人簡歷對應的知識點，目前是直接轉載的文章，原文連結在此，後續會慢慢依照自己專案中遇到好的進行更新。

簡介

WebSocket屬於OSI模型的應用層協議，它是一種網路傳輸協議，可以在單個TCP連線上進行全雙工通訊。WebSocket協議允許在建立連線後，客戶端和伺服器都可以主動向對方傳送資料，類似於Socket的TCP長連線通訊模式。與HTTP不同，WebSocket是雙向通訊協議，且在連線建立後，伺服器和客戶端之間交換資料時，用於協議控制的資料包頭部相對較小，從而減少了控制開銷。WebSocket還定義了二進位制幀，支援傳送二進位制內容，並且允許透過擴充套件實現部分自定義的子協議。

一、WebSocket的特點以及介紹

1、特點

WebSocket是真正的全雙工通訊機制，建立連線後客戶端與伺服器端是完全平等的，可以互相主動請求。而HTTP長連線基於HTTP，是傳統的客戶端對伺服器發起請求的模式。 HTTP長連線中，每次資料交換除了真正的資料部分外，伺服器和客戶端還要大量交換HTTP header，訊息交換效率低。Websocket協議透過第一個request建立了TCP連線之後，之後交換的資料都不需要傳送 HTTP header就能交換資料，這顯然和原有的HTTP協議有區別所以它需要對伺服器和客戶端都進行升級才能實現，當然在現在這個時代，我們的主流瀏覽器都是支援HTML5的，使用時我們直接使用即可。

2、WebSocket 協議介紹

  • WebSocket 協議的底層協議也是TCP協議
  • WebSocket 協議的識別符號為ws,加密後為wss
  • WebSocket 協議沒有同源限制，即WebSocket 協議可以跨域通訊
  • WebSocket 協議是有狀態的，是前後端互動的長連線，即建立連線後可以保持連線狀態，通訊時可以省略部分狀態資訊
  • WebSocket 協議可以傳送文字，同時也可以傳送二進位制資料

二、WebSocket的使用

1、透過WebSocket建構函式建立一個webScoket例項物件

// 假設我們當前的服務端的介面為ws://192.168.31.19:8081/
const ws=new WebSocket('ws://192.168.31.19:8081/')
// 此時列印ws會出現下現結構的一個資訊
conlose.log(ws)
// 列印結果
WebSocket {
binaryType: "blob"
bufferedAmount: 0
extensions: ""
onclose: null
onerror: null
onmessage: null
onopen: null
protocol: ""
readyState: 0
url: "ws://192.168.31.19:8081/"
}

2、建立了一個webScoket例項物件常用屬性和方法的介紹

屬性 說明
url 當前連線的webScoket介面地址
readyState 當前連線的狀態: 0：正在連結中 1：已經連結並且可以通訊 2：連線正在關閉 3;連線已關閉或者沒有連結成功
onopen 連線成功的回撥函式
onerror 連線失敗的回撥函式
onmessage 從服務端接受到資訊的回撥函式
onclose 連線關閉的回撥函式
binaryType 使用二進位制的資料型別連線
protocol 伺服器選擇的下屬協議
bufferedAmount 未傳送至伺服器的二進位制位元組數
close() 關閉當前連線
send(data) 傳送訊息到伺服器

3、客戶端實現WebScoket連線

const ws = new WebSocket('ws://192.168.31.19:8081/')
 
ws.onopen = function () {
  console.log('我們連線成功啦...')
  webSocket.send('Hello!')
}
ws.onerror = function () {
  console.log('連線失敗了...')
}
ws.onmessage = function (e) {
  console.log('服務端傳來資料啦...' + e.data)
}
ws.onclose = function () {
  console.log('連線關閉了...')
}

4、WebScoket的重連機制

當我們正在使用WebScoket的時候，難免會出現WebScoket的斷聯，這個時候，我們只需要在onclose的回撥函式中，重新連結即可


ws.onclose = function (e) {
   // 1每10秒重連一次，直到連線成功
    setTimeout(function () {
   // 重新呼叫連線webSocket事件
     ws = new WebSocket('ws://192.168.31.19:8081/')
    ws.onopen = function () {
     console.log('連線成功...')
        } 
         }, 10000);
        };

5、WebScoket的心跳保活

  • websocket長連線有預設的超時時間（1分鐘），也就是說，超過一定的時間客戶端和伺服器之間沒有發生任何訊息傳輸，連線會自動斷開；除此之外，伺服器或防火牆一般也會在一段時間不活動並超時之後終止外部的長連線。因此，若需要使客戶端一直保持連線，就需要設定心跳保活機制了。
  • 實現原理:我們可以每次在 每次保持心跳保活的時候，向WebScoket傳送一條訊息，證明我們還"活著"
    var timeout = 1000 * 30 //心跳間隔  
var timeoutTimer=null //保持心跳的定時器
  timeoutTimer = setTimeout(function () {
    ws.send('HeartBeat')
  }, timeout)

6、客戶端主動斷開連線

// 客戶端主動斷開連線
ws = new WebSocket('ws://192.168.31.19:8081/')
ws.close();

7、WebScoket新增token的幾種方法

  • 使用send傳送引數
    var  ws = new WebSocket("ws://" + url );
ws.onopen=function(){
    ws.send(token)
}
  • 請求地址中攜帶引數
    var  ws = new WebSocket("wss://" + url?token );

  • 基於協議頭

    var  ws = new WebSocket("ws://" + url,[token]);

參考文章

WebSocket(保姆級教學)-CSDN部落格

相關文章