refactor: 全局网络状态提示

shared/api/socket.ts

@@ -2,7 +2,7 @@ import { io, Socket } from 'socket.io-client';
 import _isNil from 'lodash/isNil';
 import { getServiceUrl } from '../manager/service';
 import { isDevelopment } from '../utils/environment';
-import { showToasts } from '../manager/ui';
+import { showErrorToasts, showGlobalLoading, showToasts } from '../manager/ui';
 import { t } from '../i18n';
 
 let socket: Socket;
@@ -67,6 +67,62 @@ export class AppSocket {
   listen<T>(eventName: string, callback: (data: T) => void) {
     this.listener.push([`notify:${eventName}`, callback as any]);
   }
+
+  /**
+   * 初始Socket状态管理提示
+   */
+  closeFn: unknown = null; // 全局loading关闭函数
+  setupSocketStatusTip() {
+    const socket = this.socket;
+
+    const showConnecting = () => {
+      if (this.closeFn) {
+        return;
+      }
+      this.closeFn = showGlobalLoading(t('正在重新链接'));
+    };
+
+    const closeConnecting = () => {
+      if (this.closeFn && typeof this.closeFn === 'function') {
+        this.closeFn();
+      }
+    };
+
+    // 网络状态管理
+    socket.on('connect', () => {
+      console.log('连接成功');
+      closeConnecting();
+    });
+    socket.on('connecting', (data) => {
+      console.log('正在连接');
+
+      showConnecting();
+    });
+    socket.on('reconnect', (data) => {
+      console.log('重连成功');
+
+      closeConnecting();
+    });
+    socket.on('reconnecting', (data) => {
+      console.log('重连中...');
+      showConnecting();
+    });
+    socket.on('disconnect', (data) => {
+      console.log('与服务器的链接已断开');
+      showErrorToasts(t('与服务器的链接已断开'));
+      closeConnecting();
+    });
+    socket.on('connect_failed', (data) => {
+      console.log('连接失败');
+      showErrorToasts(t('连接失败'));
+      closeConnecting();
+    });
+    socket.on('error', (data) => {
+      console.log('网络出现异常', data);
+      showErrorToasts(t('网络出现异常'));
+      closeConnecting();
+    });
+  }
 }
 
 /**
@@ -90,6 +146,7 @@ export function createSocket(token: string): Promise<AppSocket> {
     socket.once('connect', () => {
       // 连接成功
       const appSocket = new AppSocket(socket);
+      appSocket.setupSocketStatusTip();
       appSocket.request('chat.converse.findAndJoinRoom').catch((err) => {
         console.error(err);
         showToasts(

shared/i18n/langs/en-US/translation.json

@@ -11,6 +11,7 @@
   "k267cc491": "Me",
   "k2d6cfb27": "Chat Channel",
   "k3172297b": "This feature is not yet open",
+  "k31a9d6a3": "The connect to the server is broken",
   "k34b5e3ab": "Send Message",
   "k34e357ee": "Group Summary",
   "k35abe359": "Lobby",
@@ -54,11 +55,13 @@
   "k7daefc98": "Invite you to join the group",
   "k821ff85a": "Common",
   "k8582af3f": "Refuse",
+  "k89df1d1e": "The network is abnormal",
   "k8abdba5c": "Has been sent",
   "k8acbe00": "Current service available",
   "k8b501189": "Service Status",
   "k8bca9ffb": "Group Name",
   "k8f6dfd40": "Current members",
+  "k9179206d": "Reconnecting",
   "k979fc780": "Unable to join the room, you will not be able to get the latest information, please refresh the page and try again",
   "k9bb01902": "Show Detail",
   "k9d901c20": "Meeting room",
@@ -94,6 +97,7 @@
   "kd4ff36fa": "Search Friends",
   "kd637a30": "Group Invite Service",
   "kda67b115": "Unknown panel type",
+  "kdb57357d": "Connection failed",
   "kdc18deca": "Invite users",
   "kdc4b4f92": "Public",
   "kdd4c838c": "Jump to Group",

shared/i18n/langs/zh-CN/translation.json

@@ -11,6 +11,7 @@
   "k267cc491": "我",
   "k2d6cfb27": "聊天频道",
   "k3172297b": "该功能暂未开放",
+  "k31a9d6a3": "与服务器的链接已断开",
   "k34b5e3ab": "发送消息",
   "k34e357ee": "群组概述",
   "k35abe359": "大厅",
@@ -54,11 +55,13 @@
   "k7daefc98": "邀请您加入群组",
   "k821ff85a": "通用",
   "k8582af3f": "拒绝",
+  "k89df1d1e": "网络出现异常",
   "k8abdba5c": "已发送",
   "k8acbe00": "当前服务可用",
   "k8b501189": "服务状态",
   "k8bca9ffb": "群组名",
   "k8f6dfd40": "当前成员数",
+  "k9179206d": "正在重新链接",
   "k979fc780": "无法加入房间, 您将无法获取到最新的信息, 请刷新页面后重试",
   "k9bb01902": "显示详情",
   "k9d901c20": "会议室",
@@ -94,6 +97,7 @@
   "kd4ff36fa": "查找好友",
   "kd637a30": "群组邀请服务",
   "kda67b115": "未知的面板类型",
+  "kdb57357d": "连接失败",
   "kdc18deca": "邀请用户",
   "kdc4b4f92": "公共",
   "kdd4c838c": "跳转到群组",

shared/index.tsx

@@ -56,9 +56,11 @@ export { getStorage, setStorage, useStorage } from './manager/storage';
 export {
   showToasts,
   setToasts,
+  showErrorToasts,
   showAlert,
   setAlert,
-  showErrorToasts,
+  showGlobalLoading,
+  setGlobalLoading,
 } from './manager/ui';
 
 // model

shared/manager/ui.ts

@@ -29,3 +29,13 @@ interface AlertOptions {
 }
 export const [showAlert, setAlert] =
   buildRegFn<(options: AlertOptions) => void>('alert');
+
+/**
+ * 全局Loading提示
+ * 返回移除函数
+ */
+export const [showGlobalLoading, setGlobalLoading] = buildRegFn<
+  (text: string) => () => void
+>('global-loading', () => {
+  return () => {};
+});

web/src/init.tsx

@@ -2,6 +2,7 @@ import { message, Modal } from 'antd';
 import {
   buildStorage,
   setAlert,
+  setGlobalLoading,
   setServiceUrl,
   setStorage,
   setToasts,
@@ -40,3 +41,9 @@ setAlert((options) => {
     },
   });
 });
+
+setGlobalLoading((text) => {
+  const hide = message.loading(text, 0);
+
+  return hide;
+});