一、项目根目录main.js添加全局引入
import '@/utils/websocket'二、在根目录app.vue 中初始化WebSocket连接
<template><div id="app"><router-view /></div>
</template><script>import store from './store'
export default {name: 'App',created() {// 因为我的页面有缓存机制，用户下次有可能直接打开某个登录后才能访问的页面 比如F5刷新了某个页面 需要重连// 又比如后端服务器因为什么原因突然中断了一下 也需要重新连接WebSocket// 每3秒检测一次websocket连接状态 未连接 则尝试连接 尽量保证网站启动的时候 WebSocket都能正常长连接setInterval(this.WebSocket_StatusCheck, 2000)},methods: {// 1、WebSocket连接状态检测：WebSocket_StatusCheck() {//如果登录了情况下，验证是否已经绑定if(store.getters.token != undefined || store.getters.token != null){if (!this.$WebSocket.WebSocketHandle || this.$WebSocket.WebSocketHandle.readyState !== 1) {this.WebSocketINI()}else{this.$WebSocket.WebSocketHandle.send(JSON.stringify({type: 'ping'}))}}},// 2、WebSocket初始化：async WebSocketINI() {// 1、浏览器是否支持WebSocket检测if (!('WebSocket' in window)) {return}// 2、从后台提取WebScoket服务器连接地址：根据自己业务接口获取 或者直接跳过 下面直接写死/*const tmpResource = await this.$Api.Resource.Get('OtherSets_WebSocket_Address').then(res => {return res})*/const tmpWebsocketSrverAddress = 'ws://你的地址'//可以直接赋值如：ws://127.0.0.1:1234// 3、创建Websocket连接const tmpWebsocket = new WebSocket(tmpWebsocketSrverAddress)/*const protocols = ['base64url.bearer.authorization.sockjs.nodecode.ly']; // 自定义headerconst tmpWebsocket = new SockJS(tmpWebsocketSrverAddress)*/// 4、全局保存WebSocket操作句柄：main.js 全局引用this.$WebSocket.WebsocketINI(tmpWebsocket)// 5、WebSocket连接成功提示tmpWebsocket.onopen = function(ev){}tmpWebsocket.onmessage = function(ev){const datas = JSON.parse(ev.data)if(datas.type == 'ping'){if(datas.client_id != undefined){store.dispatch('user/bindInfo',{client_id:datas.client_id}).then(res => {if(res == 2){}else{this.WebSocketINI()}})}}if(datas.type == 'close'){if(datas.eve == 'repeat'){store.dispatch('user/repeatToken')}else if(datas.eve == 'expire'){store.dispatch('user/expireToken')}}}//6、连接失败提示tmpWebsocket.onclose = function(ev) {console.log(ev)store.dispatch('user/resetToken')}}}
}
</script>
三、提前说明
明天开始调试链接业务
