经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » Python3 » 查看文章
Flask 运用Xterm实现交互终端
来源：cnblogs　　作者：微软技术分享　　时间：2023/11/29 16:18:13　　对本文有异议

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终端上，代码如下所示；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="https://www.lyshark.com/javascript/xterm/xterm.css" />
  7.     <script type="text/javascript" src="https://www.lyshark.com/javascript/xterm/xterm.js"></script>
  8.     <script type="text/javascript" src="https://www.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
  9. </head>
  10. <body>
  11.     <script type="text/javascript">
  12.       var window_width = $(window).width()-200;
  13.       var window_height = $(window).height()-300;
  14.       var term = new Terminal(
  15.             {
  16.                 cols: Math.floor(window_width/9),
  17.                 rows: Math.floor(window_height/20),
  18.                 useStyle:false,
  19.                 convertEol: true,
  20.                 cursorBlink:false,
  21.                 cursorStyle:null,
  22.                 rendererType: "canvas",
  23.             }
  24.     );
  25.     term.open(document.getElementById('terminal'));
  26.       function show(){
  27.           var address = $("#address").val();
  28.           var command = $("#command").val();
  29.           console.log(command);
  30.           $.ajax({
  31.               url:"/",
  32.               type:"POST",
  33.               contentType:"application/json;",
  34.               data: JSON.stringify({"address":address,"command":command}),
  35.               success:function (res)
  36.               {
  37.                   // term.clear();
  38.                   term.writeln( "\x1B[1;3;33m IP地址: \x1B[0m" + res.address );
  39.                   term.writeln( "\x1B[1;3;34m 命令: \x1B[0m" + res.command );
  40.               }
  41.           });
  42.       }
  43.     </script>
  45.     <!--提交数据-->
  46.     <div id="terminal"></div>
  47.         <input type="text" id="address" placeholder="主机地址"/>
  48.         <input type="text" id="command" placeholder="执行命令"/>
  49.         <input type="button" value="执行命令" onclick="show()">
  50.     </div>
  51. </body>
  52. </html>

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

  1. from flask import Flask,render_template,request
  2. from flask import jsonify
  3. import paramiko
  5. app = Flask(__name__)
  7. ssh = paramiko.SSHClient()
  8. ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
  10. def ssh_shell(address,username,password,port,command):
  11.     ssh.connect(address,port=port,username=username,password=password)
  12.     stdin, stdout, stderr = ssh.exec_command(command)
  13.     result = stdout.read()
  14.     if not result:
  15.         result=stderr.read()
  16.     ssh.close()
  17.     return result.decode()
  19. @app.route('/', methods=[ 'GET', 'POST'])
  20. def index():
  21.     if request.method == "POST":
  22.         # 接收数据
  23.         json_value = request.get_json()
  24.         ref = ssh_shell("192.168.150.128","root","123123","22",json_value["command"])
  26.         # 发送数据
  27.         info = dict()
  28.         info["address"] = json_value["address"]
  29.         info["command"] = ref
  30.         return jsonify(info)
  31.     else:
  32.         return render_template("index.html")
  34. if __name__ == '__main__':
  35.     app.run()

