uniapp封装websocket

2022-01-13 17:00:28 阅读：282 来源： 互联网

标签：uniapp websocket log res console socketTask 封装 socket

项目需求比较简单：就是客户把想要的项目选上，后台即时报价，前台用websocket实时展示。

然后再网上搜了一下（毕竟人比较懒…）

用的下面这篇文章改了几个小地方

uni-app使用websocket（封装、心跳检测）

贴一下主代码先

class websocketUtil {
	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.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)
			// });
		})
		// 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
		// uni.onSocketError((res) => {
		// 	console.log('WebSocket连接打开失败，请检查！');
		// 	this.is_open_socket = false;
		// 	this.reconnect();
		// });
		// 这里仅是事件监听【如果socket关闭了会执行】
		this.socketTask.onClose(() => {
			console.log("已经被关闭了")
			this.reconnect();
		})
	}

	//发送消息
	send(value) {
		// 注：只有连接正常打开中 ，才能正常成功发送消息
		this.socketTask.send({
			data: value,
			async success() {
				console.log("消息发送成功");
			},
			async fail() {
				this.reconnect();
			},
		});
	}
	//开启心跳检测
	start() {
		this.heartbeatInterval = setInterval(() => {
			this.data = {
				type: "heart",
				msg: "心跳检测"
			}
			// 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)
		}
	}
	//手动关闭
	close() {
		this.is_open_socket = false;
		this.socketTask.close()
	}
}

module.exports = websocketUtil

页面上调用

import wsRequest from '../../api/websocket.js'//这里一开始我用绝对路径，报错，改成了相对路径就好了（我是菜鸡）

Vue.prototype.$websocketUrl = "wss://xxx.xxxxxx.com:9506";//这个声明写在main.js里面了 全局变量

//这个if判断是放在 页面中  调用订单详情接口里面的
if(res.result.amount*1 == 0){//没有报价--等待报价
	this.websocket = new wsRequest(this.$websocketUrl, 200000);//这个时间我放宽到了几分钟
	this.websocket.socketTask.onMessage(res => {//onMessage这个监听在封装的js中赋值给了socketTask对象
		console.log(res.data);
		if(res.data == id){
			this.$success("价格核算完毕！")
			this.getOrderInfo(id)//重新调用这个订单详情
			this.websocket.close();//手动关闭websocket
		}
	})
}

beforeDestroy() {//监听页面卸载 手动关闭websocket
	if(this.info.amount*1 == 0){//没有报价--等待报价
		this.websocket.close();
	}
},

说一下改动

因为这个是封装到js里面，然后监听到后端给我发消息告诉我已经报价的订单id，我在页面上判断这个id和订单id相等，就重新调用一下订单详情的接口刷新出报价，所以我把 onMessage() 这个监听方法注掉了，在页面上去调用监听。
然后关于这个手动关闭，我没看懂作者原文中 is_open_socket 这个字段有啥用…(也许是我菜)，我就按照自己的想法改了一下，把原文中很多地方的 this.is_open_socket = false; 这个赋值去掉了，只有我新加的close方法是主动赋值代表手动关闭不需要重新连接

嗯~ o(￣▽￣)o 然后…就没了

标签：uniapp,websocket,log,res,console,socketTask,封装,socket
来源： https://blog.csdn.net/jiaojinnaozhier/article/details/122476668

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

ICode9

uniapp封装websocket