uniapp微信小程序WebSocket聊天

最新推荐文章于 2025-03-24 14:41:36 发布

JOJORiny

最新推荐文章于 2025-03-24 14:41:36 发布

阅读量1.3k

点赞数 3

文章标签： websocket 微信小程序 node.js

本文链接：https://blog.youkuaiyun.com/qq_45963071/article/details/123339129

版权

本文介绍如何使用Vue.js实现WebSocket连接的建立、维护与心跳检测，包括onSocketOpen、onSocketMessage和定时发送心跳包，确保连接稳定并及时响应服务器消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data() {
			return {
				timeout: 10000, 
				timeoutObj: null,
				socketOpen: false,
			}
		},

methods: {
    openConnection() {
				// 打开连接
				// uni.closeSocket(); // 确保已经关闭后再重新打开
				uni.connectSocket({
					url: 'wss://wyt.yuyok.com:2346',
					success(res) {
						console.log('连接成功 connectSocket=', res);
					},
					fail(err) {
						console.log('连接失败 connectSocket=', err);
					}
				});
				//监听连接成功
				uni.onSocketOpen(res => {
					this.socketOpen = false;
					this.code = '连接成功';
					console.log('连接成功');
					let data = {
						content: '你好',
						mode: 'heart',
						user_id: this.userInfo.uid
					}
					//连接成功就发检测
					//1008的报错，1000是正确
					//心跳检测成功后发消息绑定
					uni.sendSocketMessage({
						data: JSON.stringify(data),
						success: res => {
							console.log('连接中....');
							data.mode = 'accept'
							uni.sendSocketMessage({
								data: JSON.stringify(data),
								success: res => {
									console.log('连接中....绑定成功');
								},
							});
						},
						fail: err => {
							console.log('连接失败重新连接....');
						}
					});
				});
				uni.onSocketError(res => {
					this.code = '连接打开失败';
					console.log('WebSocket连接打开失败，请检查！');
				});
				uni.onSocketClose(res => {
					this.code = '连接已关闭';
					clearInterval(this.timeoutObj);
					console.log('WebSocket 已关闭！');
				});
				this.onSocketMessage(); // 打开成功监听服务器返回的消息
			},
			//	打开成功监听服务器返回的消息
			onSocketMessage() {
				// 消息
				this.timeout = 10000;
				this.timeoutObj = null;
				//监听WebSocket连接打开事件。
				uni.onSocketMessage(res => {
					this.socketOpen = true;
					this.getSocketMsg(JSON.parse(res.data)); // 监听到有新服务器消息
				});
			},
			// 监听到有新服务器消息
			getSocketMsg(reData) {
				// 监听到服务器消息
				console.log('收到服务器消息', reData);
				if(reData.errcode == 1000){
					this.code = '连接中'
				}else if(reData.errcode == 1008){
					this.code = '连接断开'
				}
				this.reset(); // 检测心跳reset,防止长时间连接导致连接关闭
			},
			// 检测心跳reset
			reset() {
				clearInterval(this.timeoutObj);
				this.start(); // 启动心跳
			},
			// 启动心跳 start
			start() {
				let data = {
					content: '你好',
					mode: 'heart',
					user_id: this.userInfo.uid
				}
				this.timeoutObj = setInterval(() => {
					//1008的报错，1000是正确
					uni.sendSocketMessage({
						data: JSON.stringify(data),
						success: res => {
							console.log('连接中....');
						},
						fail: err => {
							console.log('连接失败重新连接....');
							this.openConnection();
						}
					});
				}, this.timeout);
			}
}