GlobalWebsoket.js 封装配置分析

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量287 收藏
点赞数
分类专栏： uniapp+微信小程序 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzrhanyu/article/details/127987182
版权

GlobalWebsoket.js 封装配置分析

前言

由于项目业务逻辑需要,此次前端界面需要接收后端服务器 WebSoket 实时传输的数据,并在页面当中显示实时数据
项目中已经用 js 封装好了能用的 GlobalWebsoket.js

一、 封装好的 GlobalWebsoket.js

代码如下

1. GlobalWebsoket.js 

// GlobalWebsoket.js
import store from '@/store/index.js';
import Config from '@/core/config' // 引入 cofig ,Config.js 当中配置的是 url 地址
import {
	Observable
} from "rxjs";

// 后端api地址
const wsHost = Config.get('wsUrl')
let ws;
let count = 0;
var subs = {};
let timer = {};
const MAX_RETRIES = 2000;
let trySendCount = 0;
let tempQueue = [];
let socketOpen = false;
const initWebSocket = () => {
	let token = store.state.token ? store.state.token : store.getters.token;
	const wsUrl = `${wsHost}/messaging/${token}?:X_Access_Token=${token}`;
	try {
		//微信websocket最大并发不能超过5个
		//https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

		if (count > 0) {
			return ws;
		}
		clearInterval(timer);
		ws = uni.connectSocket({
			url: wsUrl,
			complete: () => {}
		});
		count += 1;
		uni.onSocketClose(function() {
			socketOpen = false;
			ws = undefined;
			setTimeout(initWebSocket, 5000 * count);
		});
		uni.onSocketOpen(function() {
			socketOpen = true;
		});
		uni.onSocketMessage(function(msg) {
			var data = JSON.parse(msg.data);
			if (data.type === 'error') {
				uni.showToast({
					title: data.message,
					icon: "none",
					duration: 3500
				})
			}
			if (subs[data.requestId]) {
				if (data.type === 'complete') {
					subs[data.requestId].forEach(function(element) {
						element.complete();
					});;
				} else if (data.type === 'result') {
					subs[data.requestId].forEach(function(element) {
						element.next(data);
					});;
				}
			}
		});
	} catch (error) {
		setTimeout(initWebSocket, 5000 * count);
	}

	timer = setInterval(function() {
		try {
			ws && ws.readyState === 1 ? sendSocketMessage(JSON.stringify({
				"type": "ping"
			})) : 0;
		} catch (error) {
			console.error(error, '发送心跳错误');
		}
		//同时判断
		if (tempQueue.length > 0 && ws && ws.readyState === 1) {
			sendSocketMessage(tempQueue[0], 1);
		}
	}, 2000);
	return ws;
};

//flag,是否处理tempQueue中的数据，如果发送失败，则不会重新加入,发送成功，则去除
function sendSocketMessage(msg, flag) {
	if (socketOpen) {
		uni.sendSocketMessage({
			data: msg
		});
		if (flag === 1) {
			tempQueue.splice(0, 1);
		}
	} else {
		if (flag != 1) {
			tempQueue.push(msg);
		}
	}
}


const getWebsocket = (id, topic, parameter) => {
	return Observable.create(function(observer) {
		if (!subs[id]) {
			subs[id] = [];
		}
		subs[id].push({
			next: function(val) {
				observer.next(val);
			},
			complete: function() {
				observer.complete();
			}
		});
		var msg = JSON.stringify({
			id: id,
			topic: topic,
			parameter: parameter,
			type: 'sub'
		});
		var thisWs = initWebSocket();
		if (thisWs) {
			try {
				sendSocketMessage(msg);
			} catch (error) {
				initWebSocket();
				uni.showToast({
					title: 'websocket服务连接失败',
					icon: "none",
					duration: 3500
				})
			}
		} else {
			tempQueue.push(msg);
			ws = undefined
			count = 0
			initWebSocket();
		}
		return function() {
			var unsub = JSON.stringify({
				id: id,
				type: "unsub"
			});
			delete subs[id];
			if (thisWs) {
				sendSocketMessage(unsub)
			}
		};
	});
};
exports.getWebsocket = getWebsocket;

