WebSocket实现web 终端

最新推荐文章于 2024-08-10 07:41:40 发布

明哲慕鸿

最新推荐文章于 2024-08-10 07:41:40 发布

阅读量3.3k

点赞数 2

分类专栏： Django python 文章标签： websocket python

本文链接：https://blog.csdn.net/qq_41100991/article/details/108252213

版权

本文介绍了如何使用WebSocket和Python的Django框架实现web终端，通过xterm.js模拟shell终端，实现实时的前后端交互。前端利用xterm.js监听用户输入并通过WebSocket发送到Django；后端使用paramiko建立SSH通道，将用户命令发送到远程服务器，并接收执行结果，再通过WebSocket回传给前端展示。

摘要由CSDN通过智能技术生成

前言

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

前端

前端一般选择用xterm.js包，大致页面如下
在这里插入图片描述
终端页面代码如下

<!DOCTYPE html>
<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}`