WebSocket实时通讯
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
http：只能由客户端发起，不能做到服务器主动向客户端推送消息
WebSocket：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向对话
1.创建WebSocket实例
url：url之前需添加ws://（未加密）或wss://（已加密），类似http://、https://
protocol：与服务端定义的协议名称相同，协议的参数例如XMPP（Extensible Messaging and Presence Protocol）、SOAP（Simple Object Access Protocol）或者自定义协议。
var ws = new WebSocket('ws://url');
var ws1 = new WebSocket('ws://url', 'myprotocol');
var ws2 = new WebSocket('ws://url', ['protocol_1','protovol_2']);
2.属性
①readyState属性：WebSocket当前连接状态
| 属性值 | 属性常量 | 描述 |
|---|---|---|
| 0 | CONNECTING | 正在与服务端建立WebSocket连接，还没有连接成功 |
| 1 | OPEN | 连接成功并打开，可以发送消息 |
| 2 | CLOSING | 进行关闭连接的操作，且尚未关闭 |
| 3 | CLOSE | 连接已关闭或不能打开 |
通过 ws.readyState属性查看当前连接状态
②bufferedAmount：检查传输数据的大小，当客户端传输大量数据时使用避免网络饱和
通过ws.bufferedAmount属性查看传输数据的大小
③protocol：在构造函数中使用，protocol参数让服务端知道客户端使用的WebSocket协议。而WebSocket对象的这个属性就是指的最终服务端确定下来的协议名称，可以为空
3.WebSocket 对象的相关事件
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | ws.onopen | 连接建立时触发 |
| message | ws.onmessage | 客户端接收服务端数据时触发 |
| error | ws.onerror | 通信发生错误时触发 |
| close | ws.onclose | 连接关闭时触发 |
//连接成功后的回调函数ws.onopen = function() {console.log("服务器已连接");};//收到服务器数据后的回调函数ws.onmessage = function(msg) {console.log("来自服务器端的数据：" + msg.data);};//报错时的回调函数ws.onerror = function(event) {console.log(event, "event");};//连接关闭后的回调函数ws.onclose = function() {console.log("服务器关闭");};
4.WebSocket 对象的相关方法
| 方法 | 描述 |
|---|---|
| ws.send() | 使用连接发送数据 |
| ws.close() | 关闭连接 |
//使用连接发送数据ws.send("your message");//关闭连接ws.onclose = function() {console.log("服务器关闭");};