hotline-web/src/utils/signalR.ts

// 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
import * as signalR from '@microsoft/signalr';
import { Cookie, Local } from '@/utils/storage';
import { submitLog } from '@/api/public/log';
import { getNowDateTime } from '@/utils/constants';
// 记录日志
const submitLogFn = async (request: any) => {
	try {
		await submitLog(request);
	} catch (error) {
		console.log(error);
	}
};
export default {
	// signalR对象
	SR: null as any,
	// 失败连接重试次数
	failNum: 99,
	baseUrl: import.meta.env.VITE_API_SOCKET_URL,
	init() {
		const token = Cookie.get('token');
		const connection = new signalR.HubConnectionBuilder()
			.withUrl(this.baseUrl, { accessTokenFactory: () => token, skipNegotiation: true, transport: 1 })
			.withAutomaticReconnect() //自动重新连接
			.configureLogging(signalR.LogLevel.Warning)
			.build();

		this.SR = connection;
		// 断线重连
		connection.onclose(async () => {
			const name: string = `业务系统的websocket断开链接`;
			const remark: string = `业务系统的websocket断开链接`;
			const request = {
				creationTime: new Date(),
				name,
				remark,
				executeUrl: import.meta.env.VITE_API_SOCKET_URL,
			};
			await submitLogFn(request);
			console.log('业务系统signal当前链接状态:', connection.state, getNowDateTime());
			// 建议用户重新刷新浏览器
			await this.start();
		});
		connection.onreconnected(async () => {
			const name: string = `业务系统websocket断线重连成功`;
			const remark: string = `业务系统websocket断线重连成功`;
			const request = {
				creationTime: new Date(),
				name,
				remark,
				executeUrl: import.meta.env.VITE_API_SOCKET_URL,
			};
			await submitLogFn(request);
			console.log('业务系统signal断线重连成功', getNowDateTime());
			// location.reload();
			/*ElNotification({
				type: 'success',
				title: '提示',
				message: `断线重连成功`,
			});*/
		});
		// 服务端推送消息
		connection.on('Send', (message: any) => {
			console.log(`有用户加入分组：${message}`, getNowDateTime());
		});
		// 服务端推送消息
		connection.on('CircularRecord', (message: any) => {
			console.log(`小红点消息：${message}`, getNowDateTime());
		});
		// 服务端推送消息
		connection.on('SeatState', (message: any) => {
			console.log(`座席状态：${JSON.stringify(message)}`, getNowDateTime());
		});
		// 服务端推送消息
		connection.on('RestApplyPass', (message: any) => {
			console.log(`休息申请通过：${message}`);
		});
		// 服务端推送消息
		connection.on('ToDayWaitNum', (message: any) => {
			// console.log(`今日等待：${message}`);
		});
		// 服务端推送消息
		connection.on('CurrentWaitNum', (message: any) => {
			// console.log(`当前等待：${message}`);
		});
		// 服务端推送消息
		connection.on('BsSeatStateDataShowArea1', (message: any) => {});
		// 服务端推送消息
		connection.on('BsSeatStateDataShowArea2', (message: any) => {});
		// 服务端推送消息
		connection.on('BsSeatStateDataShowArea3', (message: any) => {});
		// 服务端推送消息
		connection.on('BsSeatStateDataShowArea4', (message: any) => {});
	},
	/**
	 * @description 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
	 * state  Connected 已连接  Connecting 正在连接  Disconnected 断开连接 Reconnecting 正在重新连接
	 * @returns
	 */
	async start() {
		try {
			//使用async和await 或 promise的then 和catch 处理来自服务端的异常
			await this.SR.start();
			console.log('业务系统signal当前链接状态:', this.SR.state, getNowDateTime());
			const name: string = `业务系统的websocket链接成功`;
			const remark: string = `业务系统的websocket断开链接`;
			const request = {
				creationTime: new Date(),
				name,
				remark,
				executeUrl: import.meta.env.VITE_API_SOCKET_URL,
			};
			await submitLogFn(request);
			return Promise.resolve();
		} catch (error: any) {
			this.failNum--;
			if (this.failNum > 0 && this.SR?.state === 'Disconnected') {
				//断开链接重新链接
				/*ElNotification({
					type: 'warning',
					title: '提示',
					message: `断开连接了,正在重连, 剩余自动重连次数${this.failNum} 次，如未重连成功，请刷新浏览器重试`,
				});*/
				setTimeout(async () => {
					await this.SR?.start();
				}, 5000);
			}
			return Promise.reject(error);
		}
	},
	/**
	 * @description 加入分组
	 * @param groupName string 分组名称
	 * @params {string} CallCenter 呼叫中心
	 * @params BigScreenDataShow 大屏数据展示
	 * @returns
	 */
	async joinGroup(groupName: string) {
		if (this.SR?.state === 'Connected') {
			// 判断是否已经建立链接 如果没有 先链接
			await this.SR.invoke('JoinGroupAsync', { GroupName: groupName });
		} else {
			try {
				await this.start();
				setTimeout(async () => {
					await this.SR?.invoke('JoinGroupAsync', { GroupName: groupName });
				}, 500);
			} catch (err) {
				console.log(err);
			}
		}
	},
	/**
	 * @description 离开分组
	 * @param groupName string
	 * @params CallCenter 呼叫中心
	 * @params BigScreenDataShow 大屏数据展示
	 * @returns
	 */
	async leaveGroup(groupName: string) {
		if (this.SR.state === 'Connected') {
			// 判断是否已经建立链接 如果没有 先链接
			await this.SR.invoke('LeaveGroupAsync', { GroupName: groupName });
		} else {
			// 等待链接成功再发送
			if (this.SR.state === 'Connecting') {
				setTimeout(async () => {
					await this.SR.invoke('LeaveGroupAsync', { GroupName: groupName });
				}, 500);
				return;
			}
			await this.start()
				.then(async () => {
					setTimeout(async () => {
						await this.SR.invoke('LeaveGroupAsync', { GroupName: groupName });
					}, 500);
				})
				.catch((err) => {
					console.log(err);
				});
		}
	},

	/**
	 * @description 关闭链接
	 * @returns
	 */
	async stop() {
		try {
			//使用async和await 或 promise的then 和catch 处理来自服务端的异常
			await this.SR.stop();
			console.log(this.SR.state, '断开链接', getNowDateTime());
		} catch (error) {
			console.log('signalR', error);
		}
	},
	/**
	 * @description 离开所有分组并且关闭链接
	 * @returns
	 */
	async leaveAllGroupAndStop() {
		try {
			const telStatusInfo = Local.get('telStatusInfo');
			//使用async和await 或 promise的then 和catch 处理来自服务端的异常
			await this.leaveGroup('CallCenter');
			await this.leaveGroup('BigScreen-SeatState');
			await this.stop();
			console.log(this.SR.state, '断开链接', getNowDateTime());
		} catch (error) {
			console.log('signalR', error);
		}
	},
};