add bot page

ZhangWei-KUMO · Dec 10, 2024 · bf79ec5 · bf79ec5
1 parent 79e7121
commit bf79ec5
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 6 deletions.
diff --git a/__tests__/index.html b/__tests__/index.html
@@ -6,7 +6,7 @@
 <body>
     <div id="qrcode"></div>
     <script>
-        const ws = new WebSocket('ws://localhost:1982');
+        const ws = new WebSocket('ws://124.220.108.218:1982');
 
         ws.onopen = () => {
             console.log("Connected to WebSocket server");

diff --git a/index.js b/index.js
@@ -7,18 +7,24 @@ import {sendMessage,convertSilkToWav,readSheet,readTxt,
 import {recognizeSpeech} from './util/azure.js'
 import { config } from 'dotenv';
 import {splitTextIntoArray} from './util/reply-filter.js'
-import qrcode from 'qrcode-terminal';
+// import qrcode from 'qrcode-terminal';
 import {transporter,mailOptions} from './util/mailer.js';
 import schedule from 'node-schedule';
 import {getNews} from './util/group.js'
 import { WebSocketServer } from "ws"
+import express from 'express';
+import path from 'path';
+import open from 'open';
 
 const wss = new WebSocketServer({ port: 1982 })
+const app = express();
+const port = 3000;
+
 config();
 console.log("微信机器人启动，版本号：",bot.version());
-function qrcodeToTerminal(url) {
-  qrcode.generate(url, { small: true });
-}
+// function qrcodeToTerminal(url) {
+//   qrcode.generate(url, { small: true });
+// }
 
 export async function prepareBot() {
   bot.on("message", async (message) => {  
@@ -264,7 +270,7 @@ export async function prepareBot() {
 
   bot.on('scan', (qrcode) => {
     // 生成微信登录二维码
-    qrcodeToTerminal(qrcode);
+    // qrcodeToTerminal(qrcode);
     wss.on('connection', function connection(ws) {
       // 发送二维码给前端
       ws.send(qrcode);
@@ -326,7 +332,20 @@ export async function prepareBot() {
 }
 
 async function startBot() {
+    // Serve static files from the 'public' directory
+    app.use(express.static(path.join(process.cwd(), 'public'))); // Assuming your HTML is in 'public'
+    console.log("---")
+     app.get('/', (req, res) => {
+       res.sendFile(path.join(__dirname, './public/index.html')); // or wherever your index.html is
+     });
+
+     app.listen(port, async () => {
+       console.log(`Web server listening at http://localhost:${port}`);
+        // Open the browser automatically
+       await open(`http://localhost:${port}`);
+     });
   await prepareBot();
+
 }
 
 startBot().catch(console.error);

diff --git a/package.json b/package.json
@@ -14,13 +14,15 @@
   "dependencies": {
     "@google/generative-ai": "^0.21.0",
     "dotenv": "^16.4.5",
+    "express": "^4.21.2",
     "fluent-ffmpeg": "^2.1.2",
     "ioredis": "^5.3.2",
     "mammoth": "^1.6.0",
     "microsoft-cognitiveservices-speech-sdk": "^1.35.0",
     "moment": "^2.30.1",
     "node-schedule": "^2.1.1",
     "nodemailer": "^6.9.15",
+    "open": "^10.1.0",
     "openai": "^4.28.0",
     "pdf-parse": "^1.1.1",
     "qrcode-terminal": "^0.12.0",

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>TubeX微信机器人</title>
+</head>
+<body>
+  <center>
+    <h1>TubeX微信机器人</h1>
+    <div id="qrcode"></div>
+  </center>
+  <script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
+   <script>
+    const qrcodeContainer = document.getElementById('qrcode');
+    let ws; // 将ws声明提到外部作用域
+    let refreshInterval;
+
+    function generateQRCode(qrcodeData) {
+      console.log(qrcodeData);
+      qrcodeContainer.innerHTML = '';
+      new QRCode(qrcodeContainer, {
+        text: qrcodeData,
+        width: 228,
+        height: 228,
+        correctLevel: QRCode.CorrectLevel.H
+      });
+    }
+
+    function connectAndRequestQRCode() {
+        ws = new WebSocket('ws://localhost:1982');
+
+        ws.onmessage = (event) => {
+            const qrcodeData = event.data;
+            console.log('Received QR Code Data:', qrcodeData);
+            generateQRCode(qrcodeData);
+
+            // 获取到二维码后，停止刷新，等待扫描
+            clearInterval(refreshInterval); 
+        };
+
+        ws.onclose = () => {
+            console.log("websocket closed");
+            // 连接关闭后，重新启动定时器
+            refreshInterval = setInterval(refreshPage, 10000); 
+        };
+
+        ws.onerror = (error) => {
+            console.error("WebSocket error:", error);
+            // 出错后，重新启动定时器
+            refreshInterval = setInterval(refreshPage, 10000);
+        };
+    }
+
+    function refreshPage() {
+        console.log("Refreshing page...");
+        if (ws) {
+            ws.close(); // 关闭现有连接
+        }
+        connectAndRequestQRCode(); // 建立新的连接并请求二维码
+        // location.reload();  // 或者直接刷新页面，如果你的后端支持自动重新生成二维码
+    }
+
+    // 初始连接
+    connectAndRequestQRCode();
+
+    // 设置定时器，每10秒刷新一次
+    refreshInterval = setInterval(refreshPage, 10000);
+
+  </script>
+</body>
+</html>