追求完美不服输的我,一直在与各种问题斗争的路上痛并快乐着

上一篇文章Django实现WebSSH操作Kubernetes Pod最后留了个问题没有解决,那就是terminal内容窗口的大小没有办法调整,这会导致的一个问题就是浏览器上可显示内容的区域太小,当查看/编辑文件时非常不便,就像下边这样,红色可视区域并没有被用到

RESIZE_CHANNEL

前文说到kubectl exec有两个参数COLUMNSLINES可以调整tty内容窗口的大小,命令如下:

kubectl exec -i -t $1 env COLUMNS=$COLUMNS LINES=$LINES bash

这实际上就是将COLUMNSLINES两个环境变量传递到了容器内,由于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可以调整终端大小的colsrows适配父级元素

首先调整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.colsterm.rows取到xterm.js根据字体大小自动计算过的colsrows的值了,然后把这两个值传递给kubernetes,kubernetes再根据这两个值输出窗口大小,这样前后端匹配就完美了

数据传递

xterm.js可以通过如下的方法动态的将colsrows传递给后端

term.on('resize', size => {
  socket.send('resize', [size.cols, size.rows]);
})

但当窗口由大变小时,之前输出的内容会有样式错乱,我为了方便直接在WebSocket连接建立时采用url传参的方式把colsrows两个值传递给后端,kubernetes根据这两个值来设置输出内容的窗口大小,这样做的缺点是不会随着前端页面的变化动态的去调整后端stream输出窗口的大小,不过问题不大,如果页面调整大小,刷新下页面重新建立连接就可以啦,具体实现如下

首先需要修改的就是WebSocket的url地址

前端增加term.colsterm.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连接建立,前后端就会有一样的输出窗口大小,问题解决~


相关文章推荐阅读:

Kubernetes WebSSH终端窗口自适应Resize的更多相关文章

  1. Python Django撸个WebSSH操作Kubernetes Pod(下)- 终端窗口自适应Resize

    追求完美不服输的我,一直在与各种问题斗争的路上痛并快乐着 上一篇文章Django实现WebSSH操作Kubernetes Pod最后留了个问题没有解决,那就是terminal内容窗口的大小没有办法调整 ...

  2. WPF 窗口自适应

    窗口自适应就是说,当主窗口缩放的时候,内部的控件位置自动的调整,而不是隐藏掉.这主要依赖于Grid布局. 1.比如这个groupbox 本身是在一个Grid的Row中的.缩放之后,左边的button不 ...

  3. xshell 终端窗口目录显示为深蓝色的不易分辨问题

    xshell更改终端窗口目录展示深蓝色的不易分辨 经常使用xshell远程连接服务器,使用ls命令,目录的颜色都是深蓝色, 如果终端窗口背景颜色是黑色的(对眼睛较好的黑色的背景色,大家一般都选择黑色背 ...

  4. 终端I/O之终端窗口的大小

    大多数UNIX系统都提供了一种功能,可以对当前终端窗口的大小进行跟踪,在窗口大小发生变化时,使内核通知前台进程组.内核为每个终端和伪终端保存一个winsize结构: Struct winsize { ...

  5. 显示 Ubuntu 11.10 的 终端窗口

    显示 Ubuntu 11.10 的 终端窗口 一.点击左上角的图标 -> 在search框里搜索termial . 二.快捷键:Ctrl+Alt+t.

  6. Ubuntu自定义终端窗口位置

    方法一: 自定义终端启动快捷键 具体方法是自定义一个快速启动终端的快捷键,附带设置终端启动时的位置参数.首先获得需要放置窗口的目标位置信息,可以通过终端命令“ xwininfo ”来获得.步骤是首先打 ...

  7. VS Code 终端窗口无法输入命令的解决方案

    问题 今天打开vs code,打开终端窗口,发现不能输入命令了 解决方法 邮件桌面 vscode的快捷键,打开“兼容性”标签,勾选"以管理员身份运行此程序" 结果 修改之后重启vs ...

  8. 使用MVVM DataTriggers在WPF XAML视图之间切换/Window窗口自适应内容大小并居中

    原文 使用MVVM DataTriggers在WPF XAML视图之间切换 相关文章: http://www.technical-recipes.com/2016/switching-between- ...

  9. VMVare的窗口自适应

    啊!好久没来博客园了.原因很简单,我把密码丢了. 最近才从系统申请重置了密码,这不,又能登录了.你可能好奇,是的,我也在疑惑:我是不是搞IT的啊?因为只要密码丢失,我就认为世界完蛋了,我完蛋了:) 这 ...

随机推荐

  1. 23 (OC)* 推送、APNS

    1:APNS的推送机制 2:APNS推送通知的详细工作流程 3:准备工作 4:TCP长连接 5:消息格式 6:卸载后接受不到消息 1.APNS的推送机制 首先我们看一下苹果官方给出的对ios推送机制的 ...

  2. vsftpd上传文件大小为0(主动模式)

    最近在搞VSFTPD+Nginx结合,但是发现上传文件大小总是为0, 由于最开始在搞的时候不知道主动模式和被动模式到底是什么鬼东西,所以遇到问题根本找不到根的原因,遇到问题只是乱搜,好像是解决了问题, ...

  3. SpringBoot集成Shiro 实现动态加载权限

    一.前言 本文小编将基于 SpringBoot 集成 Shiro 实现动态uri权限,由前端vue在页面配置uri,Java后端动态刷新权限,不用重启项目,以及在页面分配给用户 角色 . 按钮 .ur ...

  4. .Net Core自动化部署系列(一):Jenkins + GitLab

    项目进行微服化改造后系统发布就变得愈为重要,因为持续集成导致部署变得越来越频繁,人工部署带来的一些问题日渐凸显,大家可能都有被系统部署线问题困扰过的经历. 本篇我们将会使用Jenkins+Gitlab ...

  5. Vue-cli连接mysql

    本文把前后台一起串起来,前端使用vue-cli后台用nodejs连接数据库,vue-cli请求接口其数据是来自于mysql数据. 一.vue-cli请求接口部分 <template> &l ...

  6. MySQL8身份验证问题解决

    开新项目.使用MySQL8,在经历过B级别的网速下载后,终于安装好了MySQL,虽然在终端上是可以直接登录的. 但是我使用Navicat就无法访问了,提示什么登录失败,还有乱码. 搜索了一下,发现是M ...

  7. PHP生成唯一ID的方法

    PHP自带生成唯一id的函数:uniqid() 它是基于当前时间微秒数的 用法如下: echo uniqid(); //13位的字符串 echo uniqid("php_"); / ...

  8. JDK-基于Windows环境搭建

    JDK安装: 毋庸置疑你要跑java程序,肯定少不了JDK,如jemter还有还有~ 下载jdk地址1:https://pan.baidu.com/s/1FIvGNvZSy0EpCBxHCz07nA  ...

  9. springboot使用百度富文本UEditor遇到的问题一览(springboot controller中request.getInputStream无法读取)

    先吐槽一下UEditor作为一个前端的js类库,非要把4种后端的代码给出来,而实际生产中用的框架不同,其代码并不具有适应性.(通常类似其它项目仅仅是给出数据交互的规范.格式,后端实现就可以自由定制) ...

  10. SpringBoot第二十五篇:SpringBoot与AOP

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   作者在实际 ...