ws全局使用
登陆后开启ws连接 login.vue
import { mapActions } from 'vuex';
methods: {
...mapActions('websocket', ['onopenWebSocket']),
userlogin() {
this.$store.dispatch('onopenWebSocket',{
id:'1',
})
}
关闭ws连接 APP.vue
beforeDestroy() {
this.$store.dispatch('disconnectWebSocket')
},
destroyed() {
this.$store.dispatch('disconnectWebSocket')
},
ws方法
store/modules/websocket.js文件代码
let socket = null;
let timer = null;
export default {
state: {
message: null,
sellerid: '',
account: '',
close: false,
time: 60000,
},
mutations: {
SOCKET_ONOPEN (state, info) {
console.log('开启WebSocket连接', info);
timer = setInterval(() => {
info.workerID = localStorage.getItem('workerID')
info.connectionID = localStorage.getItem('connectionID')
info.id = localStorage.getItem('id')
info.HEARTBEAT_TIME = parseInt(new Date().getTime() / 1000);
console.log('info信息', { ...info });
if (info.connectionID && info.workerID) {
console.log('发送心跳信息', { ...info });
socket.send(JSON.stringify(info));
} else {
console.log('未发送心跳信息', { ...info });
}
}, state.time);
},
SOCKET_ONCLOSE (state, event) {
console.log('WebSocket连接已关闭');
if (state.close) {
clearInterval(timer);
socket.send('close');
} else {
this.commit('againRequest')
}
},
SOCKET_ONMESSAGE (state, message) {
state.message = message;
console.log('收到消息:', message);
if ((message && message.workerID) || message.workerID == 0) localStorage.setItem('workerID', message.workerID)
if ((message && message.connectionID || message.connectionID == 0)) localStorage.setItem('connectionID', message.connectionID)
if (message.success != 'HEARTBEAT_OK') {
console.log('收到消息---需要重连');
this.commit('againRequest')
}
},
SOCKET_ONERROR (state, event) {
console.error('WebSocket连接错误:', event);
this.commit('againRequest')
},
againRequest (state) {
console.log('重新开启ws');
clearInterval(timer);
localStorage.removeItem('workerID')
localStorage.removeItem('connectionID')
setTimeout(() => {
this.dispatch('onopenWebSocket', {
id:'1'
});
}, state.time)
}
},
actions: {
onopenWebSocket ({ state, commit }, data) {
let hasExecuted = false;
state.id= data.id;
socket = new WebSocket(`ws://地址?id=${data.id}`);
socket.onopen = (event) => {
console.log('监听WebSocket事件-----连接ws', event);
commit('SOCKET_ONOPEN', { id: state.sellerid });
};
socket.onclose = (event) => {
console.log('监听WebSocket事件-----关闭ws', event);
if (!hasExecuted) {
commit('SOCKET_ONCLOSE', event);
hasExecuted = true;
}
};
socket.onmessage = (event) => {
commit('SOCKET_ONMESSAGE', JSON.parse(event.data));
};
socket.onerror = (event) => {
console.log('监听WebSocket事件-----连接ws错误');
if (!hasExecuted) {
commit('SOCKET_ONERROR', event);
hasExecuted = true;
}
};
},
disconnectWebSocket ({ state }) {
if (socket) {
state.close = true
socket.send(JSON.stringify('close'));
socket.close();
}
}
}
};
store/index.js
import websocket from './modules/websocket';
modules: {
websocket
}