WebSocket 使用

WebSockets通信

Web Sockets是H5提供的在web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。
  使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的，也是永久的，除非被显示关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立连接。只要客户端有一个被打开的socket（套接字）并且与服务器建立了连接，服务器就可以把数据推送到这个socket上，服务器不再需要轮询客户端的请求，从被动转为了主动。

API的基本用法

要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL字符串。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

if(window.WebSocket){ //进行检测，确保浏览器支持WebSocket
    var webSocket=new WebSocket("ws://localhost:8005/socket");
}

打开socket后只需要等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。
  WebSocket对象有三个事件：open、close和message。当连接建立时触发open事件，当收到消息时触发message事件，当WebSocket连接关闭时触发close事件。

webSocket.onopen=function(event)
{
    //开始通信时的处理
    webSocket.send("Hello WebSocket!");
}
webSocket.onmessage=function(event)
{
    var data=event.data;
    //webSocket.close();传输结束 可用来关闭socket
}
webSocket.onclose=function(event)
{
    //结束通信时的处理
}

当socket处于打开状态（即调用onopen监听程序之后，调用onclose监听程序之间前），可以采用send方法来向服务器发送数据。只能发送文本数据，但是可以使用JSON对象把任何JS对象转换成文本数据后进行发送。

//发送文本
webSocket.send("data");
//发送 Blob 对象的例子。
var file = document
  .querySelector('input[type="file"]')
  .files[0];
webSocket.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);

另外，还可以通过读取readyState的属性值来获取WebSocket对象的状态。readyState属性存在以下几种属性值：

1. CONNECTING（数字值为0），表示正在连接。
2. OPEN（数字值为1），表示已建立连接。
3. CLOSING（数字值为2），表示正在关闭连接。
4. CLOSED（数字值为2），表示已关闭连接。

switch (webSocket.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;
}

webSocket.onerror

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

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