什麼是websocket
WebSocket 協定是html5引入的一種新的協議,其目的在於實現了瀏覽器與伺服器全雙工通訊。看了上面連結的同學肯定對過去怎麼低效率高消耗(輪詢或comet)的做此事已經有所了解了,而在websocket API,瀏覽器和伺服器只需要要做一個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。同時這麼做有兩個好處
1.通訊傳輸位元組減少:比起以前使用http傳輸數據,websocket傳輸的額外資訊很少,據百度說只有2k
2.伺服器可以主動向客戶端推送訊息,而不用客戶端去查詢
關於概念和好處,網路上到處都是,不再贅述,簡單看看其原理,然後動手寫一個web版聊天室吧
握手
除了TCP連線的三次握手,websocket協定中客戶端與伺服器想建立連線需要一次額外的握手動作,在最新版的協定中是這個樣子的
客戶端向伺服器寄送請求
代碼如下:Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:8080
Origin:
http://test .comPragma: no-cache
Cache-Control: no-cache
Sec-WebSocket-Key: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-VersionBhJF2XLNDRgUMg==
Sec-WebSocket-Version: 13
-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57676. >
伺服器給予回應
程式碼如下:Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=
Key
websocket API
經過握手之後瀏覽器與伺服器建立連接,兩者就可以互相通訊了。 websocket的API真心很簡單,看看W3C的定義
複製程式碼
複製程式碼
複製程式碼
複製程式碼
複製碼
enum BinaryType { "blob", "arraybuffer" };
[Constructor(DOMString url, optional (DOMString or DOMString[]) protocols)]
interface WebSocket or DOMString[]) protocols)]
interface WebSocket : EventTarget read attribute DOMString url;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2 readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
// networking attribarad attribute; EventHandler onclose;
readonly attribute DOMString extensions;
readonly attribute DOMString protocol;
void close([Clamp] optional unsigned short code, optional DOMString reason EventHandler onmessage;