2021-03-04

uniapp通过webSocket解决多端登录的问题

翻看了网上大多数大佬的解决方案大多大同小异，都遵循一个 链接-发送消息-接收消息-处理消息的步骤

1. 先在data中定义数据（若果有需要）

			// socket 连接参数
			isSocketClose:false,    // 是否关闭socket
			reconnectCount:5,       // 重连次数
			heartbeatInterval:"",   // 心跳定时器

2. 在methods中操作socket

//  ------------------------------------------------ socket start ---------------------------------------------
		sokcet(){
				//WebSocket的地址
				var url = 'ws://*************'
				var _this = this
				// 连接
				uni.connectSocket({
					url: url,
					success: () => {
						console.log('lianjiechenggong')
					},
					fail:(err)=>{
						uni.showtotal({
							title: 'socket链接失败！',
							icon: 'none'
						})
					}
				});
				// 连接打开
				uni.onSocketOpen(function (res) {
					console.log('WebSocket打开'); 
					//断线后重连几次
					_this.reconnectCount = 5
					// 5秒发送一次心跳
					_this.heartbeatInterval = setInterval(()=>{
						_this.sendMsg(要发送的内容)
					},3000)
				});
				// 监听连接失败
				uni.onSocketError(function (res) {
				  console.log('WebSocket连接打开失败，请检查！');
			   //停止发送心跳
				  clearInterval(_this.heartbeatInterval)
			  //如果不是人为关闭的话，进行重连
				  if(!_this.isSocketClose){
					_this.reconnect(url)
				  }
				});
				// 监听连接关闭
				uni.onSocketClose(function (e) {
					console.log('WebSocket连接关闭！');
					clearInterval(_this.heartbeatInterval)
					if(!_this.isSocketClose){
						_this.reconnect(url)
					}
				});
				// 监听收到信息
				uni.onSocketMessage(function (res) {
					//  这里根据返回的数据进行相应的操作
				})
				// 如果需要重连   
				// const reconnect = setInterval((url) =>{  // 断线重连
				// 	// console.log(`第${5-this.reconnectCount}次断线重连中...`)
				// 	_this.reconnectCount--
				// 	if(this.reconnectCount <= 0){
				// 		return
				// 	}else{
				// 		// 连接
				// 		uni.connectSocket({
				// 			url: url,
				// 		});
				// 	}
				// },3000)
				
		},
		reconnect (url) {
			var _this = this
			console.log('socket重连了')
			// setInterval(() => {
			// 	_this.reconnectCount--
			// 	if(this.reconnectCount <= 0){
			// 		return
			// 	}else{
			// 		// 连接
			// 		uni.connectSocket({
			// 			url: url,
			// 		});
			// 	}
			// }, 3000)
		},
		sendMsg(msg){   //向后端发送命令
			try{
				//通过 WebSocket 连接发送数据
				uni.sendSocketMessage({
					data: msg,
					success: () => {
						console.log('发送成功奥里给', msg)
					},
					fail: () => {
						console.log('发送失败给爷爬')
					}
				});
			}catch(e){
				this.isSocketClose = true;
				uni.closeSocket()
			}
		}
		//  ------------------------------------------------ socket end ---------------------------------------------

3. 最后是调用socket方法------------------在你需要的地方调用
   4.这个问题解决采用的大佬@yun_71db的方案，万分感谢href