二、GlobalWebsoket.js 代码分析

1.GlobalWebsoket.js import 分析

import store from '@/store/index.js'; // vueX 做状态管理的
import Config from '@/core/config' // 引入 cofig ,Config.js 当中配置的是 url 地址
import {
	Observable
} from "rxjs";

Config 的地址是从 config.js 中来的
在这里插入图片描述

RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。 可以把 RxJS 当做是用来处理事件的 Lodash 。

2.GlobalWebsoket.js 整体分析

GlobalWebsoket.js 文件导出了getWebsocket,这是一个函数

import store from '@/store/index.js';
import Config from '@/core/config'
import {
	Observable
} from "rxjs";

// 后端api地址
// 这里通过 Config 获取需要连接 websoket 的地址
const wsHost = Config.get('wsUrl')
let ws;
let count = 0;
var subs = {};
let timer = {};
const MAX_RETRIES = 2000;
let trySendCount = 0;
let tempQueue = [];
let socketOpen = false;


exports.getWebsocket = getWebsocket;

3. initWebSoket()

const initWebSocket = () => {
	// 先获取 token 
	let token = store.state.token ? store.state.token : store.getters.token;
	// 这里是 websoket 的 url 地址
	// ${wsHost} 是 通过 Config 获取需要连接 websoket 的地址
	// ${token} 是 token 信息
	const wsUrl = `${wsHost}/messaging/${token}?:X_Access_Token=${token}`;
	try {
		//微信websocket最大并发不能超过5个
		//https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

		// 如果连接数量大于 0 
		if (count > 0) {
			// 这里就返回当前连接
			return ws;
		}
		// 执行到这里说明连接数为 0 ,以下代码为创建新的 websoket 的连接
		clearInterval(timer);
		
		// 调用 uni.connectSocket 来创建连接
		ws = uni.connectSocket({
			url: wsUrl,
			complete: () => {}
		});
		count += 1;
		
		// 关闭连接的回调函数
		uni.onSocketClose(function() {
			socketOpen = false;
			ws = undefined;
			setTimeout(initWebSocket, 5000 * count);
		});
		
		// 连接打开的回调函数
		uni.onSocketOpen(function() {
			socketOpen = true;
		});
		
		// 当向 websoket 发送信息时的回调函数
		uni.onSocketMessage(function(msg) {
			var data = JSON.parse(msg.data);
			if (data.type === 'error') {
				uni.showToast({
					title: data.message,
					icon: "none",
					duration: 3500
				})
			}
			if (subs[data.requestId]) {
				if (data.type === 'complete') {
					subs[data.requestId].forEach(function(element) {
						element.complete();
					});;
				} else if (data.type === 'result') {
					subs[data.requestId].forEach(function(element) {
						element.next(data);
					});;
				}
			}
		});
	} catch (error) {
		setTimeout(initWebSocket, 5000 * count);
	}

	// 设置定时器,每 2 秒执行一次,发送一次 'ping'
	timer = setInterval(function() {
		try {
			ws && ws.readyState === 1 ? sendSocketMessage(JSON.stringify({
				"type": "ping"
			})) : 0;
		} catch (error) {
			console.error(error, '发送心跳错误');
		}
		//同时判断
		if (tempQueue.length > 0 && ws && ws.readyState === 1) {
			sendSocketMessage(tempQueue[0], 1);
		}
	}, 2000);
	// 返回新建的 ws
	return ws;
};

3. getWebsoket

