标签：uniapp console socket 监听 state io 讲解 连接

本篇会详细讲解如何在uniapp开发中去使用长连接，如有疑问可以下方评论或者私聊。

一、引入第三方插件socket.io

import io from '@/common/uni-socket.io.js';

二、建立长连接

onSocket(state,user) {
       //每次建立长连接之前先断开连接，防止重复
		if(state.socket){
			state.socket.close()
		}
	  	const S = io(socketUrl,  {
	  		//长连接接口
			path: 'http://xxxx/websocket/socket.io/',
			//后端需要传的参数
	  		query: {
				userId:user.id,
				type:user.type
			},
			//传输协议定为websocket
	  		transports: ['websocket'],
	  		//限制连接最长时间，超过5秒则断开报错，防止网络不好时发送多个请求
	  		timeout: 5000
	  	})
	  	// 监听连接
	  	//connect为与后端约定的参数，可变参数
	  	S.on('connect', () => {
	  		console.log('socket已连接')
	  		//这里可以执行连接成功之后的语句
	  	})
	  	// 移除监听事件
	  	const removeListener = () => {
  			if (S) {
				S.removeListener()//一般用不到
			}
  		}
  		// 监听失败
		S.on('error',()=>{
			removeListener()
			state.socket = null
			console.log('socket连接失败')
			//监听失败时，可以再次调用监听事件
		})
		// 连接错误
	  	S.on('connect_error', d => {
				removeListener()
				state.socket = null
	  		console.log('socket连接失败', d);
	  	});
	  	// 连接超时
	  	S.on('connect_timeout', d => {
				state.socket = null
	  		console.log('socket连接超时', d);
	  	});
	  	// 断开连接
	  	S.on('disconnect', reason => {
				removeListener()
				state.socket = null
	  		console.log('socket断开连接', reason);
	  	});
	  	// 重新连接
	  	S.on('reconnect', attemptNumber => {
	  		console.log('socket成功重连', attemptNumber);
	  	});
}

以上为建立长连接中可能会出现种种情况，可根据不同需求进行操作

三、连接监听通道，获取数据

//获取不同的数据后端会开启不同的监听通道，可理解等同于接口路径
S.on(`接口路径或者所需参数`,topicMarket=>{}
//例如
S.on(`/topic/market-${this.type}/${this.obj.currencyPair}/${this.index}`,topicMarket=>{
	this.Message=topicMarket//将监听到的数据进行保存
}

经过以上步骤就完成了长连接的建立与监听，后面只需要把获取到的数据渲染到页面上即可

四，渲染数据

<template>
	<view>
		<text>长连接数据：{{Message.info}}</text>
	</view>
</template>
<script>
import io from '@/common/uni-socket.io.js';
export default {
	data() {
		return {
			Message:{}
		};
	},
}
</script>

最后附上完整的代码

<template>
	<view>
		<text>长连接数据：{{Message.info}}</text>
	</view>
</template>
<script>
import io from '@/common/uni-socket.io.js';
export default {
	data() {
		return {
			Message:{}，
			state：null,
			user:{
				id:'1111111',
				type:1
			}
		};
	},
	methods: {
		onSocket() {
	       //每次建立长连接之前先断开连接，防止重复
			if(this.state.socket){
				this.state.socket.close()
			}
		  	const S = io(socketUrl,  {
				path: 'http://xxxx/websocket/socket.io/',
		  		query: {
					userId:this.user.id,
					type:this.user.type
				},
		  		transports: ['websocket'],
		  		timeout: 5000
		  	})
		  	// 监听连接
		  	S.on('connect', () => {
		  		console.log('socket已连接')
		  		//这里可以执行连接成功之后的语句
		  		this.state.socket = S
		  		this.monitoringData()//长连接连接成功之后才能进一步去监听通道
		  	})
		},
		monitoringData(){
			this.state.socket.on(`/topic/market-${this.user.type}`,topicMarket=>{
				this.Message=topicMarket
			}
		}
	},
	onLoad(){
		this.onSocket()
	}
}
</script>

最后如果看完对你有用，来一波三连，谢谢支持，有问题可以评论留言

标签：uniapp,console,socket,监听,state,io,讲解,连接
来源： https://blog.csdn.net/qingshui_zhuo/article/details/117672720

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。