From d53602cdc71cfa7c7ed711a8927b269bb7209859 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Thu, 9 Sep 2021 10:52:49 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=85=A8=E5=B1=80=E7=BD=91?= =?UTF-8?q?=E7=BB=9C=E7=8A=B6=E6=80=81=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shared/api/socket.ts | 59 +++++++++++++++++++++++- shared/i18n/langs/en-US/translation.json | 4 ++ shared/i18n/langs/zh-CN/translation.json | 4 ++ shared/index.tsx | 4 +- shared/manager/ui.ts | 10 ++++ web/src/init.tsx | 7 +++ 6 files changed, 86 insertions(+), 2 deletions(-) diff --git a/shared/api/socket.ts b/shared/api/socket.ts index bba3dfd3..fd12f56d 100644 --- a/shared/api/socket.ts +++ b/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(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 { socket.once('connect', () => { // 连接成功 const appSocket = new AppSocket(socket); + appSocket.setupSocketStatusTip(); appSocket.request('chat.converse.findAndJoinRoom').catch((err) => { console.error(err); showToasts( diff --git a/shared/i18n/langs/en-US/translation.json b/shared/i18n/langs/en-US/translation.json index 24d4fcbb..87818f35 100644 --- a/shared/i18n/langs/en-US/translation.json +++ b/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", diff --git a/shared/i18n/langs/zh-CN/translation.json b/shared/i18n/langs/zh-CN/translation.json index fe80620d..c11a8e9b 100644 --- a/shared/i18n/langs/zh-CN/translation.json +++ b/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": "跳转到群组", diff --git a/shared/index.tsx b/shared/index.tsx index 8f7f8d11..8814282a 100644 --- a/shared/index.tsx +++ b/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 diff --git a/shared/manager/ui.ts b/shared/manager/ui.ts index 6d9709b7..06a7d11f 100644 --- a/shared/manager/ui.ts +++ b/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 () => {}; +}); diff --git a/web/src/init.tsx b/web/src/init.tsx index 532bf97b..78961b87 100644 --- a/web/src/init.tsx +++ b/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; +});