前端主要用到了xterm.js，整体代码也比较简单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Alodi | Pod Web SSH</title> <link href="http://www.likecs.com/static/img/favicon.ico"> <link href="http://www.likecs.com/static/plugins/xterm/xterm.css" type="text/css"/> <link href="http://www.likecs.com/static/plugins/xterm/addons/fullscreen/fullscreen.css" type="text/css"/> </head> <body> <div></div> </body> <script src="http://www.likecs.com/static/plugins/xterm/xterm.js"></script> <script src="http://www.likecs.com/static/plugins/xterm/addons/fullscreen/fullscreen.js"></script> <script> var term = new Terminal({cursorBlink: true}); term.open(document.getElementById('terminal')); // xterm fullscreen config Terminal.applyAddon(fullscreen); term.toggleFullScreen(true); var socket = new WebSocket( 'ws://' + window.location.host + '/pod/{{ name }}'); socket.onopen = function () { term.on('data', function (data) { socket.send(data); }); socket.onerror = function (event) { console.log('error:' + e); }; socket.onmessage = function (event) { term.write(event.data); }; socket.onclose = function (event) { term.write('\n\r\x1B[1;3;31msocket is already closed.\x1B[0m'); // term.destroy(); }; }; </script> </html>term.open初始化一个Terminal
term.on会将输入的内容全部实时的传递给后端
xterm.js有一个fullscreen的插件，引入之后可以配置fullscreen，否则可能页面只有一部分terminal窗口
目前仍然遇到一个窗口大小无法调整的问题没有解决，初步判断是后端Kubernetes传回的数据决定的，查询了相关资料，找到kubectl命令可以通过添加COLUMNS和LINES的env来设置
#!/bin/sh if [ "$1" = "" ]; then echo "Usage: kshell <pod>" exit 1 fi COLUMNS=`tput cols` LINES=`tput lines` TERM=xterm kubectl exec -i -t $1 env COLUMNS=$COLUMNS LINES=$LINES TERM=$TERM bash但Kubernetes Python API的Stream没有找到配置的地方，如果你知道，麻烦告诉我