什么是WebSocket？WebSocket在Vue中如何使用？
什么是Websocket？
通俗说， WebSocket是一种数据通信协议，用于客户端和服务端数据通信。类似于http协议，但http协议通信只能由客户端发起，就比如我们客户端向服务器发送请求，服务器只会返回给我们查询的结果，不能做到服务器主动向客户端推送消息。
我们想要双向对话，且服务器有连续的状态变化，我们可以使用"轮询"的方法：每隔一段时间，就发送一个请求，服务器返回给我们最新的状态。但是这样会非常浪费资源（需要不停的连接服务器，或者HTTP始终打开着），效率就非常低了。
所以最有效的解决方法就是使用WebSocket：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向对话。
Vue中使用WebSocket
- 首先我们需要先New WebSocket构造函数
let url = config.wsUrl
this.ws = new WebSocket(url)
之后我们就可以在ws上去监听WebSocket状态
- 监听WebSocket连接
this.ws.addEventListener("open", e => {
console.log('连接已经建立！');
//连接建立完成后我们就可以发送消息
this.ws.send("heartbeat"); //发送消息
})
//或者
this.ws.onopen = () => {
console.log('连接已经建立！');
}
- 监听WebSocket接收消息
this.ws.addEventListener("message", (e) => {
console.log('收到消息！', e);
//收到消息后我们就可以对消息进行处理
})
//或者
this.ws.onmessage = (e) => {
console.log('接受到信息', e);
}
- 监听WebSocket连接关闭
this.ws.addEventListener("close", (e) => {
console.log('连接已断开！');
})
//或者
this.ws.onclose = () => {
console.log('连接已断开！');
}
- 监听WebSocket错误
this.ws.addEventListener("error",(e)=>{
console.log('报错', e);
})
//或者
this.ws.onclose = (e) => {
console.log('报错', e);
}
实际如何使用：
initWebSocket() {
this.flag = false //通过flag对websocket关闭后再重启
//这里我把请求的路径放在了config文件中了（ws://10.168.245.148:7001）
let url = config.wsUrl
this.ws = new WebSocket(url)
this.ws.addEventListener("open", e => {
this.sendHeartbearTime = new Date().getTime() //发送心跳时间
this.getHeartbearTime = new Date().getTime() //接收心跳时间
this.timer = setInterval(_ => {
this.sendHeartbearTime = new Date().getTime() //重新获取发送心跳时间
if (this.sendHeartbearTime - this.getHeartbearTime >= 20000 || !this.ws) {
//间隔20s心跳超时重启
clearInterval(this.timer) //清除定时器
this.flag = true
this.ws && this.ws.close()
} else {
//向服务器发送消息
this.ws.send("heart");
}
}, 1000);
})
this.ws.addEventListener("message", (e) => {
console.log("收到消息", e);
try {
if (e.data != 'heart') {
//处理接收后的操作
} else {
this.getHeartbearTime = new Date().getTime() //重新获取接收心跳开始时间
}
} catch (e) {
console.log(e);
}
})
this.ws.addEventListener("close", (e) => {
this.ws = null
if (this.flag) this.initWebSocket() //重启websocket
})
this.ws.onerror = e => {
this.ws = null
console.log("错误", e);
}
},
created() {
//渲染的DOM开始时创建连接
this.initWebSocket()
},
beforeDestroy() {
//DOM销毁之前关闭连接
this.ws && this.ws.close()
},