Flask 运用Xterm实现交互终端

Xterm是一个基于X Window System的终端仿真器（Terminal Emulator）。Xterm最初由MIT开发，它允许用户在X Window环境下运行文本终端程序。Xterm提供了一个图形界面终端，使用户能够在图形桌面环境中运行命令行程序。而xterm.js是一个用于在浏览器中实现终端仿真的JavaScript库。它允许在Web页面中创建交互式的终端界面，用户可以在浏览器中运行命令行程序，执行命令，并与终端进行交互。

主要特点和功能包括：

  1. 终端仿真： xterm.js通过JavaScript模拟了一个终端环境，支持常见的终端功能，包括光标移动、颜色控制、滚动等。
  2. 多平台支持： 由于是基于JavaScript实现，xterm.js可以在各种现代浏览器上运行，无论是在桌面还是移动设备上。
  3. 自定义外观： xterm.js提供了丰富的配置选项，用户可以定制终端的外观和行为，包括颜色、字体、光标样式等。
  4. 剪贴板支持： 支持从终端复制文本到剪贴板，并从剪贴板粘贴文本到终端。
  5. WebSockets和其他集成： 可以与WebSockets等通信协议集成，以便在浏览器中实现实时的终端交互。
  6. 支持Unicode和UTF-8： 能够正确显示和处理Unicode字符，支持UTF-8编码。

xterm.js通常被用于Web应用程序中，尤其是在需要提供命令行界面的场景下，如在线终端、远程服务器管理等。这使得开发者能够在浏览器中实现类似于本地终端的交互体验，而无需使用本地终端模拟器。

AJAX 实现Web交互

AJAX（Asynchronous JavaScript and XML）是一种用于在Web应用程序中实现异步数据交换的技术。它允许在不重新加载整个页面的情况下，通过在后台与服务器进行小规模的数据交换，实现动态更新网页内容的目的。AJAX广泛用于创建交互性强、用户体验良好的Web应用程序，例如在加载新数据、进行表单验证、实现自动完成搜索等方面。

如下前端部分，通过使用ajax向后端提交数据，当success:function接收到数据后直接将数据动态回写到Xterm终端上，代码如下所示；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.lyshark.com/javascript/xterm/xterm.css" />
    <script type="text/javascript" src="https://www.lyshark.com/javascript/xterm/xterm.js"></script>
    <script type="text/javascript" src="https://www.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
      var window_width = $(window).width()-200;
      var window_height = $(window).height()-300;
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:false,
                cursorStyle:null,
                rendererType: "canvas",
            }
    );
    term.open(document.getElementById('terminal'));
      function show(){
          var address = $("#address").val();
          var command = $("#command").val();
          console.log(command);
          $.ajax({
              url:"/",
              type:"POST",
              contentType:"application/json;",
              data: JSON.stringify({"address":address,"command":command}),
              success:function (res)
              {
                  // term.clear();
                  term.writeln( "\x1B[1;3;33m IP地址: \x1B[0m" + res.address );
                  term.writeln( "\x1B[1;3;34m 命令: \x1B[0m" + res.command );
              }
          });
      }
    </script>

    <!--提交数据-->
    <div id="terminal"></div>
        <input type="text" id="address" placeholder="主机地址"/>
        <input type="text" id="command" placeholder="执行命令"/>
        <input type="button" value="执行命令" onclick="show()">
    </div>
</body>
</html>

后端部分的实现很简单，首先封装一个ssh_shell用于执行命令，用户传入数据后，直接执行并将返回结果放入到ref内即可。

from flask import Flask,render_template,request
from flask import jsonify
import paramiko

app = Flask(__name__)

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

def ssh_shell(address,username,password,port,command):
    ssh.connect(address,port=port,username=username,password=password)
    stdin, stdout, stderr = ssh.exec_command(command)
    result = stdout.read()
    if not result:
        result=stderr.read()
    ssh.close()
    return result.decode()

