WebSocket实现web 终端

前言

在做自动化运维时,不可避免的要用到web终端,而web终端主要体现在前后端的实时性的交互,那么websocket是一个很好的选择
其结构如下
WebSocket实现web 终端_第1张图片
流程为:
1、xterm.js 在浏览器端模拟 shell 终端, 监听用户输入通过 websocket 将用户输入的内容上传到 django
2、django 接受到用户上传的内容, 将用户在前端页面输入的内容通过 paramiko 建立的 ssh 通道上传到远程服务器执行
3、paramiko 将远程服务器的处理结果返回给 django
4、django 将 paramiko 返回的结果通过 websocket 返回给用户
5、xterm.js 接收 django 返回的数据并将其写入前端页面

前端

前端一般选择用xterm.js包,大致页面如下
WebSocket实现web 终端_第2张图片
终端页面代码如下


<html lang="en">
<head>
    <title>远程终端title>
    <link href="/static/my_assets/css/xterm.css" rel="stylesheet">
head>
<body>
<div>
    <p style="position:absolute; padding: 0; right:0; margin-right:19px; text-align: center; z-index: 999">
        <button class="btn btn-danger " id="id-close-conn">
            <span class="ti-power-off">span>
        button>
    p>
    <div id="terminal">div>
div>
<script src="/static/assets/js/lib/jquery.min.js">script>
<script src="/static/my_assets/js/xterm.js">script>
<script>
    //获取window的长宽
    function get_box_size() {
    
        let init_width = 9;
        let init_height = 17;

        let windows_width = $(window).width();
        let windows_height = $(window).height();
        return {
    
            cols: Math.floor(windows_width / init_width),
            rows: Math.floor(windows_height / init_height),
        }
    }

    //连接后端websocket
    function connect_ssh() {
    
        let cols = get_box_size().cols;
        let rows = get_box_size().rows;

        //根据div的大小初始化终端,待WebSocket连接上后,显示终端
        let term = new Terminal(
            {
    
                cols: cols,
                rows: rows,
                useStyle: true,
                cursorBlink: true,
                cursorStyle: 'underline',
                convertEol: true,
            }
        );

        let pwd = window.btoa("{
    { ssh_info.password }}");

        //建立WebSocket连接
        let ssh_args = `user={
     { ssh_info.user_name }}&host={
     { ssh_info.ip }}&port={
     { ssh_info.port }}&pwd=` + pwd;
        let ws_scheme = window.location.protocol === "https:" ? "wss" : "ws"; //获取协议
        let ws = new WebSocket(ws_scheme + '://' + window.location.host + '/ws/webssh/?' + ssh_args + `&width=${
      cols}&height=${
      rows}`

你可能感兴趣的:(Django,python,websocket,python)