hotline-bs/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 mittBus from '@/utils/mitt';

export default {
    // signalR对象
    SR: null as any,
    // 失败连接重试次数
    failNum: 4,
    baseUrl: 'http://218.6.151.146:50100/hubs/hotline',
    groupName: '',
    init() {
        const token = sessionStorage.getItem('token');
        const connection = new signalR.HubConnectionBuilder()
            .withUrl(this.baseUrl, {accessTokenFactory: () => '', 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('断线重连成功');
            location.reload();
            /*ElNotification({
                type: 'success',
                title: '提示',
                message: `断线重连成功`,
            });*/
        });
        // 服务端推送消息
        connection.on('Send', (message: any) => {
            mittBus.emit('Send', message);// 通知
        });
        // 服务端推送消息
        connection.on('BsDataShowArea1', (message: any) => {
            // console.log(`工单办理`, message);
            mittBus.emit('BsDataShowArea1', message);// 通知
        });
        // 服务端推送消息
        connection.on('BsDataShowArea3', (message: any) => {
            mittBus.emit('BsDataShowArea3', message);// 通知
        });
        // 服务端推送消息
        connection.on('BsDataShowArea8', (message: any) => {
            mittBus.emit('BsDataShowArea8', message);// 通知
        });
        // 服务端推送消息
        connection.on('SeatState', (message: any) => {
            mittBus.emit('SeatState', message);// 通知
        });
        // 服务端推送消息
        connection.on('BsSeatStateDataShowArea1', (message: any) => {
            mittBus.emit('BsSeatStateDataShowArea1', message);// 通知
        });
        // 服务端推送消息
        connection.on('BsSeatStateDataShowArea2', (message: any) => {
            mittBus.emit('BsSeatStateDataShowArea2', message);// 通知
        });
        // 服务端推送消息
        connection.on('BsSeatStateDataShowArea3', (message: any) => {
            mittBus.emit('BsSeatStateDataShowArea3', message);// 通知
        });
        // 服务端推送消息
        connection.on('BsSeatStateDataShowArea4', (message: any) => {
            mittBus.emit('BsSeatStateDataShowArea4', message);// 通知
        });
        // 服务端推送消息
        connection.on('ordercountstatistics', (message: any) => {
            mittBus.emit('ordercountstatistics', message);// 通知
        });
        // 服务端推送消息
        connection.on('orderHandlingDetail', (message: any) => {
            mittBus.emit('orderHandlingDetail', 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('JoinGroupUnauthAsync', {GroupName: groupName});
        } else {
            // 等待链接成功再发送
            if (this.SR.state === 'Connecting') {
                setTimeout(async () => {
                    await this.SR.invoke('JoinGroupUnauthAsync', {GroupName: groupName});
                }, 500)
                return
            }
            await this.start().then(async () => {
                setTimeout(async () => {
                    await this.SR.invoke('JoinGroupUnauthAsync', {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('LeaveGroupUnauthAsync', {GroupName: groupName});
        } else {
            // 等待链接成功再发送
            if (this.SR.state === 'Connecting') {
                setTimeout(async () => {
                    await this.SR.invoke('LeaveGroupUnauthAsync', {GroupName: groupName});
                }, 500)
                return
            }
            await this.start().then(async () => {
                setTimeout(async () => {
                    await this.SR.invoke('JoinGroupUnauthAsync', {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, '断开链接');
        } catch (error) {
            console.log('signalR', error);
        }
    },
};