什么是 webSocket？
单个 TCP 连接
- 在单个 TCP 连接上进行全双工（能够同一时候发送和接收）通讯的协议
基于HTTP进行链接
- Webscoket 并不是全新的协议，而是利用了 HTTP 协议来建立连接(完成握手)
- 一次握手，永久连接，双向数据传输
- 通过查看浏览器的request这是一个以 HTTP 协议为基础的 get 请求，握手只会进行一次，随后便可以进行双向数据传递
实时推送技术
- 实时推送技术的实现大体有两种方式，Ajax轮询 和 WebSocket
-
- Ajax轮询 是通过设定特定的时间间隔(如：1s), 定时向服务器发送HTTP请求，从而获取数据，达到实时推送的效果。这种传统的形式有明显的缺点，就是客户端需要不断地向服务端发送请求，增加服务器压力
- WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯
- ws握手与数据传输
WebSocket 解决了什么问题：
WebSocket 的出现，让客户端可以主动向服务器端发送信息，使得浏览器具备了实时双向通信的能力,这就是 WebSocket 解决的问题
- 带宽问题：WebSocket 相对于 HTTP 来说协议头更加小，同时按需传递。
- 数据实时性问题：WebSocket 相对于轮询和长轮询来说，能够实时传递数据，延迟更小。
- 状态问题：相较于 HTTP 的无状态请求，WebSocket 在建立连接后能够维持特定的状态。
使用 Webscoket
创建实例
- var Socket = new WebSocket(url, [protocol]); 也可使用ReconnectingWebSocket
-
- 第一个参数 url, 指定连接的 URL
- 第二个参数 protocol 是可选的，指定了可接受的子协议
发送消息
Socket.onopen = function(){
// Web Socket 已连接上，使用 send() 方法发送数据
let params = {
data: '测试发送数据'
}
Socket.send(JSON.stringify(params))
alert("数据发送中...")
}
接收消息
Socket.onmessage = function (e) {
let res = JSON.parse(e.data)
alert("数据已接收...")
}
实现websocket断线重连
var ws = new WebSocket('ws:../../websocket');
ws.onmessage = function(msg){
console.log('msg:',msg);
//do something
};
//把刚才干的事情重写一遍
function reconnect (){
rews = new WebSocket('ws:../../websocket');
rews.onmessage = function(){
//dosomthing
};
rews.onclose = function(){
//dosomthing
};
}
//每隔5秒去调用一次
var disConnect = function(){
setTimeout(function(){
reconnect();
},5000);
}
//函数放在onclose里
ws.onclose = disConnect;
