VUE2 + WebSocket + element Notification

VUE2 + WebSocket + element Notification

1.创建socket.global.js

/**
 * 全局websocket
 */
export default {
	WebSocket: {},
	socketUrl: "192.168.1.xxx:8080/ws",
	type: "pc",
	setWebSocket: function(socketContent) {
		this.WebSocket = socketContent;
	}
}

2.main.js 引入socket

import socketGlobal from '/src/socket/socket.global.js'
// 全局socket
Vue.prototype.socketGlobal = socketGlobal;

3.socket方法逻辑,记得自己定义notifications参数

		    /**
			 * webSocket 连接
			 */
			connectSocket() {
				const userToken = getToken("pcToken");
				if (!userToken) return;
				let that = this;
				// 连接状态
				let connected = false;
				// 是否正在连接
				let connecting = true;
				let messageIdData = [];
				if (!("WebSocket" in window)) {
					return console.log("浏览器不支持socket");
				}
				const locationUrl = window.location.href;
				const connectionPrefix = locationUrl.includes("https") ? "wss" : "ws";
				const msg = JSON.stringify({
					"type": that.socketGlobal.type,
					"token": userToken
				});
				that.webSocket = new WebSocket(connectionPrefix + "://" + that.socketGlobal.socketUrl + msg);
				that.socketGlobal.setWebSocket(that.webSocket);
				/**
				 * 再次发送消息
				 */
				const onceMoreSend = (time = 10000) => {
					// 无消息,每隔10秒监听一次
					setTimeout(() => {
						console.log("socket 发送消息", msg);
						that.webSocket.send(msg);
					}, time);
				}

				/**
				 * 连接成功
				 */
				that.webSocket.onopen = function() {
					connected = true;
					connecting = false;
					that.webSocket.send(msg);
				};

				/**
				 * 接收消息
				 * @param {Object} event
				 */
				that.webSocket.onmessage = async (event) => {
					const onMsgData = JSON.parse(event.data);
					// 连接完成了,再开始
					if (connected && !connecting) {
						// 有消息并且是有数据返回的
						if (onMsgData && onMsgData.status) {
							const notifyList = onMsgData.data;
							// 有数据才渲染（再次确实是否有数据）
							if (notifyList && notifyList.length) {
								let notifyRecord = {},
									messageId = 0,
									messageLink = "";
								// 开始发送消息
								let senMsgPromise = new Promise((resolve, reject) => {
									for (let notifyIndex = 0; notifyIndex < notifyList
										.length; notifyIndex++) {
										setTimeout(() => {
											const notifyItem = notifyList[notifyIndex];
											// 是否是最后一条信息
											const lastMsg = notifyIndex + 1 == notifyList.length;
											// 已经渲染了就跳出
											if (that.notifications[notifyItem.messageId]) {
												if (lastMsg) {
													resolve(true);
												}
											} else {
												// 开始处理逻辑
												notifyRecord.duration = 0;
												notifyRecord.title = notifyItem.title;
												notifyRecord.message = notifyItem.msg;
												notifyRecord.iconClass = "notify-record__icon";
												// 用户已读后,给服务端发消息
												notifyRecord.onClick = () => {
													that.closeNotification(true, notifyItem
														.messageId, notifyItem.link);
												};
												notifyRecord.onClose = () => {
													that.closeNotification(false,
														notifyItem
														.messageId);
												};
												let notifyInfo = that.$notify.info(
													notifyRecord);
												that.notifications[notifyItem.messageId] =
													notifyInfo;
												if (lastMsg) {
													resolve(true);
												}
											}
										}, 1000);
									};
								});
								// 已渲染完成,重新发送消息
								Promise.all([senMsgPromise]).then((result) => {
									if (result[0] === true) {
										onceMoreSend();
									}
								});
							} else {
								// 数据不对,重新请求
								onceMoreSend();
							}
						} else {
							// 无消息,每隔10秒监听一次
							onceMoreSend();
						}
					}
				};

				/**
				 * 关闭消息
				 */
				that.webSocket.onclose = function() {
					connected = false;
					console.log("连接已关闭...");
					//断线重新连接
					setTimeout(() => {
						connecting = true;
						that.connectSocket();
					}, 10000);
				};
			},
			/**
			 * 关闭通知
			 * @param {Object} messageId
			 */
			closeNotification(jump, messageId, link) {
				if (!messageId) return console.log("无消息ID");
				// 无跳转就直接关闭
				if (jump && !link) return this.notifications[messageId].close();
				// 清除该消息并设置为已读
				if (!this.notifications[messageId]) return console.log("无消息ID~");
				// 走接口清除消息
				delete this.notifications[messageId];
				// 如果需要跳转
				if (jump && link) {
					return window.open(link);
				}
			}