Merge pull request #10 from lancatlin/app-terminal

Connect web terminal to server

.eslintrc.js

@@ -21,5 +21,6 @@ module.exports = {
     'import/extensions': 'off',
     camelcase: ['error', { properties: 'never', ignoreDestructuring: true }],
     'no-param-reassign': ['error', { props: false }],
+    'no-underscore-dangle': ['error', { allow: ['_id'] }],
   },
 }

app/package.json

@@ -15,7 +15,11 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "axios": "^1.4.0",
-    "vue": "^3.3.4"
+    "socket.io-client": "^4.7.1",
+    "vue": "^3.3.4",
+    "xterm": "^5.2.1",
+    "xterm-addon-attach": "^0.8.0",
+    "xterm-addon-fit": "^0.7.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

app/src/App.vue

@@ -1,11 +1,25 @@
 <script setup>
-// Import components
+import { onMounted } from 'vue'
 import CommandlistPart from './components/CommandlistPart.vue'
 import HeaderPart from './components/HeaderPart.vue'
 import HintPart from './components/HintPart.vue'
 import QuestPart from './components/QuestPart.vue'
 import TerminalPart from './components/TerminalPart.vue'
 import VisualizationPart from './components/VisualizationPart.vue'
+import ControlPalette from './components/ControlPalette.vue'
+import socket from './utils/socket'
+import sessionManager from './utils/session'
+
+onMounted(async () => {
+  await sessionManager.lastOrCreate()
+  socket.connect(sessionManager.getSession())
+  socket.on('connect', function open() {
+    console.log('Connected to the server.')
+  })
+  socket.on('disconnect', function close() {
+    console.log('Disconnected from the server.')
+  })
+})
 </script>
 
 <template>
@@ -44,32 +58,9 @@ import VisualizationPart from './components/VisualizationPart.vue'
             </section>
           </div>
         </div>
-        <section
+        <ControlPalette />
-          class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between"
-        >
-          <button id="solution" class="bg-background-secondary rounded-lg p-2">
-            <font-awesome-icon
-              :icon="['far', 'circle-question']"
-              class="text-text-primary"
-            />
-            <p class="text-text-primary inline">Solution</p>
-          </button>
-          <button id="reset" class="bg-background-secondary rounded-lg p-2">
-            <font-awesome-icon
-              :icon="['fas', 'arrow-rotate-left']"
-              class="text-text-primary"
-            />
-            <p class="text-text-primary inline">Reset</p>
-          </button>
-          <button id="continue" class="bg-disabled-background rounded-lg p-2">
-            <font-awesome-icon
-              :icon="['far', 'circle-right']"
-              class="text-disabled-text"
-            />
-            <p class="text-disabled-text inline">Continue</p>
-          </button>
-        </section>
       </div>
     </div>
   </div>
 </template>
+<script></script>

app/src/components/ControlPalette.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between">
+    <button id="solution" class="bg-background-secondary rounded-lg p-2">
+      <font-awesome-icon
+        :icon="['far', 'circle-question']"
+        class="text-text-primary"
+      />
+      <p class="text-text-primary inline">Solution</p>
+    </button>
+    <button
+      id="reset"
+      class="bg-background-secondary rounded-lg p-2"
+      @click="reset"
+    >
+      <font-awesome-icon
+        :icon="['fas', 'arrow-rotate-left']"
+        class="text-text-primary"
+      />
+      <p class="text-text-primary inline">Reset</p>
+    </button>
+    <button id="continue" class="bg-disabled-background rounded-lg p-2">
+      <font-awesome-icon
+        :icon="['far', 'circle-right']"
+        class="text-disabled-text"
+      />
+      <p class="text-disabled-text inline">Continue</p>
+    </button>
+  </section>
+</template>
+
+<script setup>
+import sessionManager from '../utils/session'
+import socket from '../utils/socket'
+
+const reset = async () => {
+  console.log('resetting...')
+  await sessionManager.createSession()
+  socket.connect(sessionManager.getSession())
+}
+</script>

app/src/components/TerminalPart.vue

@@ -1,11 +1,65 @@
-<script setup></script>
-
 <template>
   <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
   <button class="text-text h-[5%]">Terminal</button>
-  <div class="bg-background-secondary h-[calc(100%-5%)] p-4">
+  <div
-    <p class="text-text-primary">
+    id="terminal"
-      zeko@first-command<span class="text-text">:~$</span>
+    ref="terminal"
-    </p>
+    class="bg-background-secondary h-[calc(100%-5%)] p-0.5"
-  </div>
+  ></div>
 </template>
