WebSocket的一些了解

1.为什么需要WebScoket?

1.已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
	答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
2.举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
	这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
	轮询的效率低，非常浪费资源

2.简介

	WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
	它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

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

3. 属性

	WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

	使用 WebSocket() 构造函数来构造一个 WebSocket 。
	1.构造函数
		WebSocket(url[, protocols])
		返回一个 WebSocket 对象。
	2.常量
	Constant	                          Value
		WebSocket.CONNECTING	             0
		WebSocket.OPEN                       1
		WebSocket.CLOSING	                 2
		WebSocket.CLOSED	                 3
	3.属性
		WebSocket.binaryType
			使用二进制的数据类型连接。
		WebSocket.bufferedAmount 只读
			未发送至服务器的字节数。
		WebSocket.extensions 只读
			服务器选择的扩展。
		WebSocket.onclose
			用于指定连接关闭后的回调函数。
		WebSocket.onerror
			用于指定连接失败后的回调函数。
		WebSocket.onmessage
			用于指定当从服务器接受到信息时的回调函数。
		WebSocket.onopen
			用于指定连接成功后的回调函数。
		WebSocket.protocol 只读
			服务器选择的下属协议。
		WebSocket.readyState 只读
			当前的链接状态。
		WebSocket.url 只读
		WebSocket 的绝对路径。
	4.方法
		WebSocket.close([code[, reason]])
			关闭当前链接。
		WebSocket.send(data)
			对要传输的数据进行排队。
	5.事件
	  使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性，来监听下面的事件。
		close
			当一个 WebSocket 连接被关闭时触发。
			也可以通过 onclose 属性来设置。
		error
			当一个 WebSocket 连接因错误而关闭时触发，例如无法发送数据时。
			也可以通过 onerror 属性来设置.
		message
			当通过 WebSocket 收到数据时触发。
			也可以通过 onmessage 属性来设置。
		open
			当一个 WebSocket 连接成功时触发。
			也可以通过 onopen 属性来设置。

4.客户端API

4.1 WebSocket 构造函数
	WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

var ws = new WebSocket('ws://localhost:8080');

	执行上面语句之后，客户端就会与服务器进行连接。

4.2 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;
}

4.3 webSocket.onopen
	实例对象的onopen属性，用于指定连接成功后的回调函数。

ws.onopen = function () {
  ws.send('Hello Server!');
}
如果要指定多个回调函数，可以使用addEventListener方法。

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

4.4 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.5 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.6 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);

4.7 webSocket.bufferedAmount
	实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}

4.8 webSocket.onerror
	实例对象的onerror属性，用于指定报错时的回调函数。

socket.onerror = function(event) {
  // handle error event
};

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