前端 websocket 长连接

websocket 是什么？

websocket 是一种通信协议，只需一次http握手就可以建立持久连接，并且能进客户端与服务端行双向通信，它允许服务端主动给客户端推送消息。

websocket 如何建立？

websocket 是现代浏览器的一个内置对象，通过一个构造函数 new Websocket(url) 便可建立连接
例：

webSocket 4个状态：

1、ws.onopen()连接成功
2、ws.onclose()连接关闭
3、ws.onerror()连接出错
4、ws.onmessage()服务器返回信息解析

方法：

1、ws.send()发送信息
2、ws.close()关闭连接

在Vue中使用

data(){
	retrun {
		ws: null, // WebSocket实例
		time: 5000, // 计时器时间
	}
},
created(){
	this.initWebSocket()
},
methods:{
	initWebSocket(){
		if (window.WebSocket){
			let ws = new WebSocket('地址')    // 建立连接
			this.ws = ws
			// 服务器连接成功
			ws.onopen = function(){
				console.log('连接成功')
				ws.send('hello') // 给后台发消息
				this.heartbeat() // 开启心跳
			}
			// 服务器连接关闭
			ws.onclose = function(){
				console.log('连接关闭')
			}
			// 服务器连接出错
			ws.onerror = function(){
				console.log('连接出错')
			}
			// 解析信息
			ws.onmessage = function(e){
				console.log(e,'接收数据')
			}
		},
		// 心跳
		heartbeat(){
			setInterval(() => {
            	this.ws.send('心跳')
        	}, this.time);
		}
	}
}