code-server-liek

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

@@ -1,43 +1,63 @@
-const socket = io('https://hsamooc.cn/vsc-like',{path:'/vsc-like-ws'});  
-    let term;
 
     document.addEventListener('DOMContentLoaded', () => {
-        // 创建一个新的 xterm 实例
-        term = new Terminal({
-            cursorBlink: true,
-            cols: 80,
-            rows: 24,
-        });
-
-        // 打开终端到 #terminal 元素
+        Terminal.applyAddon(fullscreen)
+        Terminal.applyAddon(fit)
+        Terminal.applyAddon(webLinks)
+        Terminal.applyAddon(search)
+        const term = new Terminal({
+                col:80,
+                row:20,
+                cursorBlink: 5,
+                macOptionIsMeta: true,
+            });
         term.open(document.getElementById('terminal'));
-
-        // 启动连接并监听数据
-        socket.on('connected', function (data) {
-            term.write('>');
+        term.fit()
+        term.resize(term.cols, term.rows-5)
+        console.log(`size: ${term.cols} columns, ${term.rows} rows`)
+        // term.toggleFullScreen(true)
+        term.fit()
+        term.write("Welcome to AQ web remote-only terminal!\r\n")
+        term.on('key', (key, ev) => {
+            socket.emit("pty_input", {"input": key}, function(response) {
+            });
         });
 
-        // 监听后端返回的终端输出并显示
-        socket.on('terminal_output', function (data) {
-            if (data.data=='\x7f'){
-                term.write('\b \b')
-                return
+        const socket = io('https://hsamooc.cn/vsc-like',{path:'/vsc-like-ws'});  
+        const status = document.getElementById("status")
+
+        socket.on("pty_output", function(data){
+            console.log("new output", data)
+            term.write(data.output)
+        })
+
+        socket.on("connect", () => {
+            // fitToscreen()
+            status.innerHTML = '<span style="background-color: lightgreen;">connected</span>'
+            
+            socket.emit("pty_input",{"input":"cd "+window.lesson_data.course_id+"/"+window.lesson_data.chapter_name+'/'+window.lesson_data.lesson_name+"\r"})
             }
-            term.write(data.data);  // 输出来自后端的数据
-            console.log("get",data.data)
-        });
+        )
 
-        // 监听用户在终端中输入的命令
-        term.onData(function (data) {
-            socket.emit('send_input', { input: data });  // 将用户输入通过 WebSocket 发送给后端
-        });
+        socket.on("disconnect", () => {
+            status.innerHTML = '<span style="background-color: #ff8383;">disconnected</span>'
+        })
+
+        function fitToscreen(){
+            term.fit()
+            socket.emit("resize", {"cols": term.cols, "rows": term.rows})
+        }
+
+        function debounce(func, wait_ms) {
+            let timeout
+            return function(...args) {
+            const context = this
+            clearTimeout(timeout)
+            timeout = setTimeout(() => func.apply(context, args), wait_ms)
+            }
+        }
+
+        const wait_ms = 500;
+        window.onresize = debounce(fitToscreen, wait_ms)
 
-        // 如果终端被断开，显示消息
-        socket.on('error', function (error) {
-            term.write(`\nError: ${error.message}`);
-        });
 
-        socket.on('disconnect', function () {
-            term.write('\nDisconnected from terminal');
-        });
     });