AJAX实现Web终端

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="https://www.lyshark.com/javascript/xterm/xterm.css" />
  7.     <script type="text/javascript" src="https://www.lyshark.com/javascript/xterm/xterm.js"></script>
  8.     <script type="text/javascript" src="https://www.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
  9. </head>
  10. <body>
  11.     <div id="terminal"></div>
  13.     <script type="text/javascript">
  14.         var window_width = $(window).width()-500;
  15.         var window_height = $(window).height()-300;
  16.         var term = new Terminal
  17.         (
  18.             {
  19.                 cols: Math.floor(window_width/9),
  20.                 rows: Math.floor(window_height/20),
  21.                 useStyle:false,
  22.                 convertEol: true,
  23.                 cursorBlink: true,        //光标闪烁
  24.                 cursorStyle: "underline", //光标样式
  25.                 rendererType: "canvas",
  26.             }
  27.         );
  28.         term.open(document.getElementById('terminal'));
  29.         term.writeln("welcome to lyshark web terminal!");
  30.         term.write("[shell] # ");
  32.         let input = '';
  33.         term.on('key', (key, ev) => {
  34.           let code = key.charCodeAt(0);
  35.           console.log(code);
  37.           // 如果按下回车,则发送命令,并等待输出结果
  38.           if(code == 13)
  39.           {
  40.               term.write("\r\n");
  41.               $.ajax({
  42.                   url:"/",
  43.                   type:"POST",
  44.                   contentType:"application/json;",
  45.                   data: JSON.stringify({"command": input}),
  46.                   success:function (res)
  47.                   {
  48.                       term.write(res.value);
  49.                   }
  50.               });
  51.               input ='';
  52.           }
  53.           // 如果是退格,则清除
  54.           else if(code == 127)
  55.           {
  56.               term.write("\b");
  57.           }
  58.           else
  59.           {
  60.               input += key
  61.               term.write(key);
  62.           }
  63.         });
  64.     </script>
  65. </body>
  66. </html>

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

  1. from flask import Flask,render_template,request
  2. from flask import jsonify
  4. app = Flask(__name__)
  6. @app.route('/', methods=[ 'GET', 'POST'])
  7. def index():
  8.     if request.method == "POST":
  9.         # 接收数据
  10.         json_value = request.get_json()["command"]
  11.         if len(json_value) != 0:
  13.             # 判断使用哪一个分支
  14.             splite_value = json_value.split(" ")
  15.             info = dict()
  17.             if splite_value[0] == "help":
  18.                 info["value"] = "version 1.0"
  19.                 info["value"] = info["value"] + "\n[shell] # "
  20.                 return jsonify(info)
  22.             elif splite_value[0] == "GetCPU":
  23.                 address = splite_value[1]
  24.                 info["value"] = "192.168.1 CPU 10%"
  25.                 info["value"] = info["value"] + "\n[shell] # "
  26.                 return jsonify(info)
  27.             else:
  28.                 info["value"] = "命令不存在"
  29.                 info["value"] = info["value"] + "\n[shell] # "
  30.                 return jsonify(info)
  31.         else:
  32.             info = dict()
  33.             info["value"] = "[shell] # "
  34.             return jsonify(info)
  35.     else:
  36.         return render_template("index.html")
  38. if __name__ == '__main__':
  39.     app.run()

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

