websocket 在客戶端詳細介紹

在前端(客戶端)如何來鏈接服務端的websocket來實現通訊呢，這裏我就來介紹下在客戶端websocket的實現

一：建立一個websocket對象

在客戶端使用websocket首先須要建立一個wbsocket對象

語法：

webSocket = new WebSocket(url [, protocols]);

參數說明：

url：要鏈接的URL；這應該是WebSocket服務器將響應的URL，如：ws://127.0.0.1:8888

protocols:此參數爲可選項，非必填項，一個協議字符串或者一個包含協議字符串的數組。這些字符串用於指定子協議，這樣單個服務器能夠實現多個WebSocket子協議（例如，您可能但願一臺服務器可以根據指定的協議（protocol）處理不一樣類型的交互）。若是不指定協議字符串，則假定爲空字符串。如：

new WebSocket('ws://127.0.0.1:8888', 'public');

若是你設置了protocols參數，這時候前端回想websocket服務端傳遞一個名爲Sec-WebSocket-Protocol的頭信息，這時候你須要編寫自定義握手事件

異常：

若是你的websocket服務未開啓，這時候會拋出一個SECURITY_ERR異常錯誤，表示正在嘗試鏈接的端口被阻止

二：websocket鏈接相關的回調函數

1：監聽用於指定鏈接成功後的回調函數

語法：

webSocket.onopen = function(event) {  
  console.log("websocket 鏈接成功");  
};

如上表示在與websocket服務器鏈接成功後，這時候會調用onopen回調函數

2：監聽用於指定當從服務器接受到信息時的回調函數

語法：

webSocket.onmessage = function(event) {  
  console.log("websocket 傳遞的消息爲:", event.data);  
};

如上表示當websocket服務器向客戶端發送消息時，這時候會調用onmessage回調函數，其中event.data表示服務端傳來的數據

3：監聽用於指定鏈接失敗後的回調函數

語法：

webSocket.onerror = function(event) {  
  console.error("websocket 鏈接失敗");  
};

如上表示在鏈接websocket服務器出現錯誤時，這時候會調用onerror回調函數

4：監聽用於指定鏈接關閉後的回調函數

webSocket.onclose = function(event) {  
  console.log("WebSocket 客戶端鏈接關閉.");  
};

如上表示客戶端關閉與websocket通訊時，這時候會調用onclose回調函數

如上就是在websocket客戶端中常見的監聽回調函數

5：咱們還能夠使用addEventListener回調函數來註冊監聽事件，只須要將監聽事件的on去除便可

如：

// 監聽websocket鏈接成功事件  
websocket.addEventListener('open', function (event) {  
    console.log(websocket 鏈接成功')  
});

三：websocket客戶端常見的方法

1：向服務器發送數據

語法：

websocket.send(data);

參數說明：

data：表示須要用於傳輸至websocket服務器的數據

2：關閉當前與websocket服務之間的鏈接

語法：

webSocket.close([code[, reason]])

參數說明：

code：一個數字狀態碼，它解釋了鏈接關閉的緣由，非必填項，默認爲1005

reason：這是解釋鏈接關閉的緣由字符串，爲非必填項

四：websocket客戶端常見的屬性

1：獲取websocket當前鏈接狀態

websocket.readyState  //返回0表示正在鏈接 1鏈接成功 2正在關閉鏈接 3關閉鏈接

2：獲取服務器選擇的下屬協議，及new WebSocket(url, protocols)的第二個參數值

websocket.protocol

3：WebSocket 的絕對路徑

websocket.url