应用背景

首先我们了解一下什么是WebSocket 。WebSocket 是HTML5的重要特性，其通信协议实现的是基于浏览器的远程socket，实现了浏览器和服务器全双工通信（full-duplex）。

在websocket之前，为了实现即时通信，所用的技术都是轮询，在特定的时间间隔内，由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器，这样，浏览器需要对服务器不断发出请求，会占用很多带宽。

在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。它解决了web实时化的问题，相比传统http有如下好处：

1）一个WEB客户端只建立一个TCP连接

2）Websocket服务端可以推送(push)数据到web客户端.

3）有更加轻量级的头，减少数据传送量

websocket原理

我们可以把websocket应用看做有两个部分，客户端和服务端。在客户端会实例化一个websocket对象，如：

ws = new WebSocket( “ws://yourdomain:port/path” );

websocket对象会自动解析这段字符串，发送到指定的服务器端口，接着客户端与服务端会建立握手。客户端发送的数据格式类似：

GET /echo HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: http://www.51wp7.com:8080
Origin: http://www.51wp7.com

服务端应该返回的信息为：

HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://www.51wp7.com
WebSocket-Location: ws:// www.51wp7.com:8080/echo

客户端握手成功后，会触发webscoket对象的onopen事件，告诉客户端连接已经成功建立。

客户端一共绑定了四个事件。

1）onopen 建立连接后触发

2）onmessage 收到消息后触发

3）onerror 发生错误时触发

4）onclose 关闭连接时触发