@app.route('/', methods=[ 'GET', 'POST'])
def index():
    if request.method == "POST":
        # 接收数据
        json_value = request.get_json()
        ref = ssh_shell("192.168.150.128","root","123123","22",json_value["command"])

        # 发送数据
        info = dict()
        info["address"] = json_value["address"]
        info["command"] = ref
        return jsonify(info)
    else:
        return render_template("index.html")

if __name__ == '__main__':
    app.run()

AJAX实现Web终端

继续扩展将编辑框去掉，用户输入数据后直接传入到Xterm内，Xterm里卖弄判断如果出现了回车，则像后端发送ajax数据，否则继续侦听并记下输入数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.lyshark.com/javascript/xterm/xterm.css" />
    <script type="text/javascript" src="https://www.lyshark.com/javascript/xterm/xterm.js"></script>
    <script type="text/javascript" src="https://www.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="terminal"></div>

    <script type="text/javascript">
        var window_width = $(window).width()-500;
        var window_height = $(window).height()-300;
        var term = new Terminal
        (
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink: true,        //光标闪烁
                cursorStyle: "underline", //光标样式
                rendererType: "canvas",
            }
        );
        term.open(document.getElementById('terminal'));
        term.writeln("welcome to lyshark web terminal!");
        term.write("[shell] # ");

        let input = '';
        term.on('key', (key, ev) => {
          let code = key.charCodeAt(0);
          console.log(code);

          // 如果按下回车,则发送命令,并等待输出结果
          if(code == 13)
          {
              term.write("\r\n");
              $.ajax({
                  url:"/",
                  type:"POST",
                  contentType:"application/json;",
                  data: JSON.stringify({"command": input}),
                  success:function (res)
                  {
                      term.write(res.value);
                  }
              });
              input ='';
          }
          // 如果是退格,则清除
          else if(code == 127)
          {
              term.write("\b");
          }
          else
          {
              input += key
              term.write(key);
          }
        });
    </script>
</body>
</html>

后端收到数据后解析命令，比对命令是否存在，根据不同的命令执行不同的分支。

from flask import Flask,render_template,request
from flask import jsonify

app = Flask(__name__)

@app.route('/', methods=[ 'GET', 'POST'])
def index():
    if request.method == "POST":
        # 接收数据
        json_value = request.get_json()["command"]
        if len(json_value) != 0:

            # 判断使用哪一个分支
            splite_value = json_value.split(" ")
            info = dict()

            if splite_value[0] == "help":
                info["value"] = "version 1.0"
                info["value"] = info["value"] + "\n[shell] # "
                return jsonify(info)

            elif splite_value[0] == "GetCPU":
                address = splite_value[1]
                info["value"] = "192.168.1 CPU 10%"
                info["value"] = info["value"] + "\n[shell] # "
                return jsonify(info)
            else:
                info["value"] = "命令不存在"
                info["value"] = info["value"] + "\n[shell] # "
                return jsonify(info)
        else:
            info = dict()
            info["value"] = "[shell] # "
            return jsonify(info)
    else:
        return render_template("index.html")

if __name__ == '__main__':
    app.run()

运行后可输出一个交互式WebShell环境，如下图所示；

WebSocket 实现终端

虽然WebSSH可以方便管理主机，但如果需要批量运维则需要开发一个可以多条消息共同推送的命令行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.lyshark.com/javascript/xterm/xterm.css" />
    <script type="text/javascript" src="https://www.lyshark.com/javascript/xterm/xterm.js"></script>
    <script type="text/javascript" src="https://www.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.lyshark.com/javascript/socket.io/socket.io.min.js"></script>
</head>

