uniapp使用websocket,后端使用thinkphp5.1和workerman

1. 基于ThinkPHP5.1框架,使用TP官方手册上的扩展库:

composer require topthink/think-worker=2.0.*

 安装完之后,找到目录vendor/topthink/think-worker ,里面就是开启worker服务的指令的代码

2. 执行php think worker:gateway出现GatewayWorker Not Support On Windows.

解决方案:https://blog.csdn.net/weixin_44423832/article/details/104463478

3. 接下来,使用uniapp的websocket的注意事项:

 其中需要注意一点:uni.onSocketOpen这个函数只能调用一次,不能出现多个,只有一个会生效

页面初始化 需要发送消息 需要在uni.onSocketOpen 中使用 uni.sendSocketMessage

之后,如果想要发送消息,只需要调用uni.sendSocketMessage即可

data(){
    return {
        isSocketClose:false,    // 是否关闭socket
        reconnectCount:5,       // 重连次数
        connectIndex:1,			//第几次连接websocket 不超过reconnectCount的数字
        heartbeatInterval:"",   // 心跳定时器
        isStart:false,          // 是否启动设备
        pingInterval:5000,		//定时发送心跳包 '{"type":"pong"}'
        pingData:{"type":"pong"},			//心跳包数据
    }
}

methods{
    //连接websocket
			connectWebsocket(){
				let that = this;
				uni.connectSocket({
				  url: that.websocket_url,//websocket的链接
				  success:function(res){
					//连接成功
					// that.connectIndex = 1;
					console.log("调用connectSocket接口成功,正在尝试连接webSocket:"+JSON.stringify(res));
				  },
				  fail:function(res){
					  //这里的失败 不会触发 --
					  console.log("调用connectSocket接口失败:"+JSON.stringify(res));
				  }
				});
				
				//打开websocket连接
				uni.onSocketOpen(function (res) {
					console.log("连接webSocket成功,正在尝试发送消息:"+JSON.stringify(res));
					//定时连接-发送心跳包
					that.sendPingData();
					//发送登录消息--每次连接都要发送登录消息
					that.sendLoginMsg();
				});
				
				//连接断开检测
				uni.onSocketError(function (res) {
					  console.log('WebSocket连接打开失败,请检查!');
						//停止发送心跳
					  clearInterval(that.heartbeatInterval)
						//如果不是人为关闭的话,进行重连
					  if(!that.isSocketClose){
						that.reconnect()
					  }
				});
				 // 监听连接关闭
				uni.onSocketClose(function (e) {
					console.log('WebSocket连接关闭!');
					clearInterval(that.heartbeatInterval)
					if(!that.isSocketClose){
						that.reconnect()
					}
				});
				//接收websocket消息
				uni.onSocketMessage(function (res) {
					let msg = JSON.parse(res.data);
					console.log("接收websocket消息:",msg);
					that.screenMsg(msg);
				});
				
			},
			//重连websocket
			reconnect(){
				let that = this;
				//重连,先结束心跳;
				clearInterval(that.heartbeatInterval);
				//断线后重连几次
				if(that.connectIndex <= that.reconnectCount){
					console.log("这是第"+that.connectIndex+"次重连...");
					that.connectIndex++;
					that.connectWebsocket();
				}else{
					console.log("已达到最大重连数:"+that.reconnectCount+",不再进行重连!");
				}
			},
			//开启定时器
			sendPingData(){
				let that = this;
				that.sendWebSocket({'msg':'这是定时器'},1);
			},
			//发送登录消息
			sendLoginMsg(){
				let that = this;
				var nowDate = new Date();
				let content = {text:that.user_info.nickname+"已登录"};
				let msg = {type:'login',room_id:that.room_id,msg:{view_index:0,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:'text',userinfo:that.user_info,content:content}}
				that.sendWebSocket(msg);
			},
			//触发发送websocket
			/**
			 * @param {Object} msg 发送的内容
			 * @param {Object} type 是否调用定时心跳 -- 一个页面只能使用一个onSocketOpen
			 */
			sendWebSocket(msg,type){
				let that = this;
				// console.log(msg);
					switch(type){
						case 1:
							clearInterval(that.heartbeatInterval)
							// 5秒发送一次心跳
							that.heartbeatInterval = setInterval(()=>{
								console.log("定时器:"+that.pingInterval);
								uni.sendSocketMessage({
								  data: JSON.stringify(that.pingData),
								  success:function(res){
									console.log("发送websocket定时心跳包成功:"+JSON.stringify(res));
								  },
								  fail:function(res){
									console.log("发送websocket定时心跳包失败:"+JSON.stringify(res));
								  }
								});
							},that.pingInterval)
							break;
						case 0:
						default:
							uni.sendSocketMessage({
							  data: JSON.stringify(msg),
							  success:function(res){
								console.log("发送websocket消息成功:",msg);
							  },
							  fail:function(res){
								console.log("发送websocket消息失败:",msg);
							  },
							  complete:function(res){
								  console.log("发送websocket操作完成:",msg);
							  }
							});
							break;
					}
			
			},
}

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值