WebSocket 实现终端

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="https://www.lyshark.com/javascript/xterm/xterm.css" />
  7.     <script type="text/javascript" src="https://www.lyshark.com/javascript/xterm/xterm.js"></script>
  8.     <script type="text/javascript" src="https://www.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
  9.     <script type="text/javascript" src="https://www.lyshark.com/javascript/socket.io/socket.io.min.js"></script>
  10. </head>
  12. <body>
  13.     <div id="terminal"></div>
  15.     <script type="text/javascript" charset="UTF-8">
  16.         $(document).ready(function()
  17.         {
  18.             namespace = '/Socket';
  19.             var socket = io.connect("http://" + document.domain + ":" + location.port + namespace);
  21.             var window_width = $(window).width()-500;
  22.             var window_height = $(window).height()-300;
  23.             var term = new Terminal
  24.             (
  25.                 {
  26.                     cols: Math.floor(window_width/9),
  27.                     rows: Math.floor(window_height/20),
  28.                     useStyle:false,
  29.                     convertEol: true,
  30.                     cursorBlink: true,
  31.                     rendererType: "canvas",
  32.                 }
  33.             );
  35.             // 打开Web终端
  36.             term.open(document.getElementById('terminal'));
  37.             term.write("[shell] # ");
  39.             let input_command = '';
  41.             term.on('key', (key, ev) => {
  42.               let code = key.charCodeAt(0);
  43.               console.log(code);
  45.               // 如果按下回车,则发送命令,并等待输出结果
  46.               if(code == 13)
  47.               {
  48.                   // 发送数据到后端
  49.                   term.write("\r\n");
  50.                   socket.emit("message",{"command": input_command});
  51.                   input_command ='';
  52.               }
  53.               // 如果是退格,则清除
  54.               else if(code == 127)
  55.               {
  56.                   term.write("\b");
  57.               }
  58.               else
  59.               {
  60.                   input_command += key
  61.                   term.write(key);
  62.               }
  63.             });
  65.             // 接受后台返回并输出
  66.             socket.on('response', function(recv)
  67.             {
  68.                 console.log(recv.value);
  69.                 term.write(recv.value);
  70.             });
  71.         });
  72.     </script>
  73. </body>
  74. </html>

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

  1. from flask import Flask,render_template,request
  2. from flask_socketio import SocketIO
  4. async_mode = None
  5. app = Flask(__name__)
  6. app.config['SECRET_KEY'] = "lyshark"
  7. socketio = SocketIO(app)
  9. @app.route("/")
  10. def index():
  11.     return render_template("index.html")
  13. # 出现消息后,率先执行此处
  14. @socketio.on("message",namespace="/Socket")
  15. def socket(message):
  16.     print("接收到消息:",message['command'])
  18.     command = message['command']
  20.     if len(command) != 0:
  21.         splite_command = command.split(" ")
  23.         if splite_command[0] == "help":
  24.             socketio.emit("response", {"value": "version 1.0 \n"}, namespace="/Socket")
  26.         elif splite_command[0] == "Ping":
  27.             if len(splite_command) == 2:
  28.                 index = splite_command[1]
  29.                 for each in range(int(index)):
  30.                     socketio.sleep(0.1)
  31.                     socketio.emit("response",{"value": str(each) + "\n"}, namespace="/Socket")
  32.                 socketio.emit("response", {"value": "\n[shell] # "}, namespace="/Socket")
  33.         else:
  34.             socketio.emit("response", {"value": "lyShell: command not found \n"}, namespace="/Socket")
  35.     else:
  36.         socketio.emit("response", {"value": "[shell] # "}, namespace="/Socket")
  38. # 当websocket连接成功时,自动触发connect默认方法
  39. @socketio.on("connect",namespace="/Socket")
  40. def connect():
  41.     print("链接建立成功..")
  43. # 当websocket连接失败时,自动触发disconnect默认方法
  44. @socketio.on("disconnect",namespace="/Socket")
  45. def disconnect():
  46.     print("链接建立失败..")
  48. if __name__ == '__main__':
  49.     socketio.run(app,debug=True)

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

原文链接：https://www.cnblogs.com/LyShark/p/17860490.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Python3热门文章

  • PyQt-Fluent-Widgets：一个 Fluent Design 风格的组件库
  • Python3读取文件的操作详解
  • 口播神器,基于Edge,微软TTS(text-to-speech)文字转语音免费开源库edge-tts实践(Python3.10)
  • 向量数据库Chroma极简教程
  • 笔精墨妙,妙手丹青,微软开源可视化版本的ChatGPT:Visual ChatGPT,人工智能AI聊天发图片,Python3.10实现
  • win10+vs2019 编译webrtc m108
  • 闻其声而知雅意,基于Pytorch(mps/cpu/cuda)的人工智能AI本地语音识别库Whisper(Python3.10)
  • 靶机练习: Vikings
  • Python3 实现将bytes图片转jpg格式
  • MacBook m1芯片采用miniforge安装python3.9的方法示例

    • Python3推荐文章

  • 分页查询及其拓展应用案例
  • adorner 使用示例
  • 使用pyqt5制作简单计分桌面应用
  • cuda性能优化-2.访存优化
  • 通过钩子函数+Traceid实现Flask链路追踪
  • RCTF 2024 WEB wp
  • 【昇腾开发全流程】AscendCL开发板模型推理
  • PVT：特征金字塔在Vision Transormer的首次应用，又快又好 | ICCV 2021
  • 「网络流浅谈」最小割的模型 - E-Syrus
  • 比Selenium更优秀的playwright介绍与未来展望

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号