refactor: update WebUIServer configuration onlyLocalHost

linyuchen · linyuchen · commit 2935d1477134 · 2025-10-10T14:19:38.000+08:00
diff --git a/package-dist.json b/package-dist.json
@@ -1 +1 @@
-{"name":"llonebot","version":"6.3.0","type":"module","description":"","main":"llonebot.js","author":"linyuchen"}
+{"name":"llonebot","version":"6.3.1","type":"module","description":"","main":"llonebot.js","author":"linyuchen"}
diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts
@@ -4,4 +4,8 @@ export * from './legacyLog'
 export * from './misc'
 export * from './upgrade'
 export { getVideoInfo, checkFfmpeg } from './video'
-export { encodeSilk } from './audio'
+export { encodeSilk } from './audio'
+
+export async function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -119,6 +119,7 @@ async function onLoad() {
       ctx.parallel('llob/config-updated', c)
     })
     loadPluginAfterLogin()
+    ctx.webuiServer.setConfig(config)
   }
   else {
     config = defaultConfig
@@ -134,21 +135,16 @@ async function onLoad() {
         const uin = await ctx.ntUserApi.getUinByUid(data[2])
         selfInfo.uin = uin
         const configUtil = getConfigUtil(true)
+        config = configUtil.getConfig()
+        ctx.parallel('llob/config-updated', config)
+        configUtil.listenChange(c => {
+          ctx.parallel('llob/config-updated', c)
+        })
         loadPluginAfterLogin()
         // this.ctx.database.config.path = path.join(dbDir, `${uin}.db`)
         ctx.ntUserApi.getSelfNick().then(nick => {
           ctx.logger.info(`获取登录号${uin}昵称成功`, nick)
-          Object.assign(selfInfo, {
-            uin,
-            nick: nick,
-            online: true,
-          })
-          const config = configUtil.getConfig()
-          configUtil.setConfig(config)
-          ctx.parallel('llob/config-updated', config)
-          configUtil.listenChange(c => {
-            ctx.parallel('llob/config-updated', c)
-          })
+          selfInfo.nick = nick
         }).catch(e => {
           ctx.logger.warn('获取登录号昵称失败', e)
         })
diff --git a/src/ntqqapi/core.ts b/src/ntqqapi/core.ts
@@ -68,7 +68,6 @@ class Core extends Service {
   public start() {
     this.startupTime = Math.trunc(Date.now() / 1000)
     this.registerListener()
-    this.ctx.logger.info(`LLTwoBot/${version}`)
     this.ctx.on('llob/config-updated', input => {
       Object.assign(this.config, input)
       setFFMpegPath(input.ffmpeg || '')
diff --git a/src/version.ts b/src/version.ts
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import packageJson from '../package-dist.json'
 
-export const version = '6.3.0'
+export const version = '6.3.1'
 
 export const writeVersion = ()=>{
   const pkgJsonPath = './package-dist.json'
diff --git a/src/webui/BE/server.ts b/src/webui/BE/server.ts
@@ -5,12 +5,14 @@ import { fileURLToPath } from 'url'
 import { getConfigUtil, webuiTokenUtil } from '@/common/config'
 import { Config, WebUIConfig } from '@/common/types'
 import { Server } from 'http'
+import { Socket } from 'net'
 import { Context, Service } from 'cordis'
 import { selfInfo, LOG_DIR } from '@/common/globalVars'
 import { getAvailablePort } from '@/common/utils/port'
 import { pmhq } from '@/ntqqapi/native/pmhq'
 import { ReqConfig, ResConfig } from './types'
 import { appendFileSync } from 'node:fs'
+import { sleep } from '@/common/utils'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -72,12 +74,34 @@ setInterval(() => {
   }
 }, 60 * 60 * 1000)
 
-abstract class WebUIServerBase extends Service {
-  protected server: Server | null = null
-  protected app: Express = express()
-  abstract appName: string
+export class WebUIServer extends Service {
+  private server: Server | null = null
+  private app: Express = express()
+  private connections = new Set<Socket>()
+  private currentPort?: number
+  public port?: number = undefined
+  static inject = ['ntLoginApi']
+
+  constructor(ctx: Context, public config: WebUIServerConfig) {
+    super(ctx, 'webuiServer', true)
+    // 初始化服务器路由
+    this.initServer()
+    // 监听 config 更新事件
+    ctx.on('llob/config-updated', (newConfig: Config) => {
+      const oldConfig = { ...this.config }
+      this.setConfig(newConfig)
+      const forcePort = (oldConfig.port === newConfig.webui?.port) ? this.currentPort : undefined
+      if (oldConfig.onlyLocalhost != newConfig.onlyLocalhost
+        || oldConfig.enable != newConfig.webui?.enable
+        || oldConfig.port != newConfig.webui?.port
+      ) {
+        this.ctx.logger.info('WebUI 配置已更新:', this.config)
+        setTimeout(() => this.restart(forcePort), 1000)
+      }
+    })
+  }
 
-  protected initServer() {
+  private initServer() {
     this.app.use(express.static(feDistPath))
     this.app.use(express.json())
     this.app.use(cors())
@@ -252,62 +276,81 @@ abstract class WebUIServerBase extends Service {
     })
   }
 
-  abstract getHostPort(): { host: string, port: number }
+  private getHostPort(): { host: string; port: number } {
+    const host = this.config.onlyLocalhost ? '127.0.0.1' : ''
+    return { host, port: this.config.port }
+  }
 
-  async startServer() {
+  private async startServer(forcePort?: number) {
     const { host, port } = this.getHostPort()
-    console.log(`Starting server: ${host}:${port}`)
-    const availablePort = await getAvailablePort(port)
-    this.server = this.app.listen(availablePort, host, () => {
-      this.ctx.logger.info(`${this.appName} 端口: ${port}`)
+    const targetPort = forcePort !== undefined ? forcePort : await getAvailablePort(port)
+    this.server = this.app.listen(targetPort, host, () => {
+      this.currentPort = targetPort
+      this.ctx.logger.info(`Webui 服务器已启动 ${host}:${targetPort}`)
+    })
+
+    // 跟踪所有连接，以便在停止时能够关闭它们
+    this.server.on('connection', (conn) => {
+      this.connections.add(conn)
+      conn.on('close', () => {
+        this.connections.delete(conn)
+      })
     })
+
     this.server.on('error', (err: any) => {
       if (err.code === 'EADDRINUSE') {
-        this.ctx.logger.error(`${this.appName} 端口 ${port} 被占用，启动失败！`)
+        this.ctx.logger.error(`Webui 端口 ${targetPort} 被占用，启动失败！`)
       }
       else {
-        this.ctx.logger.error(`${this.appName} 启动失败:`, err)
+        this.ctx.logger.error(`Webui 启动失败:`, err)
       }
     })
-    return availablePort
+    return targetPort
   }
 
   stop() {
-    this.server?.close()
-  }
-
-  restart() {
-    this.stop()
-    this.start()
-  }
-}
-
-export class WebUIServer extends WebUIServerBase {
-  appName = 'Webui'
-  public port?: number = undefined
-  static inject = ['ntLoginApi']
+    return new Promise<void>((resolve) => {
+      if (this.server) {
+        // 先关闭所有现有连接
+        if (this.connections.size > 0) {
+          this.ctx.logger.info(`Webui 正在关闭 ${this.connections.size} 个连接...`)
+          for (const conn of this.connections) {
+            conn.destroy()
+          }
+          this.connections.clear()
+        }
 
-  constructor(ctx: Context, public config: WebUIServerConfig) {
-    super(ctx, 'webuiServer', true)
-    // 获取配置接口
-    this.initServer()
-    // 监听 config 更新事件
-    ctx.on('llob/config-updated', (newConfig: Config) => {
-      const oldConfig = { ...this.config }
-      this.config = { onlyLocalhost: newConfig.onlyLocalhost, ...newConfig.webui }
-      if (oldConfig.onlyLocalhost != newConfig.onlyLocalhost
-        || oldConfig.enable != newConfig.webui?.enable
-        || oldConfig.port != newConfig.webui?.port
-      ) {
-        this.ctx.logger.info('WebUI 配置已更新:', this.config)
-        this.restart()
+        // 然后关闭服务器
+        this.server.close((err) => {
+          if (err) {
+            this.ctx.logger.error(`Webui 停止时出错:`, err)
+          }
+          else {
+            this.ctx.logger.info(`Webui 服务器已停止`)
+          }
+          this.server = null
+          // 不清空 currentPort，以便 restart 时复用
+          resolve()
+        })
+      }
+      else {
+        this.ctx.logger.info(`Webui 服务器未运行`)
+        resolve()
       }
     })
   }
 
-  getHostPort(): { host: string; port: number } {
-    const host = this.config.onlyLocalhost ? '127.0.0.1' : ''
-    return { host, port: this.config.port }
+  async restart(forcePort?: number) {
+    await this.stop()
+    // 等待端口完全释放（Windows 上需要）
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    await this.startWithPort(forcePort)
+  }
+
+  private setConfig(newConfig: Config) {
+    const oldConfig = { ...this.config }
+    this.config = { onlyLocalhost: newConfig.onlyLocalhost, ...newConfig.webui }
+
   }
 
   async start() {
@@ -319,5 +362,15 @@ export class WebUIServer extends WebUIServerBase {
       this.ctx.logger.error('记录 WebUI 端口失败:', err)
     })
   }
+
+  private async startWithPort(forcePort?: number): Promise<void> {
+    if (!this.config?.enable) {
+      return
+    }
+    this.port = await this.startServer(forcePort)
+    pmhq.tellPort(this.port).catch((err: Error) => {
+      this.ctx.logger.error('记录 WebUI 端口失败:', err)
+    })
+  }
 }
 
diff --git a/src/webui/FE/components/OtherConfig.tsx b/src/webui/FE/components/OtherConfig.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Config } from '../types'
-import { Globe, FileText, Trash2, Music, Lock, Clock, Shield, Edit } from 'lucide-react'
+import { Globe, FileText, Trash2, Music, Lock, Clock, Shield, Edit, Paperclip } from 'lucide-react'
 
 interface OtherConfigProps {
   config: Config;
@@ -57,6 +57,29 @@ const OtherConfig: React.FC<OtherConfigProps> = ({ config, onChange, onOpenChang
             className='flex items-center justify-between p-4 bg-gray-50/50 rounded-xl hover:bg-gray-100/50 transition-colors'>
             <div className='flex items-center gap-3'>
               <Globe size={20} className='text-blue-600' />
+              <div>
+                <div className='text-sm font-medium text-gray-800'>只监听本地地址</div>
+                <div className='text-xs text-gray-500 mt-0.5'>取消后可能会暴露在公网</div>
+              </div>
+            </div>
+            <input
+              type='checkbox'
+              checked={config.onlyLocalhost}
+              onChange={(e) => handleChange('onlyLocalhost', e.target.checked)}
+              className="w-12 h-6 rounded-full bg-gray-300 relative cursor-pointer appearance-none
+                checked:bg-gradient-to-r checked:from-blue-500 checked:to-purple-600
+                transition-colors duration-200 ease-in-out
+                before:content-[''] before:absolute before:top-0.5 before:left-0.5
+                before:w-5 before:h-5 before:rounded-full before:bg-white
+                before:transition-transform before:duration-200
+                checked:before:translate-x-6"
+            />
+          </div>
+          <div
+            className='flex items-center justify-between p-4 bg-gray-50/50 rounded-xl hover:bg-gray-100/50 transition-colors'>
+            <div className='flex items-center gap-3'>
+              {/*<FileText size={20} className='text-blue-600' />*/}
+              <Paperclip size={20} className='text-blue-600'/>
               <div>
                 <div className='text-sm font-medium text-gray-800'>本地文件转URL</div>
                 <div className='text-xs text-gray-500 mt-0.5'>启用后可将本地文件转换为URL链接</div>

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"name":"llonebot","version":"6.3.0","type":"module","description":"","main":"llonebot.js","author":"linyuchen"}`
	`1`	`+{"name":"llonebot","version":"6.3.1","type":"module","description":"","main":"llonebot.js","author":"linyuchen"}`