feat: connect to localhost

app/src/components/TerminalPart.vue

@@ -1,5 +1,3 @@
-<script setup></script>
-
 <template>
   <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
   <button class="text-text h-[5%]">Terminal</button>
@@ -13,128 +11,72 @@
     </p> -->
   </div>
 </template>
-<script>
+<script setup>
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
-// import { AttachAddon } from 'xterm-addon-attach'
-import { stdin, stdout, exit } from 'process'
+import { AttachAddon } from 'xterm-addon-attach'
 import 'xterm/css/xterm.css'
 import { io } from 'socket.io-client'
 // import connect from 'server/src/client'
 
-export default {
-  name: 'TerminalPart',
-  data() {
-    return {
-      term: '', // 保存terminal实例
-      rows: 40,
-      cols: 100,
-    }
-  },
-  mounted() {
-    this.initXterm()
-  },
-  methods: {
-    initXterm() {
-      const xthis = this
-      const term = new Terminal({
-        rendererType: 'canvas', // 渲染类型
-        rows: xthis.rows, // 行数
-        cols: xthis.cols, // 不指定行数，自动回车后光标从下一行开始
-        convertEol: true, // 启用时，光标将设置为下一行的开头
-        // scrollback: 50, //终端中的回滚量
-        disableStdin: false, // 是否应禁用输入
-        // cursorStyle: "underline", //光标样式
-        cursorBlink: true, // 光标闪烁
-        theme: {
-          foreground: '#ECECEC', // 字体
-          background: '#000000', // 背景色
-          cursor: 'help', // 设置光标
-          lineHeight: 20,
-        },
-      })
-      const ws = 'wss://odyssey.wancat.cc'
-      // const ws = 'ws://localhost:3000'
-      const socket = io(ws, {
-        query: {
-          // session_id: sessionId,
-          session_id: '64cb80132077b982b86bdc4f',
-        },
-      })
-      socket.on('message', function incoming(data) {
-        console.log(data)
-      })
-      socket.on('open', function open() {
-        console.log('Connected to the server.')
-      })
-      // socket.on('message', function incoming(data) {
-      //   stdout.write(data)
-      // })
-      socket.on('close', function close() {
-        console.log('Disconnected from the server.')
-        exit()
-      })
-      socket.on('message', (message) => {
-        term.onData(socket.emit('input', message))
-      })
-      // const attachAddon = new AttachAddon(socket)
-      // 创建terminal实例
-      // term.loadAddon(attachAddon)
-      term.open(this.$refs.terminal)
-      // 换行并输入起始符 $
-      term.prompt = () => {
-        term.write('\r\n\x1b[33mLinux Odyssey$\x1b[0m ')
-      }
-      term.prompt()
-      // canvas背景全屏
-      const fitAddon = new FitAddon()
-      term.loadAddon(fitAddon)
+import { onMounted, ref } from 'vue'
+
+const rows = ref(40)
+const cols = ref(100)
+const terminal = ref(null)
+
+onMounted(() => {
+  const term = new Terminal({
+    rendererType: 'canvas', // 渲染类型
+    rows: rows.value, // 行数
+    cols: cols.value, // 不指定行数，自动回车后光标从下一行开始
+    convertEol: true, // 启用时，光标将设置为下一行的开头
+    // scrollback: 50, //终端中的回滚量
+    disableStdin: false, // 是否应禁用输入
+    // cursorStyle: "underline", //光标样式
+    cursorBlink: true, // 光标闪烁
+    theme: {
+      foreground: '#ECECEC', // 字体
+      background: '#000000', // 背景色
+      cursor: 'help', // 设置光标
+      lineHeight: 20,
+    },
+  })
+  // const host = 'wss://odyssey.wancat.cc'
+  const host = 'ws://localhost:3000'
+  const socket = io(host, {
+    query: {
+      // session_id: sessionId,
+      session_id: '64d0de0367459c13004bc83f',
+    },
+  })
+  socket.on('connect', function open() {
+    console.log('Connected to the server.')
+  })
+  socket.on('disconnect', function close() {
+    console.log('Disconnected from the server.')
+  })
+  socket.on('message', (message) => {
+    console.log(message)
+    term.write(message)
+  })
+  term.onData((key) => {
+    console.log(key)
+    socket.send(key)
+  })
+  term.open(terminal.value)
+
+  const fitAddon = new FitAddon()
+  term.loadAddon(fitAddon)
+  fitAddon.fit()
+  function resizeScreen() {
+    try {
+      // 窗口大小改变时，触发xterm的resize方法使自适应
       fitAddon.fit()
-      function resizeScreen() {
-        try {
-          // 窗口大小改变时，触发xterm的resize方法使自适应
-          fitAddon.fit()
-        } catch (e) {
-          console.log('e', e.message)
-        }
-      }
-      window.addEventListener('resize', resizeScreen)
-      xthis.term = term
-      xthis.socket = socket
-      xthis.runFakeTerminal()
-    },
-    runFakeTerminal() {
-      const xthis = this
-      const { term } = xthis
-      if (term.xinitialized) return
-      // 初始化
-      term.xinitialized = true
-      term.writeln('Welcome to \x1b[1;32mLinux Odyssey\x1b[0m!')
-      term.prompt()
-      // 添加事件监听器，支持输入方法
-      term.onKey((e) => {
-        const printable =
-          !e.domEvent.altKey &&
-          !e.domEvent.altGraphKey &&
-          !e.domEvent.ctrlKey &&
-          !e.domEvent.metaKey
-        if (e.domEvent.keyCode === 13) {
-          term.prompt()
-        } else if (e.domEvent.keyCode === 8) {
-          // back 删除的情况
-          if (term.xcore.buffer.x > 2) {
-            term.write('\b \b')
-          }
-        } else if (printable) {
-          term.write(e.key)
-        }
-        console.log(1, 'print', e.key)
-      })
-      term.onData((key) => {
-        // 粘贴的情况
-        if (key.length > 1) term.write(key)
-      })
-    },
-  },
-}
+    } catch (e) {
+      console.log('e', e.message)
+    }
+  }
+  window.addEventListener('resize', resizeScreen)
+})
 </script>

app/vite.config.js

@@ -4,4 +4,12 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000', // the server url
+        ws: true,
+      },
+    },
+  },
 })

server/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "commander": "^11.0.0",
+    "cors": "^2.8.5",
     "dockerode": "^3.3.5",
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.1",

server/src/api/socket.js

@@ -4,7 +4,11 @@ import Session from '../models/session.js'
 import { defaultUser, genSessionJWT } from '../utils/auth.js'
 
 export default (server) => {
-  const io = new Server(server)
+  const io = new Server(server, {
+    cors: {
+      origin: '*',
+    },
+  })
 
   io.use(async (socket, next) => {
     console.log('Authenticating...')

server/src/index.js

@@ -3,6 +3,7 @@ import express from 'express'
 import http from 'http'
 import YAML from 'yaml'
 import swaggerUI from 'swagger-ui-express'
+import cors from 'cors'
 
 import socketServer from './api/socket.js'
 import connectDB from './db.js'
@@ -22,6 +23,11 @@ async function main() {
   const swaggerDocument = YAML.parse(file)
   app.use('/api-docs', swaggerUI.serve, swaggerUI.setup(swaggerDocument))
   app.use(express.json())
+  app.use(
+    cors({
+      origin: '*',
+    })
+  )
 
   app.get('/', (req, res) => {
     res.send('Hello World!')

yarn.lock

@@ -1602,7 +1602,7 @@ cookie@~0.4.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
-cors@~2.8.5:
+cors@^2.8.5, cors@~2.8.5:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
   integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==