[TOC] > [websocket.org](http://websocket.org/) ## 概述 - WebSocket 協議在2008年誕生，2011年成為國際標準。所有瀏覽器都已經支持了 特點包括: 1. 建立在 TCP 協議之上，服務器端的實現比較容易。 2. 與 HTTP 協議有著良好的兼容性。默認端口也是80和443，**并且握手階段采用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器**。 3. 數據格式比較輕量，性能開銷小，通信高效。 4. 可以**發送文本**，也可以**發送二進制數據**。 5. 沒有同源限制，客戶端可以與任意服務器通信。 6. 協議標識符是`ws`（如果加密，則為`wss`），服務器網址就是 URL `ws://example.com:80/some/path`  ## 語法 ### WebSocket 構造函數 `var ws = new WebSocket('ws://localhost:8080');` ### webSocket.readyState readyState屬性返回實例對象的當前狀態，共有四種。 ``` CONNECTING：值為0，表示正在連接。 OPEN：值為1，表示連接成功，可以通信了。 CLOSING：值為2，表示連接正在關閉。 CLOSED：值為3，表示連接已經關閉，或者打開連接失敗 ``` 示例 ``` switch (ws.readyState) { case WebSocket.CONNECTING: // do something break; case WebSocket.OPEN: // do something break; case WebSocket.CLOSING: // do something break; case WebSocket.CLOSED: // do something break; default: // this never happens break; } ``` ### onopen / onclose / open / onmessage ``` var ws = new WebSocket("wss://echo.websocket.org"); ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); }; ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); ws.close(); }; ws.onclose = function(evt) { console.log("Connection closed."); }; ``` ### onerror ``` socket.onerror = function(event) { // handle error event }; socket.addEventListener("error", function(event) { // handle error event }); ``` ### webSocket.send() 發送文本的例子。 ``` ws.send('your message'); ``` 發送 Blob 對象的例子。 ``` var file = document.querySelector('input[type="file"]').files[0]; ws.send(file); ``` 發送 ArrayBuffer 對象的例子。 ``` // Sending canvas ImageData as ArrayBuffer var img = canvas_context.getImageData(0, 0, 400, 320); var binary = new Uint8Array(img.data.length); for (var i = 0; i < img.data.length; i++) { binary[i] = img.data[i]; } ws.send(binary.buffer); ``` ### binaryType屬性 - 顯式指定收到的二進制數據類型 ``` // 收到的是 blob 數據 ws.binaryType = "blob"; ws.onmessage = function(e) { console.log(e.data.size); }; // 收到的是 ArrayBuffer 數據 ws.binaryType = "arraybuffer"; ws.onmessage = function(e) { console.log(e.data.byteLength); }; ``` ### webSocket.bufferedAmount 屬性 - 表示還有多少字節的二進制數據沒有發送出去 - 它可以用來判斷發送是否結束 ``` var data = new ArrayBuffer(10000000); socket.send(data); if (socket.bufferedAmount === 0) { // 發送完畢 } else { // 發送還沒結束 } ``` ## 示例 ### hello world ``` var ws = new WebSocket("wss://echo.websocket.org"); ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); }; ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); ws.close(); }; ws.onclose = function(evt) { console.log("Connection closed."); }; ```