Python Django擼個WebSSH操作Kubernetes Pod（下）- 終端窗口自適應Resize
- 2020 年 3 月 27 日
- 筆記
追求完美不服輸的我，一直在與各種問題鬥爭的路上痛並快樂着
上一篇文章Django實現WebSSH操作Kubernetes Pod最後留了個問題沒有解決，那就是terminal內容窗口的大小沒有辦法調整，這會導致的一個問題就是瀏覽器上可顯示內容的區域太小，當查看/編輯文件時非常不便，就像下邊這樣，紅色可視區域並沒有被用到
RESIZE_CHANNEL
前文說到kubectl exec有兩個參數COLUMNS和LINES可以調整tty內容窗口的大小，命令如下：
kubectl exec -i -t $1 env COLUMNS=$COLUMNS LINES=$LINES bash 這實際上就是將COLUMNS和LINES兩個環境變量傳遞到了容器內，由於Kubernetes stream底層也是通過kubernetes exec實現的，所以我們在啟動容器時也將這兩個變量傳遞進去就可以了，就像這樣
exec_command = [ "/bin/sh", "-c", 'export LINES=20; export COLUMNS=100; ' 'TERM=xterm-256color; export TERM; [ -x /bin/bash ] ' '&& ([ -x /usr/bin/script ] ' '&& /usr/bin/script -q -c "/bin/bash" /dev/null || exec /bin/bash) ' '|| exec /bin/sh'] 添加了export LINES=20; export COLUMNS=100;，可以實現改變tty的輸出大小，但這有個問題就是只能在建立鏈接時指定一次，不能動態的更新，也就是在一次websocket會話的過程中，如果頁面大小改變了，後端輸出的LINES和COLUMNS是無法隨着改變的
在解決問題的過程中發現官方源碼中有個RESIZE_CHANNEL的配置，同樣可以控制窗口的大小，使用方法如下：
cont_stream = stream(api_instance.connect_get_namespaced_pod_exec, name=pod_name, namespace=self.namespace, container=container, command=exec_command, stderr=True, stdin=True, stdout=True, tty=True, _preload_content=False ) cont_stream.write_channel(4, json.dumps({"Height": int(rows), "Width": int(cols)})) 這樣我們就可以修改stream輸出的窗口大小了
xterm.js fit
一頓操作後，打開頁面，咦？怎麼頁面不行，原來窗口的調整不僅需要調整stream輸出數據的窗口大小，前端頁面也要跟着一併調整
這裡用到了xterm.js的另一個組件fit，fit可以調整終端大小的cols和rows適配父級元素
首先調整terminal塊的寬度和高度為整個頁面可視區域的大小，要讓整個可視區域為終端窗口
document.getElementById('terminal').style.height = window.innerHeight + 'px'; 然後引入fit組件，在term初始化之後執行fit操作
<script src="/static/plugins/xterm/xterm.js"></script> <script src="/static/plugins/xterm/addons/fit/fit.js"></script> <script> // 修改terminal的高度為body的高度 document.getElementById('terminal').style.height = window.innerHeight + 'px'; var term = new Terminal({cursorBlink: true}); term.open(document.getElementById('terminal')); // xterm fullscreen config Terminal.applyAddon(fit); term.fit(); console.log(term.cols, term.rows); </script> fit之後就可以通過term.cols和term.rows取到xterm.js根據字體大小自動計算過的cols和rows的值了，然後把這兩個值傳遞給kubernetes，kubernetes再根據這兩個值輸出窗口大小，這樣前後端匹配就完美了
數據傳遞
xterm.js可以通過如下的方法動態的將cols和rows傳遞給後端
term.on('resize', size => { socket.send('resize', [size.cols, size.rows]); }) 但當窗口由大變小時，之前輸出的內容會有樣式錯亂，我為了方便直接在WebSocket連接建立時採用url傳參的方式把cols和rows兩個值傳遞給後端，kubernetes根據這兩個值來設置輸出內容的窗口大小，這樣做的缺點是不會隨着前端頁面的變化動態的去調整後端stream輸出窗口的大小，不過問題不大，如果頁面調整大小，刷新下頁面重新建立連接就可以啦，具體實現如下
首先需要修改的就是WebSocket的url地址
前端增加term.cols和term.rows兩個參數的傳遞
var socket = new WebSocket( 'ws://' + window.location.host + '/pod/{{ name }}/'+term.cols+'/'+term.rows); Routing增加兩個參數的解析
re_path(r'^pod/(?P<name>w+)/(?P<cols>d+)/(?P<rows>d+)$', SSHConsumer), Consumer解析URL將對應參數傳遞給Kubernetes stream
class SSHConsumer(WebsocketConsumer): def connect(self): self.name = self.scope["url_route"]["kwargs"]["name"] self.cols = self.scope["url_route"]["kwargs"]["cols"] self.rows = self.scope["url_route"]["kwargs"]["rows"] # kube exec self.stream = KubeApi().pod_exec(self.name, cols=self.cols, rows=self.rows) kub_stream = K8SStreamThread(self, self.stream) kub_stream.start() self.accept() 最後Kubernetes stream接收參數並修改窗口大小
def pod_exec(self, RAND, container="", rows=24, cols=80): api_instance = client.CoreV1Api() exec_command = [ "/bin/sh", "-c", 'TERM=xterm-256color; export TERM; [ -x /bin/bash ] ' '&& ([ -x /usr/bin/script ] ' '&& /usr/bin/script -q -c "/bin/bash" /dev/null || exec /bin/bash) ' '|| exec /bin/sh'] cont_stream = stream(api_instance.connect_get_namespaced_pod_exec, name=pod_name, namespace=self.namespace, container=container, command=exec_command, stderr=True, stdin=True, stdout=True, tty=True, _preload_content=False ) cont_stream.write_channel(4, json.dumps({"Height": int(rows), "Width": int(cols)})) return cont_stream 至此，每次WebSocket連接建立，前後端就會有一樣的輸出窗口大小，問題解決~
相關文章推薦閱讀：
