feat: 增加socket.io admin

pnpm-lock.yaml

@@ -748,7 +748,7 @@ importers:
   server:
     specifiers:
       '@babel/helper-compilation-targets': ^7.18.2
-      '@moonrailgun/socket.io-admin-ui': ^0.2.1
+      '@socket.io/admin-ui': ^0.5.1
       '@socket.io/redis-adapter': ^7.0.0
       '@typegoose/typegoose': 9.3.1
       '@types/accepts': ^1.3.5
@@ -823,7 +823,7 @@ importers:
       typescript: ^4.3.3
       vinyl-fs: ^3.0.3
     dependencies:
-      '@moonrailgun/socket.io-admin-ui': 0.2.1_socket.io@4.5.1
+      '@socket.io/admin-ui': 0.5.1_socket.io@4.5.1
       '@socket.io/redis-adapter': 7.2.0
       '@typegoose/typegoose': 9.3.1_mongoose@6.1.1
       '@types/blessed': 0.1.19
@@ -7710,18 +7710,6 @@ packages:
       strip-ansi: 5.2.0
       wrap-ansi: 6.2.0
 
-  /@moonrailgun/socket.io-admin-ui/0.2.1_socket.io@4.5.1:
-    resolution: {integrity: sha512-ytOOegalEaS77WG1suYl7sNt4DNzKaUMZJ2MZGK5HR9MkL9JKeHaxj/cTp1cmgHLrPshC7dG8yRuyocK/rllZQ==}
-    peerDependencies:
-      socket.io: '>=3.1.0'
-    dependencies:
-      bcryptjs: 2.4.3
-      debug: 4.3.4
-      socket.io: 4.5.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /@mrmlnc/readdir-enhanced/2.2.1:
     resolution: {integrity: sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==}
     engines: {node: '>=4'}
@@ -10648,6 +10636,19 @@ packages:
       webpack-sources: 3.2.3
     dev: false
 
+  /@socket.io/admin-ui/0.5.1_socket.io@4.5.1:
+    resolution: {integrity: sha512-1dlGL2FGm6T+uL1e6iDvbo2eCINwvW7iVbjIblwh5kPPRM1SP8lmZrbFZf4QNJ/cqQ+JLcx49eXGM9WAB4TK7w==}
+    peerDependencies:
+      socket.io: '>=3.1.0'
+    dependencies:
+      '@types/bcryptjs': 2.4.2
+      bcryptjs: 2.4.3
+      debug: 4.3.4
+      socket.io: 4.5.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@socket.io/component-emitter/3.1.0:
     resolution: {integrity: sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==}
 
@@ -12701,7 +12702,6 @@ packages:
 
   /@types/bcryptjs/2.4.2:
     resolution: {integrity: sha512-LiMQ6EOPob/4yUL66SZzu6Yh77cbzJFYll+ZfaPiPPFswtIlA/Fs1MzdKYA7JApHU49zQTbJGX3PDmCpIdDBRQ==}
-    dev: true
 
   /@types/blessed/0.1.19:
     resolution: {integrity: sha512-r4qnseYWBsi/kxo5AAlCS22EnTXFbGpnvuXUubJikVeRnYB3e5HwV3NtcwJ0Sk5KOGaLvo9Rtwb8hzxfbqbQPg==}
@@ -24439,7 +24439,7 @@ packages:
       pretty-format: 27.5.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1_nzafxra4mdyuer2ejmql6rdadq
+      ts-node: 10.9.1_t4lrjbt3sxauai4t5o275zsepa
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -37235,7 +37235,6 @@ packages:
       typescript: 4.7.4
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    dev: false
 
   /ts-node/10.9.1_typescript@4.7.4:
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}

server/admin/app/ra/App.tsx

@@ -13,10 +13,11 @@ import AttachFileIcon from '@mui/icons-material/AttachFile';
 import { theme } from './theme';
 import { Dashboard } from './dashboard';
 import { Route } from 'react-router-dom';
-import { TailchatNetwork } from './network';
+import { TailchatNetwork } from './routes/network';
 import { TailchatLayout } from './layout';
 import { i18nProvider } from './i18n';
 import { httpClient } from './request';
