WebSocket客戶端的實現

websocket概述

websocket是一種溝通協議, 這個協議是一種鏈接服務端和客戶端的持久化的TCP連接.
任何客戶端和服務端均可以使用該協議, 可是主要仍是瀏覽器和服務端. 經過websocket, 服務端能夠主動傳遞數據給客戶端, 不須要像http那樣,由客戶端先發起請求.

websocket客戶端用法

const socket = new WebSocket('websocket url');


//事件函數
socket.onopen = function(e) {
   
}

socket.onmessage = function(e) {

}

socket.onclose = function(e) {

}

socket.onerror = function(e) {
  
}

//只讀屬性
socket.url
socket.protocol
socket.extensions
socket.bufferedAmount

//可讀寫屬性
socket.binaryType
socket.readyState


//函數屬性
socket.close();
socket.send();

複製代碼

創建鏈接

首先咱們須要建立一個WebSocket的實例. 實例建立後, 其實就已經開始了與服務端創建鏈接. 創建鏈接後, 監聽的onopen事件會響應. 咱們能夠經過如下代碼來測試效果.

const socket = new WebSocket('ws://echo.websocket.org');
socket.onopen = function(e) {
  console.log('已經創建鏈接')
}
複製代碼

創建了鏈接後, 能夠觀察下websocket的鏈接狀態. 狀態的肯定是經過readyState這個屬性來觀察. 它有這幾個值:

值	狀態	描述
0	CONNECTING	鏈接服務器中...
1	OPEN	已經創建鏈接, 能夠與服務端進行溝通
2	CLOSING	關閉鏈接中...
3	CLOSED	已關閉

接收消息

接收消息的處理, 是由一個接收消息的事件來做爲回調處理.

socket.onmessage = function(e) {
   console.log(e)
 }
複製代碼

當服務端發送消息給客戶端的時候, 該message事件, 則會執行綁定的回調函數中.

發生錯誤

若是客戶端與服務端溝經過程中, 發生了錯誤. 則會執行綁定的錯誤函數.

socket.onerror = function(e) {
  console.log("error throw");
}
複製代碼

鏈接關閉

客戶端與服務端關閉了websocket連接, 則會執行關閉事件

socket.onclose = function(e) {
  console.log('closed');
}
複製代碼

客戶端主動關閉鏈接, 是調用close函數來執行. close函數執行後, 也會執行onclose事件.

socket.close()
複製代碼

close函數, 有兩個可選參數, 第一個參數是code: 代碼編號, 第二個參數是reason: 關閉的緣由.

socket.close(2100, "關閉問題")
複製代碼

code爲數值類型, reason則爲字符串類型, 且小於123個字節.

發送消息

發送消息的函數, 直接是一個send來處理.

socket.send("消息內容............")
複製代碼

發送的消息過程當中, 咱們的發送的時候, readyState狀態, 應該是屬於open狀態. 不然會拋出對應的異常.

在發送消息時， 咱們能夠設置發送消息的類型， 這個屬性爲binaryType。它有兩個值： blob和arrayBuffer. 默認狀況下咱們是arrayBuffer類型。咱們能夠發送字符類型。

socket.binaryType = "arrayBuffer";
複製代碼

這個狀況下咱們在onmessage的時候， 獲取到的數據也是爲arrayBuffer. 能夠直接打印出來。

若是咱們指定爲

socket.binaryType = "blob";
複製代碼

這時候，咱們發送的數據也必須是二進制類型： Blob類型。咱們須要經過Blob對象來構造相關的數據， 而後進行發送。好比

const blob = new Blob(["hello, world"])
socket.send(blob);
複製代碼

在onmessage事件中， 獲取到的數據也將是一個blob對象數據。

socket.onmessage = function(e) {
	    console.log(e.data.text()); //這樣將會轉化爲文本數據
	}
複製代碼

總結

在實際項目中，咱們會遇到種種不同的實際鏈接問題，這個須要你們靜下心來分析其中程序的每一步流程， 真正瞭解websocket的實現過程。

後續，咱們會編寫服務端的websocket， 來了解完整的websocket的用法。