terminal

code-server-like/static/css/index.css

@@ -21,6 +21,11 @@
   }
   
 
+  #terminal {
+    flex-grow: 1;
+    border-top: 1px solid #ddd;
+    background-color: black;
+}
 
 
 

code-server-like/static/js/terminal.js

@@ -0,0 +1,41 @@
+const socket = io.connect('https://hsamooc.cn/vsc-like/terminal');  
+    let term;
+
+    document.addEventListener('DOMContentLoaded', () => {
+        // 创建一个新的 xterm 实例
+        term = new Terminal({
+            cursorBlink: true,
+            cols: 80,
+            rows: 24,
+        });
+
+        // 打开终端到 #terminal 元素
+        term.open(document.getElementById('terminal'));
+
+        // 启动连接并监听数据
+        socket.on('connected', function (data) {
+            term.write('Terminal connected\n');
+        });
+
+        // 监听后端返回的终端输出并显示
+        socket.on('terminal_output', function (data) {
+            term.write(data.data);  // 输出来自后端的数据
+        });
+
+        // 监听用户在终端中输入的命令
+        term.onData(function (data) {
+            socket.emit('send_input', { input: data });  // 将用户输入通过 WebSocket 发送给后端
+        });
+
+        // 用户输入命令时，将其发送给后端
+        socket.emit('send_input', { input: 'start' });
+
+        // 如果终端被断开，显示消息
+        socket.on('error', function (error) {
+            term.write(`\nError: ${error.message}`);
+        });
+
+        socket.on('disconnect', function () {
+            term.write('\nDisconnected from terminal');
+        });
+    });