提示:在vue全局使用vue-native-websocket ,断联重试
1、客户端
1、安装 vue-native-websocket
npm install vue-native-websocket --save
2 、引用
// 引用
import store from '@/store'
import VueNativeSock from 'vue-native-websocket'
// websocket url
const socketUrl = 'ws://' + window.location.host + '/ws';
// 配置
Vue.use(VueNativeSock, socketUrl , {
store: store, // 使用vuex存储
format: "json", // 数据格式
reconnection: true, // 是否自动重连,默认false
reconnectionAttempts: Infinity, // 重连次数 无限制
reconnectionDelay: 2000, // 再次重连等待时常
})
3 、vuex相关代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
socket: {
isConnected: false,
message: '',
reconnectError: false,
},
websocketMessage: "",// 服务端返回的信息
socketTimestamp: new Date().getTime(),//时间戳去监听数据的改变
}
, mutations: {
//websocket
//一旦获取到端端返回的信息,就改变时间戳
setSocketMessage(state, data) {
state.socketTimestamp = new Date().getTime();
state.websocketMessage = data;
},
// 连接成功
SOCKET_ONOPEN (state, event) {
Vue.prototype.$socket = event.currentTarget
state.socket.isConnected = true
},
// 连接关闭
SOCKET_ONCLOSE (state, event) {
state.socket.isConnected = false
},
// 连接失败
SOCKET_ONERROR (state, event) {
console.error(state, event)
},
// 接收消息
SOCKET_ONMESSAGE (state, message) {
console.info(message)
let data = message;
if (data.status == '0' && data.type) {
switch (data.type) {
case 'mysockert':
this.commit('setSocketMessage',data);
break;
default:
console.log("返回的客户端信息",data)
break;
}
}
state.socket.message = message
},
SOCKET_RECONNECT(state, count) {
console.info(state, count)
},
SOCKET_RECONNECT_ERROR(state) {
state.socket.reconnectError = true;
},
},
modules: {
}
})
4、 监听
vue 页面中使用watch 对时间戳进行监听,当时间戳值改变时进行取值并处理自己的业务
watch: {
'$store.state.socketTimestamp'(old, newVal) {
// 业务处理
this.myMethod(this.$store.state.websocketMessage)
},
},
2、服务端
比较方便的两种方式:1、netty实现 2、spring-integration-ip实现