uni-app vue3封装websocket,支持微信小程序

一、创建useWebSocket.js 文件

javascript 复制代码
// useWebSocket.js 

// 获取链接的URL前缀
import {
	BASE_URL
} from "./request";
 
import {
	ref,
	onMounted,
	onBeforeUnmount
} from "vue";

// 假设我们使用 uni-app 的 globalData 或 Vuex 来管理用户状态  
// 这里为了简单起见,我们假设用户ID是直接从某处获取的  

const useWebSocket = (
	url,
	reconnectInterval = 10000,
	maxReconnectAttempts = 5
) => {
	const isMounted = ref(true);
	const isConnected = ref(false);
	const messages = ref([]);
	let reconnectAttempts = 0;

	const connect = () => {
		if (isConnected.value) {
			uni.closeSocket(); // 关闭已有的 WebSocket 连接  
		}

		const uri = `ws://${BASE_URL}/websocket/tender/${url}`;

		// 使用微信小程序的 WebSocket API  
		uni.connectSocket({
			url: uri,
			success: () => {
				console.log("WebSocket连接已打开");
				isConnected.value = true;
				// 监听消息  
				uni.onSocketMessage((res) => {
					messages.value = JSON.parse(res.data);
				});

				// 监听WebSocket的关闭  
				uni.onSocketClose(() => {
					console.log("WebSocket连接已关闭");
					isConnected.value = false;
					if (isMounted.value && reconnectAttempts < maxReconnectAttempts) {
						setTimeout(connect, reconnectInterval * (reconnectAttempts + 1));
						reconnectAttempts++;
					}
				});

				// 监听WebSocket的错误  
				uni.onSocketError((res) => {
					console.error("WebSocket发生错误:", res.errMsg);
					if (isMounted.value) {
						setTimeout(connect, reconnectInterval);
					}
				});
			},
			fail: (err) => {
				console.error("WebSocket连接失败:", err);
			}
		});
	};

	const sendMessage = (message) => {
		if (isConnected.value) {
			uni.sendSocketMessage({
				data: message,
				success: () => {
					console.log('消息发送成功');
				},
				fail: (err) => {
					console.error('发送失败', err);
				}
			});
		}
	};

	onMounted(() => {
		isMounted.value = true;
		connect();
	});

	onBeforeUnmount(() => {
		isMounted.value = false;
		if (isConnected.value) {
			uni.closeSocket();
		}
	});

	return {
		isConnected,
		messages,
		sendMessage
	};
};

export default useWebSocket;

二、在 .vue文件中使用

javascript 复制代码
<script setup>

import {
		onLoad
	} from "@dcloudio/uni-app";

	import {
		ref,
		watchEffect
	} from 'vue';
// 引入useWebSocket
import useWebSocket from "@/api/useWebSocket.js";
onLoad((options) => {
		id.value = options.id
		messages.value = useWebSocket(options.id, 10000, 5);
	})

// 监听messages
watchEffect(() => {
		let timeVal = {
			...messages.value
		};
		console.log(timeVal);
	})

</script>
相关推荐
The_era_achievs_hero1 小时前
微信小程序71~80
微信小程序·小程序
米粒宝的爸爸2 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw53 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !3 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
高压锅_12203 小时前
Django Channels WebSocket实时通信实战:从聊天功能到消息推送
python·websocket·django
澄江静如练_6 小时前
微信小程序发体验版
微信小程序·小程序
颜渊呐8 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长10 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
流口水的兔子10 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序