Websocket实际使用

1. js文件

//引入vuex
import vuex form '@g/store'
//添加WS_API的对应环境地址
let WS_API
WS_API == 'ws://10.10.10.10'
// websocket对象
let websocket = null
//链接标识 避免重复链接
let isConnect = false
var tokens = ''
//创建链接
let createWebSocket = () => {
	try{
	//获取token拼接ws地址
	//接口中获取
	const wsurl = WS_API + "/socket/"  + res.tonken
	websock = new WebSocket(wsurl)  //创建
	//初始化websocket链接
	initWebsocker()
	}catch(e){
	//如果无法连接上websocket 那么重新连接
	//reConnect()
	}
}
//初始化webSocket连接
let initWebsocker = () => {
	//WebSocket连接字后会调用onopen方法
	websock.onopen = function (e){
		//console.log('socket连接')
		isConnect = true
	}
	//当websocket受到服务器发出的信息之后 回调用onmessage方法 getMsg用来封装获取到服务器的消息进行处理
	websock.onmessage= function (e){
		if(e.data){
			vuex.commit('socketMsg',e.data)
		}
	}
	//当websocket因为各种原因（正常或者异常）关闭之后，会调用onclose方法
	websock.onclose= function (e){
		isConnect = false
		reConnect()
	}
	//当websocket因为异常原因（比如服务器部署，断网等）关闭后，会调用onerror方法
	websock.onclose= function (e){
		isConnect = false
		//链接错误，需要重连
		reConnect()
	}
}
//断线重连后，延迟2秒重新创建websocket连接 rec用来存储延迟请求的代码
let rec 
//定义重连函数
let reConnect = () => {
	//如果已经连上就不用重连
	if(isConnect) return
	rec && clearTimeout(rec)
	//延迟5秒重连 避免多次过频繁请求重连
	rec = setTimeout(function(){
		createWebSocket()
	},2000) 
}
export {createWebSocket}

2. vue文件使用

computed:{
	return this.$route.state.app.socketMsg
},
watch:{
	socketMsg: function(newVal,oldVal){
		//操作数据 推送时添加判断
	}
}