dev: websocket

nuxt.config.ts

@@ -2,5 +2,10 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@pinia/nuxt'],
-  css: ['~/assets/css/main.css', '~/assets/css/color.css']
+  css: ['~/assets/css/main.css', '~/assets/css/color.css'],
+  nitro: {
+    experimental: {
+      websocket: true
+    }
+  }
 })

package.json

@@ -12,10 +12,13 @@
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",
     "dockerode": "^3.3.5",
+    "engine.io": "^6.5.4",
     "lodash": "^4.17.21",
     "nuxt": "^3.11.1",
     "pg": "^8.11.5",
     "pinia": "^2.1.7",
+    "socket.io": "^4.7.5",
+    "socket.io-client": "^4.7.5",
     "tar-fs": "^3.0.5",
     "telnet-client": "^2.2.0",
     "vue": "^3.4.21",

pages/home.vue

@@ -98,6 +98,7 @@
 
 <script lang="ts" setup>
 import { useUserStore } from '~/store/user';
+import { io } from 'socket.io-client';
 
 const username = ref(useUserStore().username)
 
@@ -105,7 +106,7 @@ const status = ref('null') // null | created | stopped | running | creating | co
 const statusV1 = ref('null')
 const loading = ref(false)
 const logLevel = ref('progress') // info | progress
