WebSocket理解與使用

2022-07-31 20:42:17 字數 2025 閱讀 4213

概念:websocket 是 html5 開始提供的一種在單個 tcp 連線上進行全雙工通訊的協議。

特點:websocket 使得客戶端和伺服器之間的資料交換變得更加簡單,允許服務端主動向客戶端推送資料。在 websocket api 中,瀏覽器和伺服器只需要完成一次握手,兩者之間就直接可以建立永續性的連線,並進行雙向資料傳輸。

流程:在 websocket api 中,瀏覽器和伺服器只需要做乙個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

目前:現在,很多**為了實現推送技術,所用的技術都是 ajax 輪詢。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對伺服器發出http請求,然後由伺服器返回最新的資料給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點,即瀏覽器需要不斷的向伺服器發出請求,然而http請求可能包含較長的頭部,其中真正有效的資料可能只是很小的一部分,顯然這樣會浪費很多的頻寬等資源。

優勢:html5 定義的 websocket 協議,能更好的節省伺服器資源和頻寬,並且能夠更實時地進行通訊。

websocket 物件

let ws = new websocket('ws://localhost:3000')  // 建立 websocket 物件
websocket 物件屬性:屬性描述

ws.readystate

唯讀屬性 readystate 表示連線狀態,可以是以下值:

0 - 表示連線尚未建立。

1 - 表示連線已建立,可以進行通訊。

2 - 表示連線正在進行關閉。

3 - 表示連線已經關閉或者連線不能開啟。

websocket 物件事件:

事件事件處理程式

描述open

ws.onopen

連線建立時觸發

message

ws.onmessage

客戶端接收服務端資料時觸發

error

ws.onerror

通訊發生錯誤時觸發

close

ws.onclose

連線關閉時觸發

websocket 物件方法:

方法描述

ws.send()

使用連線傳送資料

ws.close()

關閉連線

// 建立 websocket 物件

let ws = new websocket('ws://localhost:3000')

// 定時器

let timer;

// 監聽開啟

ws.onopen = websocketopen;

// 監聽異常

ws.onerror = websocketerror;

// 監聽訊息

ws.onmessage = websocketmessage;

// 監聽關閉

ws.onclose = websocketclose;

function websocketopen() ,

function websocketerror() ,

function websocketmessage(e) `)

},function websocketclose() ,

// 傳送心跳, 因為長時間不傳送訊息,就會斷

function start() `)

}, 2 * 60 * 1000)

}

雙向通訊,如聊天室。

socket.io支援 websocket、輪詢、http 流等方式。

我理解的websocket

短輪詢 客戶端發起請求,伺服器無論有無訊息都返回資訊,結束http連線。然後繼續發起請求。長輪詢 客戶端發起請求,建立連線,直到服務端返回訊息response,結束http連線。然後繼續發起請求,重複剛才的動作。這種做法缺點在於 短輪詢要求伺服器有很快的處理速度和資源。長輪詢則要求伺服器有很高的併發...

webSocket 基本使用

安裝 websocketnpm i ws建立物件const websocket require ws const wss newwebsocket.srever 監聽事件 連線事件 wss.on connection client 接收資料事件 wss.on connection client 傳送...

使用WebSocket與具名管道支援遠端輸入輸出

在專案的beta階段,我們團隊提出了乙個新的內容,就是要為每個使用者提供乙個真正的開啟即用的簡易開發環境。為了真正實現快捷這一亮點,我決定在這個功能的實現上不再使用docker容器技術,從而免去了專案啟動的時間開銷,由此可以大大減少白屏時間。而面臨的乙個問題就是輸入輸出問題,在alpha階段,我們專...