<body>
    <div id="terminal"></div>

    <script type="text/javascript" charset="UTF-8">
        $(document).ready(function()
        {
            namespace = '/Socket';
            var socket = io.connect("http://" + document.domain + ":" + location.port + namespace);

            var window_width = $(window).width()-500;
            var window_height = $(window).height()-300;
            var term = new Terminal
            (
                {
                    cols: Math.floor(window_width/9),
                    rows: Math.floor(window_height/20),
                    useStyle:false,
                    convertEol: true,
                    cursorBlink: true,
                    rendererType: "canvas",
                }
            );

            // 打开Web终端
            term.open(document.getElementById('terminal'));
            term.write("[shell] # ");

            let input_command = '';

            term.on('key', (key, ev) => {
              let code = key.charCodeAt(0);
              console.log(code);

              // 如果按下回车,则发送命令,并等待输出结果
              if(code == 13)
              {
                  // 发送数据到后端
                  term.write("\r\n");
                  socket.emit("message",{"command": input_command});
                  input_command ='';
              }
              // 如果是退格,则清除
              else if(code == 127)
              {
                  term.write("\b");
              }
              else
              {
                  input_command += key
                  term.write(key);
              }
            });

            // 接受后台返回并输出
            socket.on('response', function(recv)
            {
                console.log(recv.value);
                term.write(recv.value);
            });
        });
    </script>
</body>
</html>

后台接收参数，并更具不同的参数执行不同的运维函数，此处只做演示，具体功能需要自行编写。

from flask import Flask,render_template,request
from flask_socketio import SocketIO

async_mode = None
app = Flask(__name__)
app.config['SECRET_KEY'] = "lyshark"
socketio = SocketIO(app)

@app.route("/")
def index():
    return render_template("index.html")

# 出现消息后,率先执行此处
@socketio.on("message",namespace="/Socket")
def socket(message):
    print("接收到消息:",message['command'])

    command = message['command']

    if len(command) != 0:
        splite_command = command.split(" ")

        if splite_command[0] == "help":
            socketio.emit("response", {"value": "version 1.0 \n"}, namespace="/Socket")

        elif splite_command[0] == "Ping":
            if len(splite_command) == 2:
                index = splite_command[1]
                for each in range(int(index)):
                    socketio.sleep(0.1)
                    socketio.emit("response",{"value": str(each) + "\n"}, namespace="/Socket")
                socketio.emit("response", {"value": "\n[shell] # "}, namespace="/Socket")
        else:
            socketio.emit("response", {"value": "lyShell: command not found \n"}, namespace="/Socket")
    else:
        socketio.emit("response", {"value": "[shell] # "}, namespace="/Socket")

# 当websocket连接成功时,自动触发connect默认方法
@socketio.on("connect",namespace="/Socket")
def connect():
    print("链接建立成功..")

# 当websocket连接失败时,自动触发disconnect默认方法
@socketio.on("disconnect",namespace="/Socket")
def disconnect():
    print("链接建立失败..")

if __name__ == '__main__':
    socketio.run(app,debug=True)

Socket版本的将会更流畅，如下图所示；

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/194035.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用STM32和蓝牙模块进行无线数据传输的实践

使用STM32和蓝牙模块进行无线数据传输的实践

无线数据传输在现代通信领域中具有重要的地位&#xff0c;而蓝牙技术是一种常用的无线数据传输技术。本文介绍了如何使用STM32微控制器和蓝牙模块实现无线数据传输的方案&#xff0c;包括硬件设计、蓝牙模块配置、数据发送和接收等步骤&#xff0c;并给出相应的代码示例。 一、…
阅读更多...
学习知识回顾随笔

学习知识回顾随笔

文章目录 如何远程连接MySQL数据库1.创建用户来运行&#xff0c;此用户从任何主机连接到mysql数据库2.使用IP地址来访问MySQL数据库 如何远程访问Django项目Web应用什么是Web应用应用程序的两种模式Web应用程序的优缺点 HTTP协议&#xff08;超文本传输协议&#xff09;简介HTT…
阅读更多...
使用C#和HtmlAgilityPack打造强大的Snapchat视频爬虫

使用C#和HtmlAgilityPack打造强大的Snapchat视频爬虫

概述 Snapchat作为一款备受欢迎的社交媒体应用&#xff0c;允许用户分享照片和视频。然而&#xff0c;由于其特有的内容自动消失特性&#xff0c;爬虫开发面临一些挑战。本文将详细介绍如何巧妙运用C#和HtmlAgilityPack库&#xff0c;构建一个高效的Snapchat视频爬虫。该爬虫能…
阅读更多...
Nginx Openresty通过Lua+Redis 实现动态封禁IP

