web socket

1.什么是WebSocket？

• WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
• 特点是服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送消息，属于服务器推送技术的一种。
• （1）建立在TCP协议之上，服务器端实现较容易。
• （2）与HTTP协议有良好的兼容性。默认端口也是80和443，且握手阶段采用HTTP协议，可通过各种HTTP代理服务器。
• （3）数据格式比较轻量，性能开销小，通信高效。
• （4）可以发送文本和二进制文件。
• （5）无同源限制，客户端可与任意服务器通信。
• （6）协议标识符是ws（加密的则为wws），服务器网址就是URL。（ws://example.com:80/some/path）
• 
  

2.那已经有http了为什么还要有WebSocket呢？

• HTTP有一个缺陷，就是请求只能由客户端发起，HTTP协议做不到服务端主动向客户端推送消息。
• 若服务器有连续的状态变化，客户端要获知的话就得使用轮询：每隔一段时间就发出一个询问，了解服务器有没有新的信息，典型例子为聊天室。
• 轮询的效率低下，且非常消耗资源（连接要一直保持，或者不断的连接-断开）。

3.客户端的简单实例

var ws = new WebSocket("wss://echo.websocket.org");
//H5新的API，WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例,执行上面语句之后，客户端就会与服务器进行连接
//new WebSocket传的参为要连接的服务器
//var ws = new WebSocket(url,name);  //url为WebSocket服务器的地址，name为发起握手的协议名称，为可选择项。

ws.onopen = function(event){  //onopen属性用于指定连接成功后的回调函数，
  //如果要指定多个回调函数，可以使用addEventListener方法。
  console.log("Connection open ...");
  ws.send("Hello baibaiderSocket~");  //send()方法用于向服务器发送数据
};

ws.onmessage = function(event){ //onmessage属性，用于指定收到服务器数据后的回调函数
  console.log("Received Message:" + evt.data);
  ms.close();
};
//服务器数据可能是文本，也可能是二进制数据（blob对象或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);
};

ws.onclose = function(event){ //onclose属性，用于指定连接关闭后的回调函数
  console.log("Connection closed~");
};

ws.onerror = function(event){ //onerror属性，用于指定报错时的回调函数
  console.log("出错了！");
}
// 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;
}