webscoket是h5提供的一种在单个TCP连接上进行全双工通信的协议
webscoket允许服务端主动向客户端推送数据，在webscoket中浏览器和服务器只要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据通信
优点
- 带宽问题
webscoket相对于HTTP来说协议头更小，同时还能按需传递 - 数据实时性
webscoket相对于轮询来说，能够实时传递数据，延迟更小。 - 状态问题
相对于HTTP的无状态请求，webscoket在建立连接之后可以维持特定状态
webscoket API
open -> message -> send -> closed
webscoket心跳机制
这是一个表明client和server连接是否还在的检查机制
原理：使用一个定时器settimeout，每隔一段时间向服务器发送一个pending数据，如果正常服务器会返回一个pending给客户端，客户端可以通过message能够监听到说明连接正常，否则重新连接
//serverUrl
let socketUrl = 'ws://127.0.0.1:3000';
//保存websocket对象
let socket;
// reConnect函数节流标识符
let flag = true;
//心跳机制
let heart = {
timeOut:3000,
timeObj = null,
serverTimeObj = null,
start:function(){
console.log('start');
let self = this;
//清除延时器
this.timeObj && clearTimeout(this.timeObj);
this.serverTimeObj && clearTimeout(this.serverTimeObj);
this.timeObj = setTimeout(function(){
socket.send('兄弟，你还好吗?');//发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
//定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
self.serverTimeObj=setTimeout(function(){
socket.close();
reConnect(socketUrl);
},self.timeOut)
},this.timeOut)
}
}
//建立websocket连接函数
function createWebsocket(url) {
try {
socket = new WebSocket(url);
init();
} catch (e) {
//进行重连;
console.log('websocket连接错误');
reConnect(socketUrl);
}
}
//对WebSocket各种事件进行监听
function init() {
socket.onopen = function () {
//连接已经打开
//重置心跳机制
heart.start();
}
socket.onmessage = function (event) {
//通过event.data获取server发送的信息
//对数据进行操作
console.log(event.data);
//收到消息表示连接正常，所以重置心跳机制
heart.start();
}
socket.onerror = function () {
//报错+重连
console.log('socket连接出错');
reConnect(socketUrl);
}
socket.onclose = function () {
console.log('socket连接关闭');
}
}
//重连函数
//因为重连函数会被socket事件频繁触发，所以通过函数节流限制重连请求发送
function reConnect(url) {
if (!flag) {
return;
}
flag = false;
setTimeout(function () {
createWebsocket(url);
flag = true;
}, 3000)
}
特点
- 建立在TCP协议上，服务端的实现更加容易
- 与HTTP有良好的兼容性，在握手阶段采用HTTP协议，不容易被屏蔽，能够通过各种HTTP代理服务器
- 数据格式轻量，性能开销小，通信高效
- 可以发送文本，二进制数据等等
- 不会出现跨域问题
- 协议标识符ws , 如果加密则是wss
HTTP是无状态的，webscoket解决了HTTP的被动性问题
在HTTP1.1中可以发送多个request然乎接收多个response,但是request = response 而且response是被动获取的。
缺点
不支持低版本IE
可以使用ajax轮询和长轮询
