WebSocket

为什么需要 WebSocket？

HTTP协议请求具有单向通信的特点，服务器无法主动向客户端发送信息，如果服务器有连续的状态变化，只能通过轮询进行查询，但是轮询的效率非常低，且浪费资源。

WebSocket协议便为解决这种问题而发明。WebSocket是伴随HTML5发布的一种新协议。能够实现浏览器与服务器全双工通信(full-duplex)

特点：

1. 允许服务器和客户端进行双向的平等对话
2. 建立在TCP协议之上，服务器端实现简单
3. 与HTTP协议有良好的兼容性，默认端口也是80和443，并且握手阶段采用HTTP协议，因此不易被屏蔽，能通过各种HTTP代理服务
4. 数据格式轻量，高效
5. 支持发送文本和二进制数据
6. 没有同源限制

API：

//创建WebSocket实例，可以使用ws和wss。
//第二个参数可以选填自定义协议，如果多协议，可以以数组方式
var ws = new WebSocket("ws:127.0.0.1:80");

//请求连接
ws.onopen = evt => { 
  console.log("Connection success"); 
  //send(data) 发送方法
  //paramr: String/Blob/ArrayBuffer/ByteBuffer  
  ws.send("WebSockets start!");
};
//跟ws.onopen方法一样，区别在于此方法用于指定多个回调函数
ws.addEventListener('open', evt => {
  ws.send('WebSockets start!');
});

//响应数据
ws.onmessage = evt => {
  console.log( "Msg: " + evt.data);
  //关闭连接
  ws.close();
};

//响应错误
//且会关闭连接
ws.onerror = evt => {
    console.log('error');
}

//关闭连接
//两端都可以关闭。连接失败也会触发。
ws.onclose = evt => {
  console.log("Connection closed.");
};    

//在方法中使用WebSocket
btn.onclick = () => { 
    //判断是否连接是否还存在
    if(ws.readyState == ws.OPEN){
        ws.send("fun click");
    }
 }

webSocket.readyState

常量名	值	值
CONNECTING	0	连接还未开启
OPEN	1	连接开启可以通信
CLOSING	2	连接正在关闭中
CLOSED	3	连接已经关闭

属性

属性名	值类型	描述
binaryType	String	表示连接传输的二进制数据类型的字符串。默认为"blob"。
bufferedAmount	Number	只读。如果使用send()方法发送的数据过大，虽然send()方法会马上执行，但数据并不是马上传输。浏览器会缓存应用流出的数据，你可以使用bufferedAmount属性检查已经进入队列但还未被传输的数据大小。在一定程度上可以避免网络饱和。
protocol	String/Array	在构造函数中，protocol参数让服务端知道客户端使用的WebSocket协议。而在实例socket中就是连接建立前为空，连接建立后为客户端和服务器端确定下来的协议名称。
readyState	String	只读。连接当前状态，这些状态是与常量相对应的。
extensions	String	服务器选择的扩展。目前，这只是一个空字符串或通过连接协商的扩展列表。

WebSocket不稳定

WebSocket并不稳定，在使用一段时间后，可能会断开连接，让WebSocket保持连接状态，有两种方法。

1. WebSocket设置变量，判断是否手动关闭连接

设置一个变量，在webSocket关闭/报错的回调中，判断是不是手动关闭的，如果不是的话，就重新连接，这样做的优缺点如下：

• 优点：请求较少(相对于心跳连接)，易设置。
• 缺点：可能会导致丢失数据,在断开重连的这段时间中，恰好双方正在通信。

2.WebSocket心跳机制

客户端就像心跳一样每隔固定的时间发送一次ping，来告诉服务器，我还活着，而服务器也会返回pong，来告诉客户端，服务器还活着。

websocket 和http区别

相同点:

   1,都是应用层的协议

   2,都是基于tcp,并且都是可靠的协议

不同点:

    1,websocket是持久连接的协议,而http是非持久连接的协议.

    2,websocket是双向通信协议,模拟socket协议,可以双向发送消息,而http是单向的.

    3,websocket的服务端可以主动向客服端发送信息,而http的服务端只有在客户端发起请求时才能发送数据,无法主动向客户端发送信息.

更详细的内容，请查看阮一峰老师的WebSocket教程