最近想在uni-app的小程序中使用websocket进行双通讯的,而uni-app的插件市场中对websocket也做了很好的封装,例如:socket.io,但由于后端使用java的websocket,导致我在socket的url总是对应不上那边,所以无奈只能改成原生websocket,而uni-app中websocket很多文章都有介绍,然而直接使用时总是有或多或少的问题,所以对其进行了封装和修改,并且在项目中能正常使用,下面就直接上代码

封装websocket

class websocketUtil {
	//url 和 心跳检测
	constructor(url, time) {
		this.is_open_socket = false //避免重复连接
		this.url = url //地址
		this.data = null
		//心跳检测
		this.timeout= time //多少秒执行检测
		this.heartbeatInterval= null //检测服务器端是否还活着
		this.reconnectTimeOut= null //重连之后多久再次重连

		try {
			return this.connectSocketInit()
		} catch (e) {
			console.log('catch');
			this.is_open_socket = false
			this.reconnect();
		}
	}

	// 进入这个页面的时候创建websocket连接【整个页面随时使用】
	connectSocketInit() {
		this.socketTask = uni.connectSocket({
			url: this.url,
			success:()=>{
				console.log("正准备建立websocket中...");
				// 返回实例
				return this.socketTask
			},
		});
		this.socketTask.onOpen((res) => {
			console.log("WebSocket连接正常!");
			clearTimeout(this.reconnectTimeOut)
			clearTimeout(this.heartbeatInterval)
			this.is_open_socket = true;
			this.start();
			// 注:只有连接正常打开中 ,才能正常收到消息
			this.socketTask.onMessage((res) => {
				console.log(res.data)
				uni.$emit('message', res.data);
			});
		})
		// 监听连接失败,这里代码我注释掉的原因是因为如果服务器关闭后,和下面的onclose方法一起发起重连操作,这样会导致重复连接
		// uni.onSocketError((res) => {
		// 	console.log('WebSocket连接打开失败,请检查!');
		// 	this.is_open_socket = false;
		// 	this.reconnect();
		// });
		// 这里仅是事件监听【如果socket关闭了会执行】
		this.socketTask.onClose(() => {
			console.log("已经被关闭了")
			this.is_open_socket = false;
			this.reconnect();
		})
	}
	
	//发送消息
	send(value){
		// 注:只有连接正常打开中 ,才能正常成功发送消息
		this.socketTask.send({
			data: value,
			async success() {
				console.log("消息发送成功");
			},
		});
	}
	//开启心跳检测
	start(){
		this.heartbeatInterval = setInterval(()=>{
			this.data={value:"传输内容",method:"方法名称"}
			console.log(this.data)
			this.send(JSON.stringify(this.data));
		},this.timeout)
	}
	//重新连接
	reconnect(){
		//停止发送心跳
		clearInterval(this.heartbeatInterval)
		//如果不是人为关闭的话,进行重连
		if(!this.is_open_socket){
			this.reconnectTimeOut = setTimeout(()=>{
				this.connectSocketInit();
			},3000)
		}
	}
}

module.exports = websocketUtil

单页面引入

//引入
import wsRequest from './static/js/websocket.js'
//调用
new wsRequest("ws://xxx:3100/connect/websocket",5000)

全局引入main.js

//main.js

//引入websocket文件
import wsRequest from './static/js/websocket.js'
//开启websocket
let websocket = new wsRequest("ws://xxx:3100/connect/websocket",5000)
//挂载到全局
Vue.prototype.$socket = websocket

发送写入(发送不需要用工具包的方法,因为websocket是全局设置的)

uni.sendSocketMessage({ 
    data: msg 
});

监听信息

uni.$on('message', (res)=>{
    console.log(res);
})

因为websocket是全局的,不需要每个页面都监听,监听的话可以利用uni.$emit的页面通讯进行数据传输

不需要用uni.onSocketMessagej接收方法进行监听,比如你在A页面监听了,然后再跳转B页面,那么A页面的监听就会失效的了,所以最简单的方法就是用页面通讯方法来传达消息

文章来源于:https://blog.csdn.net/weixin_42000816/article/details/113307548

 

 

最后修改于 2022-01-02 16:16:00
上一篇