浅尝websocket
mtonhuang opened this issue · 1 comments
mtonhuang commented
浅尝websocket
mtonhuang commented
前言
最近半年,重构了组内一个项目,主要技术栈为Vue全家桶 ,因为该项目的特殊性,有采集的功能,浏览器经常会跟服务器请求数据,在没有接手之前,项目里用了大量的 ajax轮询,不断地建立HTTP连接,然后等待服务端处理,很是被动,并不能满足日益复杂的业务场景,同样不利于代码的维护。
于是尝试接触websocket,重构了整个项目,虽然过程有诸多困难,但结果总是好的。
一、websocket是什么?
1、websocket是HTML5出的协议,为了解决 HTTP 本身无法解决的某些问题而做出的一个改良设计。
2、Websocket是一个持久化的协议(基于HTTP协议)。
3、Websocket只需要一次HTTP握手,整个通讯过程是建立在一次连接/状态中。
二、websocket用法
1、下载 vue-native-websocket
npm i vue-native-websocket
2、在main.js 中引入并且初始化 websocket
import VueNativeSock from "vue-native-websocket";
// base.lkWebSocket为你服务端websocket地址
Vue.use(VueNativeSock, "ws://xxxx", {
// 启用Vuex集成,store的值为你的vuex
store: store,
// 数据发送/接收使用使用json格式
format: "json",
// 开启自动重连
reconnection: true,
// 尝试重连的次数
reconnectionAttempts: 5,
// 重连间隔时间
reconnectionDelay: 1000
});
3、使用VUEx管理websocket状态
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
socket: {
isConnected: false, // 连接状态
message: "", // 消息内容
reconnectError: false // 重新连接错误
}
},
mutations: {
SOCKET_ONOPEN(state, event) {
// 连接打开触发的函数
Vue.prototype.$socket = event.currentTarget;
state.socket.isConnected = true;
console.log("Connected");
},
SOCKET_ONCLOSE(state, event) {
// 连接关闭触发的函数
state.socket.isConnected = false;
console.log("连接关闭触发");
},
SOCKET_ONERROR(state, event) {
// 连接发生错误触发的函数
console.error(state, event);
},
SOCKET_ONMESSAGE(state, message) {
// 收到消息时触发的函数
state.socket.message = message;
// console.log(message);
},
SOCKET_RECONNECT(state, count) {
// 重新连接触发的函数
console.info(state, count);
},
SOCKET_RECONNECT_ERROR(state) {
// 重新连接失败触发的函数
state.socket.reconnectError = true;
}
}
})
export default store;
4、使用websocket
// xxx.vue
export default {
name: 'xxx',
data() {
return{}
},
mounted() {
// 监听消息接收
this.$options.sockets.onmessage = (res) => {
const that = this;
const data = JSON.parse(res.data);
let xxx = data.xxx;
let result = data.result;
if (result.code === 0) {
switch (xxx) {
case 'xxx':
break;
default:
break;
}
} else {
// 错误处理
}
}
}
}