Nginx Openresty通过Lua+Redis 实现动态封禁IP

需求 为了封禁某些爬虫或者恶意用户对服务器的请求&#xff0c;我们需要建立一个动态的 IP 黑名单。对于黑名单中的 IP &#xff0c;我们将拒绝提供服务。并且可以设置封禁失效时间 环境准备 linux version: centos7 / ubuntu 等 redis version: 5.0.5 nginx version: nginx…
阅读更多...
高端影像仪：打破微小产品测量局限

高端影像仪：打破微小产品测量局限

在现代工业生产中&#xff0c;影像仪以CCD数位影像为基石&#xff0c;将计算机屏幕测量技术与空间几何运算的能力融为一体&#xff0c;可以用于测量微小产品的各种尺寸和形状&#xff0c;为生产过程中的质量控制提供重要的参考依据。 影像仪产品内置高精度光学电动双倍镜头&am…
阅读更多...
竞赛选题 题目：基于大数据的用户画像分析系统 数据分析 开题

竞赛选题 题目：基于大数据的用户画像分析系统 数据分析 开题

文章目录 1 前言2 用户画像分析概述2.1 用户画像构建的相关技术2.2 标签体系2.3 标签优先级 3 实站 - 百货商场用户画像描述与价值分析3.1 数据格式3.2 数据预处理3.3 会员年龄构成3.4 订单占比 消费画像3.5 季度偏好画像3.6 会员用户画像与特征3.6.1 构建会员用户业务特征标签…
阅读更多...
百度人工智能培训第一天笔记

百度人工智能培训第一天笔记

参加了百度人工智能初步培训&#xff0c;主要是了解一下现在人工智能的基本情况&#xff0c;以便后续看可以参与一些啥&#xff1f; 下面就有关培训做一些记录&#xff0c;以便后续可以继续学习。 一、理论基础部分 二、实际操作部分 主要学习的百度人工智能平台如下&#xf…
阅读更多...
Go——三、运算符以及流程控制

Go——三、运算符以及流程控制

Go 一、Go语言运算符1、算数运算符2、关系运算符3、逻辑运算符4、位运算符5、赋值运算符6、其他运算符7、运算符优先级 二、Go的流程控制1、if else2、for 循环结构3、for range&#xff08;键值循环&#xff09;4、switch case5、break&#xff1a;跳出循环6、go&#xff1a;跳…
阅读更多...
IDEA编译器技巧-提示词忽略大小写

IDEA编译器技巧-提示词忽略大小写

IDEA编译器技巧-提示词忽略大小写 写代码时,每次创建对象都要按住 Shift 字母 做大写开头, 废手, 下面通过编译器配置解放Shift 键 setting -> Editor -> General -> Code Completion -> Match case 把这个√去掉, 创建对象就不需要再按住 Shift 键 示例: 1.…
阅读更多...
Android Termux SFTP如何实现远程文件传输

Android Termux SFTP如何实现远程文件传输

文章目录 1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 SFTP&#xff08;SSH File Transfer Protocol&#xff09;是一种基于SSH&#xff08;Secure Shell&#xff09;安全协议的文件传输协议。与FTP协议相比&#xff0c;SFTP使用了…
阅读更多...
Linux静态库,共享库,计算机基础知识

Linux静态库,共享库,计算机基础知识

1.库文件: 1).库文件库是一组预先编译好的方法的集合;Linux系统存储库的位置一般在/lib 和 /usr/lib (64位系统/usr/lib64)库的头文件放在/usr/include 2).库的分类 静态库:libxxx.a(命名规则) 共享库:libxxx.so(命名规则) 3).准备文件: //add.c int add(int x,int y) { retu…
阅读更多...
设计模式—迪米特原则（LOD）

设计模式—迪米特原则（LOD）

