WebSocket

[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."); }; ```