HTML5之websocket

• 初識websocket
• websocket的應用：構造函數、常量、屬性、方法
• websocket應用示例

 1、初識websocket

1.1Websocket是一種網絡協議，是在HTTP基礎上作出一些優化的協議，與HTTP無直接關係。WebSocket是HTML5開始提供的一種在單個TCP鏈接上進行全雙工通信的協議。

 

1.2HTTP協議相關回顧：

HTTP（超文本傳輸協議）：規定了web瀏覽器如何從web服務器獲取文檔和向web服務器提交表單內容，以及web服務器如何響應這些請求和提交返回給瀏覽器。

HTTP的第一個版本叫作HTTP/0.9是一種爲互聯網原始數據傳輸服務的簡單協議。由RFC1945[6]定義的HTTP/1.0進一步完善了這個協議。它容許消息以類MIME消息的格式傳送，它包括傳輸數據的轅信息和對請求/響應語義的修飾。

HTTP/1.0沒有充分考慮到分層代理，緩存，以及持久鏈接和虛擬主機的需求的影響。

HTTP/1.1版本對1.0版本作了優化，開始支持長鏈接和緩存。

 

1.3爲何須要webSocket？

由於HTTP協議有一個缺陷：通訊只能由客戶端發起。服務器端不能時實發送最新數據給客戶端，若是遇到客戶端須要時實獲取服務器上的最新數據，就須要使用Ajax輪訓來請求最新數據。這種實現方案顯然要消耗大量的網絡請求資源，對於客戶端的定時器觸發輪訓也是比較大的性能消耗，而服務器還須要處理不少多餘的網絡請求。

經過webSocket能夠創建一個鏈接只須要一次握手，而後，瀏覽器和服務器之間就能夠直接進行數據交互。這就意味着服務器能夠時實向客戶端發送數據，而不須要重複的經過客戶端來請求。

 

1.4websocket請求報文：

Request Headers（請求頭）

Accept-Encoding:gzip,deflate,sdch（接受編碼格式）

Accept-Language:zh-CN,zh,q=0.8（接受語言）

Cache-Control:no-cache（緩存控制：無緩衝）

Connection:Upgrade（鏈接）

Host:echo.websocket.org（請求的服務器地址：服務器域名/IP 端口）

Origin:file://（請求發起端）

Pragma:no-cache（報文指令）

Sec-WebSocket-Extenslons:permessage-deflate;client_max_window_bits（用戶定義的字符串，用來區分同RUL下，不一樣服務所須要的協議）

Sec-WebSocket-key:8DtPaH9DH2Qsw6BK0q6FCw==（隨機字符串，服務器端使用這個數據構造出一個SHA-1的信息摘要。把「Sec-WebSocket-key」加上一個特殊字符串，而後計算SHA-1摘要，以後進行BASE-64編碼，將結果做爲「Sec-WebSocket-Accept」頭的值，返回給客戶端。這樣操做，能夠儘可能避免普通HTTP請求被誤認爲Websocket協議）

Sec-WebSocket-Version:13（表示支持的WebSocket版本，RFC645要求使用的版本是13，以前草案的版本均應當棄用）

Upgrade:websocket（表示但願升級到WebSocket協議）

User-Agent:Mozilla/5.0...（用戶代理）

 

1.5WebSocket特色：

　　(a)創建在TCP協議之上，服務器端的實現比較容易。

　　(b)與HTTP協議有着良好的兼容性。默認端口也是80和443，而且握手階段採用HTTP協議，所以握手時不容易屏蔽，能經過各類HTTP代理服務器。

　　(c)數據格式比較輕量，性能開銷小，通訊高效。

　　(d)能夠發送文本，也能夠發送二進制數據。

　　(e)沒有同源限制，客戶端能夠與任意服務器通訊。（就是說能夠經過websocket實現跨域）

　　(f)協議標識符爲ws（若是加密爲wss）服務器網址就是url

 

1.6瀏覽器兼容性：

Chrome

Firefox

IE>=10

Sarafi>=6

Android>=4.4

iOS>=8

 2、websocket的應用

這裏有一篇不錯的教程：https://www.cnblogs.com/jingmoxukong/p/7755643.html

2.1WebSocket客戶端API

var Socket = new WebSocket(url, [protocol]);

URL：指定鏈接的URL。

protocol：可選，指定可接受的子協議。

 

2.2WebSocket的屬性：

WebSocket.binaryType：使用二進制的數據類型鏈接。

WebSocket.bufferedAmount：未發送至服務器的字節數。

WebSocket.extensions：服務器選擇的擴展。

WebSocket.onclose：指定鏈接關閉的回調函數。

WebSocket.onerror：用於指定鏈接失敗後的回調函數。

WebSocket.onmessag：指定當從服務器接受到信息時的回調函數。

WebSocket.onopen：指定鏈接成功後的回調函數。

WebSocket.readyState：當前鏈接狀態。

WebSocket.url：WebSocket的絕對路徑。

 

2.3WebSocket的方法：

WebSocket.close(code,reason)：關閉當前鏈接

　　參數code:一個數字狀態碼，他解釋了鏈接關閉的緣由。若是沒有傳遞這個參數，默認使用1005。關於狀態碼能夠了解：https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes

　　參數reason:返回關閉緣由，字符串類型，UTF-8編碼的字符串不能超過123個字節。

WebSocket.send(data)：向服務器發送數據

　　參數data:能夠是USVString（文本字符串）、ArrayBuffer（數組對象發送的底層二進制數據）、Blob類型（將Blob中的原始數據以二進制傳輸）、ArrayBufferView（二進制幀的形式發送任何JavaScript類數組對象）。

 

2.4簡單的使用websocket

 1 var socket = new WebSocket('ws://echo.websocket.org/');
 2 //ws://echo.websocket.org/ 官方開發測試接口，向它發送什麼數據它返回什麼數據
 3 socket.onopen = function(){ //鏈接成功觸發
 4     socket.send('hello');
 5 }
 6 socket.onmessage = function(e){ //接收到服務器響應觸發
 7     console.log('message');
 8     console.log(e);
 9     console.log(e.data);
10     socket.close(); //關閉鏈接
11 }
12 socket.onlose = function(e){ //關閉鏈接後觸發
13     console.log('close');
14     console.log(e);
15 }
16 socket.onerror = function(){ //出現錯誤時觸發
17     console.log('erre');
18 }

2.5websocket.readyState當前鏈接狀態與WebSocket常量

WebSocket.CONNECTING = 0；（正在鏈接中）

WebSocket.OPEN = 1；（已經鏈接而且能夠通信）

WebSocket.CLOSING = 2;（鏈接正在關閉）

WebSocket.CLOSED = 3;（鏈接已關閉或者沒有鏈接成功）

 

(關於示例應用，有時間再來補充)