1.背景 1987年秋天由美国Northeastern University的Ian Holland提出&#xff0c;被UML的创始者之一Booch等普及。后来&#xff0c;因为在经典著作《 The Pragmatic Programmer》而广为人知。 2.概念 迪米特法则&#xff08;Law of Demeter&#xff09;又叫作最少知识原则&…
阅读更多...
免费部署开源大模型

免费部署开源大模型

参考&#xff1a;【大模型-第一篇】在阿里云上部署ChatGLM3-CSDN博客 ChatGLM 是一个开源的、支持中英双语的对话语言模型&#xff0c;由智谱 AI 和清华大学 KEG 实验室联合发布&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。ChatGLM3-6B 更…
阅读更多...
Fluent热辐射壁面设置

Fluent热辐射壁面设置

对于固体壁面&#xff0c;可分为&#xff1a; 内部面外部面 外部面&#xff0c;若需要考虑外部热辐射的影响&#xff0c;需要将类型改为“mixed”或者“radiation”类型&#xff0c;并设置外部的发射率。 内部面通常为“wall”和“wall-shadow”的配对形式。 对于两侧均是透明…
阅读更多...
了解FastSam：一个通用分割模型（草记）

了解FastSam：一个通用分割模型（草记）

想尝试这个FastSam的部署&#xff0c;但至今还没跑通&#xff0c;一个问题能带出一片问题&#xff0c;感觉挺心情挺郁闷的。后来和学长交流的时候&#xff0c;说那就是学少了&#xff0c;没必要急着将跑通它作为目的。也很有道理&#xff0c;这个任务还不太适合我当前的水平&am…
阅读更多...
vscode Markdown 预览样式美化多方案推荐

vscode Markdown 预览样式美化多方案推荐

优雅的使用 vscode写 Markdown&#xff0c;预览样式美化 1 介绍 我已经习惯使用 vscode 写 markdown。不是很喜欢他的 markdown 样式&#xff0c;尤其是代码块高亮的样式。当然用 vscode 大家基本上都会选择安装一个Markdown-preview-enhanced的插件&#xff0c;这个插件的确…
阅读更多...
java分布式锁分布式锁

java分布式锁分布式锁

java分布式&锁&分布式锁 锁 锁的作用&#xff1a;有限资源的情况下&#xff0c;控制同一时间段&#xff0c;只有某些线程&#xff08;用户/服务器&#xff09;能访问到资源。 锁在java中的实现&#xff1a; synchronized关键字并发包的类 缺点&#xff1a;只对单个的…
阅读更多...
HCIA-H12-811题目解析（2）

HCIA-H12-811题目解析（2）

1、【单选题】 在以太网这种多点访问网络上PPPOE服务器可以通过一个以太网端口与很多PPPOE客户端建立起PPP连接&#xff0c;因此服务器必须为每个PPP会话建立唯一的会话标识符以区分不同的连接PPPOE会使用什么参数建立会话标识符? 2、【单选题】PPP协议定义的是OSI参考模型中…
阅读更多...
Chem. Eng. J | 掌控基于ESIPT的AIE效应设计具有单组分白光发射的光学材料

Chem. Eng. J | 掌控基于ESIPT的AIE效应设计具有单组分白光发射的光学材料

今天为大家介绍一篇近期发表在Chemical Engineering Journal上的论文&#xff1a;Controlling ESIPT-based AIE effects for designing optical materials with single-component white-light emission。论文通讯作者为中南大学董界副教授和曾文彬教授&#xff0c;论文第一作者…
阅读更多...
【Leetcode】907. 子数组的最小值之和

【Leetcode】907. 子数组的最小值之和

给定一个整数数组 arr&#xff0c;找到 min(b) 的总和&#xff0c;其中 b 的范围为 arr 的每个&#xff08;连续&#xff09;子数组。 由于答案可能很大&#xff0c;因此 返回答案模 10^9 7 。 示例 1&#xff1a; 输入&#xff1a;arr [3,1,2,4] 输出&#xff1a;17 解释&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站