From 19303aad9054fde5e441a72e680951cbc438278e Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 8 Aug 2023 21:14:16 +0800
Subject: [PATCH] fix

---
 app/src/components/TerminalPart.vue | 136 ++++++++++++++++++----------
 server/src/api/socket.js            |  19 ++--
 2 files changed, 99 insertions(+), 56 deletions(-)

diff --git a/app/src/components/TerminalPart.vue b/app/src/components/TerminalPart.vue
index 98baa6f..8064827 100644
--- a/app/src/components/TerminalPart.vue
+++ b/app/src/components/TerminalPart.vue
@@ -13,65 +13,101 @@
 </template>
 <script setup>
 import { Terminal } from 'xterm'
+import { onMounted, ref } from 'vue'
 import { FitAddon } from 'xterm-addon-fit'
 import { AttachAddon } from 'xterm-addon-attach'
+import { stdin, stdout, exit } from 'process'
 import 'xterm/css/xterm.css'
 import { io } from 'socket.io-client'
 // import connect from 'server/src/client'
 
-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方法使自适应
+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)
+        term.write(data)
+      })
+      socket.on('connect', function open() {
+        console.log('Connected to the server.')
+      })
+      // socket.on('message', function incoming(data) {
+      //   stdout.write(data)
+      // })
+      socket.on('disconnect', function close() {
+        console.log('Disconnected from the server.')
+        exit()
+      })
+      socket.on('message', (message) => {
+        console.log(message)
+        term.write(message)
+      })
+      term.onData((data) => {
+        // xthis.socket.emit('data', new TextEncoder().encode(`\x00${data}`))
+        // socket.send('data', new TextEncoder().encode(`\x00${data}`))
+        console.log(data)
+        socket.send(data)
+      })
+      // term.onData(function (key) {
+      //     let order = {
+      //       Data: key,
+      //       Op: "stdin"
+      //     };
+      //     xthis.onSend(order);
+      //   });
+      //   xthis.term = term;
+      // }
+      // 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)
       fitAddon.fit()
     } catch (e) {
       console.log('e', e.message)
diff --git a/server/src/api/socket.js b/server/src/api/socket.js
index a7df255..f5ea960 100644
--- a/server/src/api/socket.js
+++ b/server/src/api/socket.js
@@ -4,12 +4,19 @@ import Session from '../models/session.js'
 import { defaultUser, genSessionJWT } from '../utils/auth.js'
 
 export default (server) => {
-  const io = new Server(server, {
-    cors: {
-      origin: '*',
+  const io = new Server(
+    server,
+    {
+      cors: {
+        origin: '*',
+      },
     },
-  })
-
+    {
+      cors: {
+        origin: '*',
+      },
+    }
+  )
   io.use(async (socket, next) => {
     console.log('Authenticating...')
     try {
@@ -54,7 +61,7 @@ export default (server) => {
     const stream = await attachContainer(container, { token })
 
     stream.on('data', (chunk) => {
-      socket.send(chunk.toString())
+      socket.send(chunk.toString().toString())
     })
 
     socket.on('message', function incoming(message) {