webscoket之结合pinia 全局状态版本

创作灵感 有一天我接到一个小小需求做手机小程序 和机顶盒大屏端的语音ai助手的消息同步
当时就选了 万恶的websocket  但是它需要挂在全局  我做了语音接受发送模块  页面模块 消息记录模块 以及消息展示模块 和 ai垂类模型切换模块 
分了四大模块  我都有连接使用websocket 那显然 我直接在局部组件去使用new webscoket这个玩意肯定是很不合理的 为了方便本懒狗偷懒 我果断用了一手pinia 和 webscoket结合拉这样 我只用在最外面的破组件里面去init 全局都可以使用这个websocket拉

下面 看破代码

export const useWebsocketStore = defineStore('useWebsocketStore', {
	state: () => ({
		url: "wss://*****:****/chatStream/stream/ws/sync?",
		ws: null,
		reconnect_current: 0,
		reconnect_count: 3,
		reconnect_timer: null,
		reconnect_interval: 3000,
		is_reonnect: false,
		socket_open: false,
		hearbeat_timer: null,
		hearbeat_interval: 5000,
	}),
	actions: {
		initWebSocket(authorization, group_id, onMessage) {
			if (this.ws) {
				return this.ws
			}
			console.log("你老米")

			this.ws = uni.connectSocket({
				url: this.url + "authorization=" + authorization + "&group_id=" + group_id, //接口地址。
				success: (e) => {
					console.log('连接成功', e);
					// 返回实例
				}
			})

			this.ws.onOpen((e) => {
				console.log(
					"webSocket open 连接成功",
					e,
					this.ws
				);

				if (this.reconnect_current == 0) {
					let data = {
						kind: 1, //请求类型 kind 1 首次连接开启
						kindString: "socketStart",
					};

					this.sendMsg(data);
				}

				clearTimeout(this.reconnect_timer);

				this.reconnect_current = 0;
				this.socket_open = true;
				this.is_reonnect = true;
				this.heartbeat();
			});

			this.ws.onClose((e) => {
				console.log(
					"webSocket close 连接已断开",
					e,
					this.reconnect_current
				);
				clearInterval(this.hearbeat_timer);
				this.socket_open = false;
				// 断开重连的处理 查看是否主动断开 来进行重连
				if (this.is_reonnect) {
					// 确立this 指向
					let _this = this;

					this.reconnect_timer = setTimeout(() => {
						// 超过重连次数
						if (_this.reconnect_current > _this.reconnect_count) {
							clearTimeout(_this.reconnect_timer);
							// 释放对象
							_this.ws = null;
							return;
						}
						// 记录重连次数
						_this.reconnect_current++;

						_this.reconnect();
					}, this.reconnect_interval);
				}
			});

			this.ws.onError(() => {
				// console,log("....error")
			});
			this.ws.onMessage((e) => {
				var params = JSON.parse(e.data);
				console.log("webSocket message", params);

				this.messageReceive(params, onMessage);

			});
		},

		messageReceive(e, onMessage) {
			onMessage(e);
		},
		// 发送消息
		sendMsg(data, callback = null) {
			//已开启
			// console.log("执行发送", data, this.ws);
			if (this.ws.readyState == this.ws.OPEN) {

				this.ws.send({
					data: JSON.stringify(data),
					success: (e) => {
						console.log("发送成功==？》", e)
					}
				});

				if (callback) {
					callback();
				}

			}
		},
		heartbeat() {
			if (this.hearbeat_timer) {
				clearInterval(this.hearbeat_timer);
			}

			let _this = this;

			this.hearbeat_timer = setInterval(() => {
				var data = {
					kind: 0, //请求类型 kind 0 心跳包
					kindString: "heartBeat",
				};
				//   console.log("里面==》", _this, JSON.stringify(data));
				_this.sendMsg(data);
			}, this.hearbeat_interval);
		},
		reconnect() {
			if (this.ws && this.socket_open) {
				this.ws.close();
			}

			this.ws = null;
			// console.log("执行重连===>", this);
			this.initWebSocket();
		},
		destory() {
			if (this.ws != null && this.ws.readyState == this.ws.OPEN) {
				console.log("释放对象===》不进行联动")
				clearInterval(this.hearbeat_interval);
				this.is_reonnect = false;
				this.ws.close();

			}
			// 释放对象
			this.ws = null;
		}

	}
});

当然和传统web端的变化区别只在那啥 怎么说来着 api 上面

出示一下使用代码 嘿嘿
 

	import {
		useWebsocketStore
	} from "@/store/infomation";


    const useWebsocket = useWebsocketStore();

    import {
		storeToRefs
	} from "pinia"
   
    const {
		ws
	} = storeToRefs(useWebsocket)
    
    // 多的不说初始化
    useWebsocket.initWebSocket(token.value, IpTVInfo.value.group_id, onMessage)
   
    // 这个用来接收处理消息 其他我就不多写啦宝贝们
    const onMessage = (e) => {
		console.log("前端接收socket消息===>", e, ws.value)


		if (e.type == "group_info") {
			if (e.data.master_number !== userInfo.value.phone) {
				console.log("机顶盒账号与手机账号不符");
				// useWebsocket.destory();
				return;
			};

			IpTVInfo.value = {
				type: 2, // 1是添加 2连接
				telPhone: e.data.master_number,
				group_id: e.data.group_id,
				chat_id: e.data.chat_id,
				app_id: e.data.app_id,
				member_id: e.data.member_id,
			};

			checkId.value = IpTVInfo.value.app_id;
			chatId.value = IpTVInfo.value.chat_id;
			uni.showToast({
				title: `连接成功`,
				icon: 'none'
			})


			console.log("前端接收socket消息后===>", checkId.value, chatId.value, 
       IpTVInfo.value)

			// infomationStore.resetIptvInfo()
		}

		if (e.type === "broadcast") {
			console.log("前端接收socket切换消息===>", e);
			IpTVInfo.value.chat_id = e.data.chatId;
			IpTVInfo.value.group_id = e.data.groupId;
			IpTVInfo.value.app_id = e.data.appId;
			IpTVInfo.value.member_id = e.data.memberId;

			historyList.value = [];
			historytime.value = "";
			// shouTop.value = false
			isUphistory.value = false;
			checkId.value = IpTVInfo.value.app_id;
			chatId.value = IpTVInfo.value.chat_id;
			updateIndex.value++
		}
	};

    //某块发送展示一下
      
      let data = {
					type: 'broadcast',
					data: {
						type: 'switchApplication',
						chatId: chatId.value,
						groupId: IpTVInfo.value.group_id,
						appId: checkId.value,
						memberId: userInfo.value.member_id
					}
				};

	useWebsocket.sendMsg(data);