webSocket的二三事

传统中网站实现实时推送往往是一件比较难的事情，因为HTTP是无状态的，请求只能是由客户端发送，服务器处理这些请求，服务器是被动的，服务器有变化却没有办法将数据主动传输给客户端，传统中解决这种问题主要以下方法：

1、轮询

设定一个定时器发送Ajax请求，当检测数据是否发生变化，它的代码可能如下：

function query() {
    var xhr = new new XMLHttpRequest();
    xhr.open('GET','/data', true);
    xhr.load = function(e) {
        if(e.status == 200) {
            var ret = JSON.parse(e.response);
            if(ret.changed){
                //........
            } else{
                setTimeout(query, 1000)；
            }
        }
    }
    xhr.send();
}

query();

轮询的缺点非常明显，首先客户端需要发送大量请求，而服务端需要处理大量请求，这些资源的消耗其实很大一部分都是没有必要的，而且应用的实时性与轮询设定的时间有关。

2、长轮询

长轮询主要利用的是HTTP协议的长连接，当客户端发送一个ajax请求后，服务器查询数据是否有更改，如果有更改就立即返回，没有就hold住请求不返回，这样客户端就会一直处于pending状态，服务器端保持不断查询数据是否更新，一旦更新就返回，这样就做到了数据的实时传递。
显然长轮询消耗的客户端资源较少，但是服务端要hold一个连接同样要消耗部分资源。

这些解决方案都是基于HTTP协议的，而HTTP协议每次请求都需要带上报文头，这需要消耗一定的资源，对于实时应用来说这部分资源算是不小的开销了，而WebSocket将传统的套接字概念引入web，这样在web建立全双工通信通道成为了可能。

WebSocket客户端
WebSocket是一种新的通信协议，新建一个WebSocket协议时需要制定连接的地址，以ws开头，同样与http类似，安全连接以wss开头，客户端建立一个连接只需要调用WebSocket()构造函数即可，这个函数接受一个url参数和一个可选的子协议参数，子协议参数可以是字符串或者数组：

var socket = new WebSocket('wss://localhost/chat', ['soap', 'xmpp']);

一个WebSocket实例主要有以下属性：

• url：实例的url地址

• protocol：创建实例时传递的子协议，没有则是空字符串，有的话为传递的第一个协议的字符串

• extensions：服务器选定的拓展

• readyState：连接的当前状态，有四种状态：

CONNECTION: 连接还没开启，对应的readyState值为0

OPEN: 连接已经建立，可以开始通信了，对应的readyState值为1

CLOSING: 连接正在关闭的过程中，对应的readyState值为2

CLOSED: 连接已经关闭，对应的readyState值为3

因此判断连接当前的状态可以判断readyState的值，或者是与状态比对：

if(socket.readyState === 1) {
        console.log('连接已经打开');
}
// or
if(socket.readyState === WebSocket.OPEN){
        console.log('连接已经打开');
}

• binaryType：二进制传输的内容的类型

• onclose：关闭连接的事件监听器

• onerror：错误发生的事件监听器

• onmessage：消息到达的事件监听器，事件监听器中的回调函数的事件e中的data属性代表数据内容

socket.onmessage = function(e){
        console.log('server send ' + e.data);
}

• onopen：连接打开的事件监听器（因为这个连接是异步的）

一个WebSocket实例主要有以下方法：

• close：用来关闭连接

socket.close();

• send：用来向服务器发送数据：

socket.send('something from client');

最后是一个广告贴，最近新开了一个分享技术的公众号，欢迎大家关注