refactor: use SocketWrapper to wrap the instance

app/src/App.vue

@@ -1,5 +1,5 @@
 <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'
@@ -7,6 +7,19 @@ 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>

app/src/components/ControlPalette.vue

@@ -30,9 +30,11 @@
 
 <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

@@ -7,13 +7,13 @@
     class="bg-background-secondary h-[calc(100%-5%)] p-0.5"
   ></div>
 </template>
+
 <script setup>
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import 'xterm/css/xterm.css'
-import { io } from 'socket.io-client'
+import { onMounted, ref } from 'vue'
-import { onMounted, ref, watch } from 'vue'
+import socket from '../utils/socket'
-import sessionManager from '../utils/session'
 
 const rows = ref(40)
 const cols = ref(100)
@@ -55,40 +55,8 @@ onMounted(() => {
   term.open(terminal.value)
   term.focus()
   resizeScreen()
-})
-
-let currentSocket = null
-
-watch(sessionManager.session, async (session) => {
-  if (!session) {
-    return
-  }
-  if (currentSocket) {
-    term.clear()
-    currentSocket.disconnect()
-    currentSocket.off()
-  }
-  const host = 'wss://odyssey.wancat.cc'
-
-  console.log(session)
-
-  const socket = io(host, {
-    query: {
-      session_id: session._id,
-    },
-  })
-  currentSocket = socket
-  // console.log(sessionId)
-  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) => {
     term.write(message)
-    // (program.opts().create ? (await createdSession())._id : null) ||
-    // (await lastSession())._id
   })
   term.onData((key) => {
     socket.send(key)

app/src/utils/session.js

@@ -7,6 +7,10 @@ class SessionManager {
     this.session = ref(null)
   }
 
+  getSession() {
+    return this.session.value
+  }
+
   setSession(session) {
     console.log('Update session:', session)
     this.session.value = session
@@ -50,6 +54,4 @@ class SessionManager {
 
 const sessionManager = new SessionManager('helloworld')
 
-sessionManager.lastOrCreate().catch(console.error)
-
 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.reconnect()
+  }
+
+  on(event, callback) {
+    this.listeners.push({ event, callback })
+    if (this.socket) {
+      this.socket.on(event, callback)
+    }
+  }
+
+  reconnect() {
+    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()