详细讲解uniapp开发如何使用socket长连接

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

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

链接:https://pan.baidu.com/s/1DyD7PKTjdo1vYr541gzU7g
提取码:rehe

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>

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