什么是WebSocket？WebSocket在Vue中如何使用？

什么是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()
},

参考连接：
Vue-WebSocket原理及使用
Vue 使用websocket