-const logs = ref([])
+const logs = ref([] as string[])
 const port = ref(0)
 
 const renderLogs = computed(() => {
@@ -114,29 +115,25 @@ const renderLogs = computed(() => {
 })
 
 onMounted(() => {
-  // socket = io({
-  //   path: '/api/socket',
-  //   auth: {
-  //     username: username
-  //   }
-  // });
-  // // eslint-disable-next-line no-control-regex
-  // const removeLogPrefix = (log) => log.replace(/^\[.*?\]\s/, '').replace(/[\u0000-\u0009]/g, '').replace(/[\u000B-\u001F]/g, '')
+  const socket = io({
+    path: '/socket.io',
+    auth: {
+      username: username.value
+    }
+  });
+  // eslint-disable-next-line no-control-regex
+  const removeLogPrefix = (log: string) => log.replace(/^\[.*?\]\s/, '').replace(/[\u0000-\u0009]/g, '').replace(/[\u000B-\u001F]/g, '')
 
-  // const replaceLineFlag = (log) => log.replaceAll('\n', '<br />')
-  // socket.on('Log', (log) => {
-  //   if (logLevel === 'info') {
-  //     logs.push(replaceLineFlag(removeLogPrefix(log)))
-  //   } else {
-  //     if (!log.startsWith('[info]')) {
-  //       logs.push(replaceLineFlag(removeLogPrefix(log)))
-  //     }
-  //   }
-  //   if (log === '[progress] [[1;31mSuccess[m]] installed') {
-  //     loading = false
-  //     handleGetStatus()
-  //   }
-  // })
+  const replaceLineFlag = (log: string) => log.replaceAll('\n', '<br />')
+  socket.on('Log', (log) => {
+    if (logLevel.value === 'info') {
+      logs.value.push(replaceLineFlag(removeLogPrefix(log)))
+    } else {
+      if (!log.startsWith('[info]')) {
+        logs.value.push(replaceLineFlag(removeLogPrefix(log)))
+      }
+    }
+  })
 
   handleGetStatus()
   checkAndRestartDocker()
@@ -284,7 +281,7 @@ function handleDebug() {
   })
 }
 function test() {
-  $fetch('/api/test/putArchive', { method: 'post' }).then(() => {
+  $fetch('/api/devops/v2/test').then(() => {
     alert('测试成功')
   }).catch(() => {
     alert('测试失败')

server/api/devops/v2/test.ts

@@ -3,8 +3,6 @@ import LogUtil from "~/server/utils/log"
 export default defineEventHandler(async (event) => {
   try {
     let username = event.context.username
-    let docker = createDockerFactory(username)
-    let container = await docker.checkContainer('logwire_backend_helper.' + username + '.node')
     LogUtil.printInfo(username, '测试消息')
   } catch (err) {
     setResponseStatus(event, 500)

server/plugins/socket.io.ts

+import type { NitroApp } from "nitropack";
+import { Server as Engine } from "engine.io";
+import { Server } from "socket.io";
+import { defineEventHandler } from "h3";
+import { setWebsocketIo } from "../utils/log";
+
+export default defineNitroPlugin((nitroApp: NitroApp) => {
+  const engine = new Engine();
+  const io = new Server();
+
+  io.bind(engine);
+
+  io.on("connection", (socket: any) => {
+    let username = socket.handshake.auth['username']
+    setWebsocketIo(username, socket)
+  });
+
+  nitroApp.router.use("/socket.io/", defineEventHandler({
+    handler(event) {
+      engine.handleRequest(event.node.req, event.node.res);
+      event._handled = true;
+    },
+    websocket: {
+      open(peer) {
+        const nodeContext = peer.ctx.node;
+        const req = nodeContext.req;
+
+        // @ts-expect-error private method
+        engine.prepare(req);
+
+        const rawSocket = nodeContext.req.socket;
+        const websocket = nodeContext.ws;
+
+        // @ts-expect-error private method
+        engine.onWebSocket(req, rawSocket, websocket);
+      }
+    }
+  }));
+});
\ No newline at end of file

server/utils/log.ts

@@ -5,43 +5,43 @@
 
 import { setUserConfig, getUserConfig } from "./server"
 
-// import { Socket } from "socket.io/dist/socket";
+import { Socket } from "socket.io";
 
-// let websocket: Map<string, Socket> = new Map()
-// export function setWebsocketIo (username: string, io: Socket) {
-//   websocket.set(username, io)
-// }
-// export function getWebsocketIo (username: string) {
-//   return websocket.get(username) as Socket
-// }
+let websocket: Map<string, Socket> = new Map()
+export function setWebsocketIo (username: string, io: Socket) {
+  websocket.set(username, io)
+}
+export function getWebsocketIo (username: string) {
+  return websocket.get(username) as Socket
+}
 
 export default class LogUtil {
   // 根据 log 判断用户是否已经执行过
   static async run (username: string, log: string, cb: () => Promise<void>) {
     let key = 'InstallSteps'
     let steps: string[] = getUserConfig(username, key) || []
-    // let socket = getWebsocketIo(username)
-    // socket.emit('Log', '[progress] [1m[Loading][m ' + log + '中...\n')
+    let socket = getWebsocketIo(username)
+    socket.emit('Log', '[progress] [1m[Loading][m ' + log + '中...\n')
     await cb()
     steps.push(log)
     setUserConfig(username, key, steps)
-    // socket.emit('Log', '[progress] [1m[Info][m ' + log + '完成\n')
+    socket.emit('Log', '[progress] [1m[Info][m ' + log + '完成\n')
   }
   static async print(username: string, log: string) {
-    // let socket = getWebsocketIo(username)
-    // socket.emit('Log', removeUnreadCharacter(log))
+    let socket = getWebsocketIo(username)
+    socket.emit('Log', removeUnreadCharacter(log))
   }
   static async printInfo(username: string, log: string) {
-    // let socket = getWebsocketIo(username)
-    // socket.emit('Log', removeUnreadCharacter(`[progress] [[1;34mInfo[m] ${log} \n`))
+    let socket = getWebsocketIo(username)
+    socket.emit('Log', removeUnreadCharacter(`[progress] [[1;34mInfo[m] ${log} \n`))
   }
   static async printError(username: string, log: string) {
-    // let socket = getWebsocketIo(username)
-    // socket.emit('Log', removeUnreadCharacter(`[error] [[1;31mError[m] ${log} \n`))
+    let socket = getWebsocketIo(username)
+    socket.emit('Log', removeUnreadCharacter(`[error] [[1;31mError[m] ${log} \n`))
   }
   static async printSuccess(username: string, log: string) {
-    // let socket = getWebsocketIo(username)
-    // socket.emit('Log', removeUnreadCharacter(`[progress] [[1;31mSuccess[m] ${log} \n`))
+    let socket = getWebsocketIo(username)
+    socket.emit('Log', removeUnreadCharacter(`[progress] [[1;31mSuccess[m] ${log} \n`))
   }
   static async printWarning (username: string, log: string) {