封装WebSocket通讯

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();
},