refactor: 增加通知插件

shared/index.tsx

@@ -7,6 +7,7 @@ export type { AppSocket } from './api/socket';
 // cache
 export {
   getCachedUserInfo,
+  getCachedConverseInfo,
   getCachedGroupInviteInfo,
   getCachedRegistryPlugins,
 } from './cache/cache';
@@ -47,9 +48,10 @@ export { useUpdateRef } from './hooks/useUpdateRef';
 export { buildRegFn } from './manager/buildRegFn';
 export { buildRegList } from './manager/buildRegList';
 export { buildRegMap } from './manager/buildRegMap';
-export { getStorage, setStorage, useStorage } from './manager/storage';
-export { setTokenGetter, refreshTokenGetter } from './manager/request';
 export { setServiceUrl } from './manager/service';
+export { setTokenGetter, refreshTokenGetter } from './manager/request';
+export { regSocketEventListener } from './manager/socket';
+export { getStorage, setStorage, useStorage } from './manager/storage';
 export {
   showToasts,
   setToasts,
@@ -105,7 +107,7 @@ export { userActions, groupActions } from './redux/slices';
 export type { ChatConverseState } from './redux/slices/chat';
 export { setupRedux } from './redux/setup';
 export { createStore } from './redux/store';
-export type { AppStore, AppDispatch } from './redux/store';
+export type { AppStore, AppState, AppDispatch } from './redux/store';
 
 // utils
 export {

shared/manager/socket.ts

@@ -0,0 +1,8 @@
+import { buildRegList } from './buildRegList';
+
+interface PluginSocketEventListener {
+  eventName: string;
+  eventFn: (...args: any[]) => void;
+}
+export const [socketEventListeners, regSocketEventListener] =
+  buildRegList<PluginSocketEventListener>();

shared/redux/setup.ts

@@ -5,6 +5,7 @@ import type { FriendRequest } from '../model/friend';
 import { getCachedConverseInfo } from '../cache/cache';
 import type { GroupInfo } from '../model/group';
 import type { ChatMessage } from '../model/message';
+import { socketEventListeners } from '../manager/socket';
 
 /**
  * 初始化 Redux 上下文
@@ -89,4 +90,9 @@ function listenNotify(socket: AppSocket, store: AppStore) {
   socket.listen<{ groupId: string }>('group.remove', ({ groupId }) => {
     store.dispatch(groupActions.removeGroup(groupId));
   });
+
+  // 其他的额外的通知
+  socketEventListeners.forEach(({ eventName, eventFn }) => {
+    socket.listen(eventName, eventFn);
+  });
 }

shared/redux/store.ts

@@ -12,4 +12,5 @@ export function createStore() {
 }
 
 export type AppStore = ReturnType<typeof createStore>;
+export type AppState = ReturnType<AppStore['getState']>;
 export type AppDispatch = AppStore['dispatch'];

web/plugins/com.msgbyte.notify/manifest.json

@@ -0,0 +1,9 @@
+{
+  "label": "消息通知插件",
+  "name": "com.msgbyte.notify",
+  "url": "/plugins/com.msgbyte.notify/index.js",
+  "version": "0.0.0",
+  "author": "msgbyte",
+  "description": "为应用增加通知的能力",
+  "requireRestart": true
+}

web/plugins/com.msgbyte.notify/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@plugins/com.msgbyte.notify",
+  "main": "src/index.ts",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {}
+}

web/plugins/com.msgbyte.notify/src/index.ts

@@ -0,0 +1,36 @@
+import {
+  regSocketEventListener,
+  getGlobalState,
+  getCachedUserInfo,
+} from '@capital/common';
+
+if (Notification.permission === 'default') {
+  Notification.requestPermission();
+}
+
+regSocketEventListener({
+  eventName: 'chat.message.add',
+  eventFn: (message) => {
+    const currentUserId = getGlobalState()?.user.info._id;
+    if (currentUserId !== message.author) {
+      // 创建通知
+
+      // TODO: 需要增加所在群组
+      if (Notification.permission === 'granted') {
+        Promise.all([getCachedUserInfo(currentUserId)]).then(([userInfo]) => {
+          console.log(userInfo, message);
+          const nickname = userInfo?.nickname ?? '';
+          const icon = userInfo?.avatar ?? undefined;
+          const content = message.content;
+
+          new Notification(`来自 ${nickname}`, {
+            body: content,
+            icon,
+            tag: 'tailchat-message',
+            renotify: true,
+          });
+        });
+      }
+    }
+  },
+});

web/plugins/com.msgbyte.notify/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "./src",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "paths": {
+      "@capital/*": ["../../../src/plugin/*"],
+    }
+  }
+}

web/plugins/com.msgbyte.notify/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

web/src/plugin/builtin.ts

@@ -24,4 +24,13 @@ export const builtinPlugins: PluginManifest[] = [
     description: 'BBCode 格式消息内容解析',
     requireRestart: true,
   },
+  {
+    label: '消息通知插件',
+    name: 'com.msgbyte.notify',
+    url: '/plugins/com.msgbyte.notify/index.js',
+    version: '0.0.0',
+    author: 'msgbyte',
+    description: '为应用增加通知的能力',
+    requireRestart: true,
+  },
 ];

web/src/plugin/common/index.ts

@@ -9,3 +9,5 @@ export {
   useCurrentGroupPanelInfo,
 } from '@/routes/Main/Content/Group/utils';
 export { openModal, ModalWrapper, useModalContext } from '@/components/Modal';
+export { getGlobalState } from '@/utils/global-state-helper';
+export { getCachedUserInfo, getCachedConverseInfo } from 'tailchat-shared';

web/src/plugin/common/reg.ts

@@ -1,5 +1,10 @@
 import type { ChatInputActionContextProps } from '@/components/ChatBox/ChatInputBox/context';
-import { buildRegFn, buildRegList, FastFormFieldMeta } from 'tailchat-shared';
+import {
+  buildRegFn,
+  buildRegList,
+  FastFormFieldMeta,
+  regSocketEventListener,
+} from 'tailchat-shared';
 
 /**
  * 注册群组面板
@@ -61,3 +66,5 @@ interface ChatInputAction {
 export type { ChatInputActionContextProps };
 export const [chatInputActions, regChatInputAction] =
   buildRegList<ChatInputAction>();
+
+export { regSocketEventListener };

web/src/routes/Main/Provider.tsx

@@ -15,6 +15,7 @@ import { getUserJWT } from '../../utils/jwt-helper';
 import { useHistory } from 'react-router';
 import { SidebarContextProvider } from './SidebarContext';
 import { PortalHost } from '@/components/Portal';
+import { setGlobalStore } from '@/utils/global-state-helper';
 
 /**
  * 应用状态管理hooks
@@ -43,6 +44,7 @@ function useAppState() {
     // 创建Redux store
     const store = createStore();
     store.dispatch(userActions.setUserInfo(userLoginInfo));
+    setGlobalStore(store);
 
     // 创建 websocket 连接
     const socket = await createSocket(userLoginInfo.token);

web/src/utils/global-state-helper.ts

@@ -0,0 +1,13 @@
+import type { AppStore, AppState } from 'tailchat-shared';
+
+let _store: AppStore;
+export function setGlobalStore(store: AppStore) {
+  _store = store;
+}
+
+export function getGlobalState(): AppState | null {
+  if (!_store) {
+    return null;
+  }
+  return _store.getState();
+}