+import { SocketIOAdmin } from './routes/socketio';
 
 const dataProvider = jsonServerProvider(
   // 'https://jsonplaceholder.typicode.com'
@@ -66,7 +67,9 @@ export const App = () => (
     />
 
     <CustomRoutes>
+      {/* 添加完毕以后还需要到 layout/Menu 增加侧边栏 */}
       <Route path="/network" element={<TailchatNetwork />} />
+      <Route path="/socketio" element={<SocketIOAdmin />} />
     </CustomRoutes>
   </Admin>
 );

server/admin/app/ra/layout/Menu.tsx

@@ -6,6 +6,7 @@ import {
   useResourceDefinitions,
 } from 'react-admin';
 import FilterDramaIcon from '@mui/icons-material/FilterDrama';
+import LinkIcon from '@mui/icons-material/Link';
 
 export const TailchatMenu: React.FC<MenuProps> = React.memo((props) => {
   const resources = useResourceDefinitions();
@@ -23,6 +24,12 @@ export const TailchatMenu: React.FC<MenuProps> = React.memo((props) => {
         primaryText="Tailchat 网络"
         leftIcon={<FilterDramaIcon />}
       />
+
+      <Menu.Item
+        to="/admin/socketio"
+        primaryText="Socket.IO 长链接"
+        leftIcon={<LinkIcon />}
+      />
     </Menu>
   );
 });

server/admin/app/ra/routes/network/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { request } from '../request';
+import { request } from '../../request';
 import { useRequest } from 'ahooks';
 import {
   CircularProgress,
@@ -12,7 +12,7 @@ import {
   Box,
 } from '@mui/material';
 import _uniq from 'lodash/uniq';
-import { ChipItems } from '../components/ChipItems';
+import { ChipItems } from '../../components/ChipItems';
 
 /**
  * Tailchat 网络状态

server/admin/app/ra/routes/socketio.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Typography, CardActions, Button, Box } from '@mui/material';
+import { Card, CardContent } from '@mui/material';
+
+/**
+ * SocketIO 管理
+ */
+export const SocketIOAdmin: React.FC = React.memo(() => {
+  return (
+    <Box p={4}>
+      <Card>
+        <CardContent>
+          <Typography component="div">
+            服务器URL为: <strong>ws://{window.location.host}</strong>
+          </Typography>
+          <Typography component="div">
+            账号密码为Tailchat后台的账号密码
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button
+            variant="contained"
+            onClick={() => {
+              window.open('https://admin.socket.io/');
+            }}
+          >
+            打开管理平台
+          </Button>
+        </CardActions>
+      </Card>
+    </Box>
+  );
+});
+SocketIOAdmin.displayName = 'SocketIOAdmin';

server/mixins/socketio.mixin.ts

@@ -1,6 +1,6 @@
 import { Server as SocketServer } from 'socket.io';
 import { createAdapter } from '@socket.io/redis-adapter';
-import { instrument } from '@moonrailgun/socket.io-admin-ui';
+import { instrument } from '@socket.io/admin-ui';
 import RedisClient from 'ioredis';
 import {
   TcService,
@@ -16,7 +16,7 @@ import {
 } from 'tailchat-server-sdk';
 import _ from 'lodash';
 import { ServiceUnavailableError } from 'tailchat-server-sdk';
-import { generateRandomStr, isValidStr } from '../lib/utils';
+import { isValidStr } from '../lib/utils';
 import bcrypt from 'bcryptjs';
 
 const blacklist: (string | RegExp)[] = ['gateway.*'];
@@ -488,20 +488,19 @@ export const TcSocketIOService = (
           },
         });
 
-        if (config.enableSocketAdmin) {
-          const randomPassword = generateRandomStr(16);
-
+        if (
+          isValidStr(process.env.ADMIN_USER) &&
+          isValidStr(process.env.ADMIN_PASS)
+        ) {
           this.logger.info('****************************************');
-          this.logger.info(
-            `检测到Admin管理已开启, 当前随机密码: ${randomPassword}`
-          );
+          this.logger.info(`检测到Admin管理已开启`);
           this.logger.info('****************************************');
 
           instrument(this.io, {
             auth: {
               type: 'basic',
-              username: 'tailchat-admin',
-              password: bcrypt.hashSync(randomPassword, 10),
+              username: process.env.ADMIN_USER,
+              password: bcrypt.hashSync(process.env.ADMIN_PASS, 10),
             },
           });
         }

server/package.json

@@ -37,7 +37,7 @@
     }
   },
   "dependencies": {
-    "@moonrailgun/socket.io-admin-ui": "^0.2.1",
+    "@socket.io/admin-ui": "^0.5.1",
     "@socket.io/redis-adapter": "^7.0.0",
     "@typegoose/typegoose": "9.3.1",
     "@types/blessed": "^0.1.19",