+
+<script setup>
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import 'xterm/css/xterm.css'
+import { onMounted, ref } from 'vue'
+import socket from '../utils/socket'
+
+const rows = ref(40)
+const cols = ref(100)
+const terminal = ref(null)
+
+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 fitAddon = new FitAddon()
+term.loadAddon(fitAddon)
+fitAddon.fit()
+term.writeln('Welcome to \x1b[1;32mLinux Odyssey\x1b[0m!')
+
+function resizeScreen() {
+  try {
+    // 窗口大小改变时，触发xterm的resize方法使自适应
+    fitAddon.fit()
+  } catch (e) {
+    console.log('e', e.message)
+  }
+}
+window.addEventListener('resize', resizeScreen)
+
+onMounted(() => {
+  term.open(terminal.value)
+  term.focus()
+  resizeScreen()
+  socket.on('message', (message) => {
+    term.write(message)
+  })
+  term.onData((key) => {
+    socket.send(key)
+  })
+})
+</script>

app/src/utils/session.js

@@ -0,0 +1,57 @@
+import { ref } from 'vue'
+import api from './api'
+
+class SessionManager {
+  constructor(questId) {
+    this.questId = questId
+    this.session = ref(null)
+  }
+
+  getSession() {
+    return this.session.value
+  }
+
+  setSession(session) {
+    console.log('Update session:', session)
+    this.session.value = session
+  }
+
+  async createSession() {
+    console.log('Creating a new session...')
+    const res = await api.post('/sessions', { quest_id: this.questId })
+    const { data } = res
+    console.log('Created Session ID:', data._id)
+    this.setSession(data)
+  }
+
+  async getSessionList() {
+    const res = await api.get('/sessions', {
+      params: { quest_id: this.questId },
+    })
+    const { data } = res
+    return data
+  }
+
+  async lastSession() {
+    const sessions = await this.getSessionList()
+    if (sessions.length === 0) {
+      return
+    }
+    const session = sessions[sessions.length - 1]
+    console.log(
+      `Last Session ID: ${session._id}, Quest: ${session.quest}, Created At: ${session.createdAt}`
+    )
+    this.setSession(session)
+  }
+
+  async lastOrCreate() {
+    await this.lastSession()
+    if (!this.session.value) {
+      await this.createSession()
+    }
+  }
+}
+
+const sessionManager = new SessionManager('helloworld')
+
+export default sessionManager

app/src/utils/socket.js

@@ -0,0 +1,52 @@
+import io from 'socket.io-client'
+
+const host = 'wss://odyssey.wancat.cc'
+
+class SocketWrapper {
+  constructor() {
+    this.socket = null
+    this.listeners = []
+  }
+
+  connect(session) {
+    if (this.socket) {
+      this.socket.off()
+      this.socket.disconnect()
+    }
+
+    this.socket = io(host, {
+      query: {
+        session_id: session._id,
+      },
+    })
+
+    this.socket.on('connect', () => {
+      console.log('Socket connected to session', session._id)
+    })
+
+    this.bindListeners()
+  }
+
+  on(event, callback) {
+    this.listeners.push({ event, callback })
+    if (this.socket) {
+      this.socket.on(event, callback)
+    }
+  }
+
+  bindListeners() {
+    this.listeners.forEach(({ event, callback }) => {
+      this.socket.on(event, callback)
+    })
+  }
+
+  send(data) {
+    this.socket.send(data)
+  }
+
+  emit(event, data) {
+    this.socket.emit(event, data)
+  }
+}
+
+export default new SocketWrapper()

app/vite.config.js

@@ -4,4 +4,13 @@ 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
+        target: 'http://odyssey.wancat.cc ',
+        ws: true,
+      },
+    },
+  },
 })

yarn.lock

@@ -4887,6 +4887,21 @@ xmlhttprequest-ssl@~2.0.0:
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
   integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 
+xterm-addon-attach@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-attach/-/xterm-addon-attach-0.8.0.tgz#86e0ed08460efffb7d4bad74a57b600226594def"
+  integrity sha512-k8N5boSYn6rMJTTNCgFpiSTZ26qnYJf3v/nJJYexNO2sdAHDN3m1ivVQWVZ8CHJKKnZQw1rc44YP2NtgalWHfQ==
+
+xterm-addon-fit@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.7.0.tgz#b8ade6d96e63b47443862088f6670b49fb752c6a"
+  integrity sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ==
+
+xterm@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-5.2.1.tgz#b3fea7bdb55b9be1d4b31f4cd1091f26ac42afb8"
+  integrity sha512-cs5Y1fFevgcdoh2hJROMVIWwoBHD80P1fIP79gopLHJIE4kTzzblanoivxTiQ4+92YM9IxS36H1q0MxIJXQBcA==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"