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 { ElNotification } from 'element-plus';
import {Cookie} from '/@/utils/storage';
export default {
	// signalR对象
	SR: null as any,
	// 失败连接重试次数
	failNum: 4,
	baseUrl: import.meta.env.VITE_API_SOCKET_URL,
	groupName:'',
	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 () => {
			console.log('当前链接状态:', connection.state);
			// 建议用户重新刷新浏览器
			await this.start();
		});
		connection.onreconnected(() => {
			console.log('断线重连成功');
			/*ElNotification({
				type: 'success',
				title: '提示',
				message: `断线重连成功`,
			});*/
		});
	},
	/**
	 * @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('当前链接状态:', this.SR.state);
			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 {
			await this.start().then(async () => {
				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});
		}
	},

	/**
	 * @description 关闭链接
	 * @returns
	 */
	async stop() {
		try {
			//使用async和await 或 promise的then 和catch 处理来自服务端的异常
			await this.SR.stop();
			console.log(this.SR.state, '断开链接');
		} catch (error) {
			console.log('signalR', error);
		}
	},
};