HTML5 - Websocket

 

關鍵詞：

• HTML5
• 網絡通信協議
• 並肩HTTP
• 基於TCP
• 客戶端與服務器 全雙工通信
• 雙向數據傳輸
• 實現長連接、持久性連接
• HTTP是非持久性

 

總結：

Websocket是一種在單個TCP鏈接上進行全雙工通信的協議，他可以容許服務端主動向客戶端推送數據。

在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。

（在 WebSocket API 中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。）

 

做用：

實現推送技術

 

優勢：

節省服務器資源和帶寬，而且可以更實時地進行通信

 

 

應用：聊天室

傳統HTTP協議要實現聊天室功能須要用到AJAX輪詢

Websockets協議實現聊天室功能很簡單。

AJAX輪詢原理：

輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，而後由服務器返回最新的數據給客戶端的瀏覽器。返回以後，連接斷開。下次通信須要從新發送ajax請求了。

這種傳統的模式帶來很明顯的缺點。

AJAX輪詢缺點：即瀏覽器須要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費不少的帶寬等資源。

 

ajax輪詢與Websockets長鏈接 

兩者原理圖對比：

 

websockets創建一次連接，長久通信；

ajax輪詢須要每秒發送一次請求。每請求一次都要三次握手。請求完畢就會斷開連接，每斷開一次都要四次揮手；啊哈哈哈。

 

性能來講，Websocket更優。

 

 

Websocket API 使用方法：

1、建立

 

2、事件

 

open：當客戶端和Websocket服務端鏈接成功的時候就會觸發

事件須要用addEventListener綁定：好比open事件註冊示例

websocket.addEventListener('open',function(e){

  console.log(e,websocket.readyState);

});

 

客戶端接受到服務器返回的數據時，會觸發message事件，因此咱們監聽這個事件並註冊回調函數就行：

1 websocket.addEventListener('message',function(event){
2 
3   console.log(event);
4 
5   console.log(event.data);// event裏的data屬性，就是服務器返回的數據
6 
7 });

  

close就是鏈接斷開的時候出發的事件，同上綁定方法。

 

 

三、屬性

 

 

4、方法

 

send()：客戶端主動向服務端發送消息

send使用演示 - 好比在連接成功後，發送一端文案過去：

websocket.addEventListener('open',function(e){

  console.log(e,websocket.readyState);

  websocket.send('發送一個方法')

});

 

 

五、其餘api講解能夠看MDN

 

 

 

控制檯查看websocket請求發送的狀況：

綠色表示發送，紅色表示接受的。

ps：圖中之因此長這樣（指請求和響應的文案都同樣），是由於咱們借用官網的echo這個服務器，是咱們給他發送啥，他就原封不動給咱們返回啥。