1.websocket通信
this.webSocketUrl = `ws://${this.data.server}:8899/ws`;
const eqpCode = this.data.eqpCode;
const params = `pm2 ${type} ${eqpCode}`;
const socket = new WebSocket(this.webSocketUrl);
socket.onerror = (e) => { this.$Message.info(`通讯error,${e}`); }
socket.onopen = (e) => { socket.send(params), console.log("发送参数", e); };
socket.onmessage = (e) => { console.log(`通讯信息返回${JSON.parse(e.data)}`) }
socket.onclose = (e) => { console.log("通讯关闭",e); };
websocket 封装【同一页面,有多个websocket请求】
1.封装
<template>
<div></div>
</template>
<script>
export default {
name: "secsWebsocket",
props: {
webSocketUrl: {
type: Array,
default: () => [],
},
},
watch: {
webSocketUrl: {
handler(newVal) {
newVal?.forEach((item) => {
this.createWebSocket(item);
});
},
},
},
data() {
return {
webSocketList: {}, //websocket List
// 连接标志位
lockReconnect: {},
awaitSendData: {},
beforeDestroy: false,
};
},
methods: {
createWebSocket(server) {
if (!server) return;
try {
// 创建Web Socket 连接
this.webSocketList[server] = new WebSocket(`ws://${server}:8899/ws`);
// 初始化事件
this.initEventHandle(server);
} catch (e) {
// 出错时重新连接
console.log("error");
this.reconnect(server);
}
},
initEventHandle(server) {
// 连接关闭时触发
this.webSocketList[server].onclose = () => {
if (!this.beforeDestroy) {
this.lockReconnect[server] = false;
this.reconnect();
}
};
// 通信发生错误时触发
this.webSocketList[server].onerror = () => {
// 重新创建长连接
};
// 连接建立时触发
this.webSocketList[server].onopen = () => {
this.lockReconnect[server] = true;
if (this.awaitSendData[server]) {
this.send(this.awaitSendData[server], server);
this.awaitSendData[server] = "";
}
};
// 客户端接收服务端数据时触发
this.webSocketList[server].onmessage = (msg) => {
let data = JSON.parse(msg.data);
this.$emit("getSocketData", data, server);
};
},
reconnect(server) {
if (this.lockReconnect[server]) {
return;
}
// 没连接上会一直重连,设置延迟避免请求过多
setTimeout(() => {
this.createWebSocket(server);
}, 2000);
},
send(data, server) {
if (this.lockReconnect[server]) {
// 给服务器发送一个字符串:
console.log("send发送参数", data, server);
this.webSocketList[server].send(data);
} else {
this.awaitSendData[server] = data;
}
},
},
beforeDestroy() {
this.beforeDestroy = true;
this.webSocketUrl.forEach((item) => {
this.webSocketList[item].close();
});
},
};
</script>
2.父组件使用
- html引入
<!-- websocket通信 -->
<Websocket ref="WebSocket" :webSocketUrl="webSocketUrl" @getSocketData="getSocketData" v-if="showWebSocket" />
- 发送参数
//websocket 发送信息
websocketSend(params, server) {
this.$refs.WebSocket.send(params, server);
},
- 接收参数
//连接成功后后端推送过来的数据
getSocketData(data, server) {
console.log("详细页面----链接成功后后端推送过来的数据", data, server);
},
- 父组件websocket创建与销毁
mounted() {
this.getInit();
this.showWebSocket = true;
},
// 导航离开该组件的对应路由时调用
beforeRouteLeave(to, from, next) {
this.showWebSocket = false;
next();
},