const getWebsocket = (id, topic, parameter) => { 
	// 根据传递的 id, 处理 id, 获取需要监听的内容
	return Observable.create(function(observer) {
		if (!subs[id]) {
			subs[id] = [];
		}
		subs[id].push({ // 所有需要监听的内容 push 到 subs[] 数组当中
			next: function(val) {
				observer.next(val);
			},
			complete: function() {
				observer.complete();
			}
		});
	// 根据传参的 id,topic,parameter ,讲需要发送的监听的内容封装到 msg 对象中
		var msg = JSON.stringify({
			id: id,
			topic: topic,
			parameter: parameter,
			type: 'sub'
		});
		// 调用 initWebSoket,初始化 websocket,在 initWebSoket 当中发起连接
		var thisWs = initWebSocket();
		if (thisWs) { // 如果连接成功
			try {
				sendSocketMessage(msg); // 发送需要 websoket 绑定监听的 msg(上面封装好了)
			} catch (error) { // 如果发送失败,再次发起连接
				initWebSocket();
				uni.showToast({
					title: 'websocket服务连接失败',
					icon: "none",
					duration: 3500
				})
			}
		} else { // 如果没有连接成功
			tempQueue.push(msg); // 临时队列中先把 msg 存起来
			ws = undefined // 断掉当前的连接
			count = 0 // 并把连接数设为 0
			initWebSocket(); // 再次初始化 websoket
		}
		return function() {  // 这里是解绑的时候会执行的 (remove)
			var unsub = JSON.stringify({  
				id: id,
				type: "unsub"
			});
			delete subs[id];
			if (thisWs) {
				sendSocketMessage(unsub)
			}
		};
	});
};

4. sendSocketMessage


// 发送 soket 信息
//flag,是否处理tempQueue中的数据，如果发送失败，则不会重新加入,发送成功，则去除
function sendSocketMessage(msg, flag) {
	// 如果当前的 websoket 是打开的
	if (socketOpen) {
		// 向 websoket 发送消息
		uni.sendSocketMessage({
			data: msg
		});
		if (flag === 1) {
			tempQueue.splice(0, 1);
		}
	} else {
		if (flag != 1) {
			tempQueue.push(msg);
		}
	}
}

三、GlobalWebsoket.js 使用分析

YZRHANYU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios.min.js封装
02-10
axios封装
实验16 路由器广域网X.25封装配置.pdf
03-27
路由器广域网X.25封装配置
使用Require.js封装原生js轮播图的实现代码
10-19
在这个示例中，我们将探讨如何使用Require.js来封装一个原生JavaScript实现的轮播图。Require.js是一个流行的JavaScript模块化加载器，它允许我们按需加载和组织代码，使其更易于维护和扩展。在这个案例中，我们将...
基于cropper.js封装vue实现在线图片裁剪组件功能
10-18
主要介绍了基于cropper.js封装vue实现在线图片裁剪组件功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
thinkPHP框架中layer.js的封装与使用方法示例
10-17
这里的`dialog.js`是自定义的JavaScript文件，用于封装layer.js的常用方法，简化调用。例如： ```javascript var dialog = { error: function(message) { layer.open({ content: message, icon: 2, title: '...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 501
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 166
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 555
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
Electron学习与总结
song854601134的博客
08-12 196
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 419
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 891
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【无标题】
weixin_42348009的博客
08-14 80
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 472
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 678
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 397
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
基于vue框架的NBA球星管理系统1878g（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-12 995
随着互联网的普及和体育产业的蓬勃发展，篮球运动在全球范围内拥有庞大的粉丝群体，NBA（美国职业篮球联赛）作为其中的佼佼者，其球星更是备受关注。传统的球星信息管理方式往往依赖于纸质文档或简单的电子表格，这种方式不仅效率低下，难以实现数据的即时更新与共享，也无法满足球迷和媒体对球星信息深度挖掘的需求。因此，开发一套基于Vue框架的NBA球星管理系统，通过信息化手段整合球星信息，实现数据的快速录入、存储、查询与分析，对于提升管理效率、满足用户需求具有重要意义。，处理前端请求并提供业务逻辑。
Unity数据持久化 之 Json序列化与反序列化
2301_77947509的博客
08-09 470
Json的序列化与反序列化
Vue 标准开发方式与组件、插槽的高效使用
小刘哥的博客
08-10 307
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。本文将详细探讨 Vue.js 的标准开发方式，以及如何有效地使用组件、插槽等核心功能。
Vue3中的history模式路由：打造无缝导航体验！
Jacklx888的博客
08-10 306
Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟 Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是hash模式，URL会带上一个“#”。为了获得更加美观的URL，我们可以使用history模式。今天我们就来一起看看如何在Vue3中使用history模式吧！🚀
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值