Websocket

webSocket

特点

服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送的技术的一种。

1. 建立在TCP协议之上，服务器端的实现比较容易
2. 与HTTP协议有着良好的兼容性，默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器。
3. 数据格式比较轻量，性能开销小，通信高效。
4. 可以发送文本，也可以发送二进制数据。
5. 没有同源限制，客户端可以与任意服务器通信。
6. 协议标识符是ws，（如果加密，则为wws），服务器地址就是URL

简单示例

var ws = new WebSocket(‘wss://echo,websocket.org’)；
ws.onopen = function(evt){
console.log(‘connection open…’);
ws.send(‘Hello websocket’);
}
ws.onmessage = function(evt){
console.log(‘received message’ + evt.data);
ws.close(

API

1. websocket.readyState:
   （1） connecting：值为0，表示正在连接
   （2） open：值为1，表示连接成功，可以通信了
   （3） closing：值为2，表示连接正在关闭
   （4） closed：值为3，表示连接已经关闭，或者打开连接失败
   switch(ws.readyState){
   case websocket.connecting;
   //
   break;
   case websocket.open;
   //
   break;
   case websocket.closing;
   //
   break;
   case websocket.closed;
   //
   break;
   default;
2. websocket.onopen
   实例对象的onopen属性，用于指定连接成功后的回调函数
   ws.onopen = function(evt){
   console.log(‘connection open…’);
   ws.send(‘Hello websocket’);
   }
   如果要指定多个回调函数，可以使用addEventLisnter方法
   ws.addEventListener(‘open’,function(event){
   ws.send(‘hello server’)
   })
3. websocket.onclose
   实例对象的onclose属性，用于指定连接关闭后的回调函数
   ws.onclose = function(event) {
   var code = event.code;
   var reason = event.reason;
   var wasClean = event.wasClean;
   // handle close event
   };
   ws.addEventListener(“close”, function(event) {
   var code = event.code;
   var reason = event.reason;
   var wasClean = event.wasClean;
   // handle close event
   });
4. websocket.onmessage
   实例对象的onmessage属性，用于指定收到服务器数据后的回调函数
   ws.onmessage = function(event) {
   var data = event.data;
   // 处理数据
   };

ws.addEventListener(“message”, function(event) {
var data = event.data;
// 处理数据
});
注:服务器数据可能是文本，也可能是二进制数据（blob对象或者Arraybuffer对象）
ws.onmessage = function(event){
if(typeof event.data === String) {
console.log(“Received data string”);
}

if(event.data instanceof ArrayBuffer){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}
除了动态判断收到的数据类型，也可以使用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);
};
4. websocket.send()
实例对象的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);
5. websocket.onerror
实例对象的onerror属性，用于指定报错时的回调函数
socket.onerror = function(event) {
// handle error event
};

socket.addEventListener(“error”, function(event) {
// handle error event
});