Flask 学习100-Flask-SocketIO 结合 xterm.js 实现网页版Xshell

最新推荐文章于 2024-08-23 20:21:58 发布
最新推荐文章于 2024-08-23 20:21:58 发布
阅读量380 收藏
点赞数
分类专栏： flask 文章标签： flask 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27371025/article/details/136198557
版权
本文介绍了如何结合 Flask-SocketIO 和 xterm.js 在浏览器中实现一个类似Xshell的网页版终端应用。通过前端与后端的交互，利用socket连接及事件监听，实现了命令行输入和响应。同时提到了前端监听terminal数据的更新以及Flask后端如何处理这些数据，完成了一个简单的WebSSH终端。
摘要由CSDN通过智能技术生成

前言

xterm.js 是一个使用 TypeScript 编写的前端终端组件，可以直接在浏览器中实现一个命令行终端应用。
可以实现 web-terminal 功能，类似于Xshell 操作服务器。
Flask-SocketIO 快速入门与使用基础参考前面这篇https://www.cnblogs.com/yoyoketang/p/18022139

前后端交互

前端代码
io.connect 连上服务端
socket.emit 给后端发送消息
socket.on(‘response’， ） 监听服务端返回的数据

<!DOCTYPE html>
<html>
<head>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
上海-悠悠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
解决 xterm 中 Python 代码缩进混乱的问题，tmux中用Vim缩进混乱问题
q742971636的博客
06-12 271
在 xterm 中编写 Python 代码时，最好使用适合编写代码的文本编辑器或 IDE，配置好缩进选项，并确保使用一致的缩进风格。这将极大地减少缩进混乱的问题，提高编码效率。
python 实现 web terminal 浏览器直接登录服务器
07-27
浏览器上直接实现ssh功能，连接服务器
python终端输入输出分离_GitHub - pythonohtyp/k8-web-terminal: 一个k8s web终端连接工具，在前后端分离或未分离项目中心中，也可以把此项目无缝集成，开箱即...
weixin_33680141的博客
01-13 288
本项目使用 beego + websocket 进行开发_ __ __ ___ _____/_\ /\ /\ \/ / / _ \\_ \//_\\/ / \ \ / / /_)/ / /\// _ \ \_/ / \/ ___/\/ /_\_/ \_/\___/_/\_\/ \____/???? A k8 web terminal TOOL ????k8 web termi...
WebTerminal功能实现与代码演示（基于Golang和Xterm.js）
Naisu的各种笔记
05-22 5123
WebTerminal是一个比较有意思的功能，让我们可以脱离专门的软件，在浏览器中就可以与Linux设备进行交互。这篇文章将对这个功能做个简单的说明与演示。
实现基于 Python 和 xterm.js 的 Web 交互终端demo
u010674101的专栏
08-02 238
前端 (HTML)：使用 xterm.js 作为前端终端模拟器库。创建了一个 WebSocket 连接到 ws://localhost:8765，这与后端服务器的地址和端口匹配。监听 WebSocket 消息，并将数据写入终端。同时监听用户输入并发送到服务器。后端 (Python)：使用 websockets 库来创建 WebSocket 服务器，监听端口 8765。使用 paramiko 库来创建 SSH 客户端并连接到指定的远程服务器。
flask-3.0.2-py3-none-any.whl
03-07
使用这个Flask的wheel包，开发者可以快速在他们的Python项目中引入Flask，以创建动态网页应用。Flask的核心功能包括： 1. **路由系统**：允许定义URL模式，并将它们映射到处理函数。 2. **模板引擎**：支持Jinja2...
Python库 | Flask-SocketIO-0.4.0.tar.gz
04-08
资源分类：Python库 所属语言：Python 资源全名：Flask-SocketIO-0.4.0.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
Flask-2.2.2-py3-none-any.whl
02-04
该资源为Flask-2.2.2-py3-none-any.whl，欢迎下载使用哦！
PyPI 官网下载 | Flask-SocketIO-0.2.0.tar.gz
01-11
**Flask-SocketIO** 是一个非常重要的 Python 库，它是 Flask 微框架与 Socket.IO 的集成，使得在 Flask 应用中实现实时双向通信变得简单。Socket.IO 是一个跨平台的库，它允许在 Web 应用中实现实时、低延迟的通信...
flask-socketio实现WebSocket的方法
01-01
【flask-socektio】 之前不知道在哪个场合下提到过如何从web后台向前台推送消息。听闻了反向ajax技术这种模式之后，大呼神奇，试了一下之后发现也确实可以用。不过，反向ajax的代价也很明显，只要客户端还和服务端...
【简洁明了】xterm.js+paramiko+websocket实现Web终端，可ssh连接linux bash
RBK的博客
10-29 6130
项目要求，需要在web使用ssh或者控制台，就找有没有好的方法可以实现，找到了xterm.js+paramiko+websocket等实现交互，xtarm.js可以在前端展示一个终端，可以自定义，通过websocket和后端进行通信，后端可以自己写一个脚本程序，配置一个websocket的server端进行通信。 paramiko python执行终端命令 在这里我本来想的是直接在python里调用终端命令执行，但是单独使用的时候可以，集成起来就不好用了，为什么不好用后面说，先说几种常用的终端命令的执行。
万万没想到，用浏览器打开终端竟这么容易实现
程序员成长指北
05-25 110
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群前言你所追求的事物，所做的每一件事情，都有它存在的意义说到用网页打开终端，相信大多数人都使用过，但是应该也没几个人去认真研究过????。自己也是因工作需要，于是对其进行了一番探索。如果你有用过云服务器，肯定对这个就更熟悉了，比如阿里云的Workbench远程连接。它提供给我们的服务便利性、用户体验还...
Django使用Channels实现WebSSH网页终端，实现SSH堡垒机雏形
吾星喵的博客
07-29 3826
更多内容请点击 我的博客 查看，欢迎来访。 本教程基于《Django使用Channels实现WebSocket消息通知功能》 逻辑简述 xterm.js ： 前端模拟 shell 终端的一个库，当用户每输入一个键，就向后端发送该数据 paramiko ： Python 下对 ssh2 封装的一个库，可以使用他来远程连接主机 用户首先通过网页上的WebSocket连接到后端，后端再通过SSH连接到...
xterm.js V4.13.0 学习文档（for vue）
weixin_42136785的博客
09-03 8958
安装Install npminstall--savexterm 使用Using import'xterm/css/xterm.css' import{Terminal}from'xterm' constterm=newTerminal() term.open(document.getElementById('xterm-container')) 配置项Options /** *当canvas渲染器运行过慢时，会回退为DOM渲...
记录一次经历：使用flask_sqlalchemy集成flask造成循环导入问题
2301_76868495的博客
08-21 797
解决flask_sqlalchemy发生死循环的问题
flask_apscheduler实现定时推送飞书消息
最新发布
qq_17328759的博客
08-23 5306
flask_apscheduler 定时推送飞书消息
Using Azure openAI key rotation automation
suiusoar
08-20 980
使用 Azure OpenAI 密钥轮换自动化
如何使用Python Flask构建地震爬虫预测系统？
卫星：biyesheji88的博客
08-20 1228
亲爱的同学们，如果你也对地震预测技术感兴趣，或者正在寻找一个高效的地震爬虫解决方案，那么这个视频绝对不容错过！希望我的讲解能够帮助你更好地理解如何使用Python Flask构建地震爬虫预测系统。如果你有任何疑问或想法，欢迎在评论区留言交流。让我们一起为地震预测技术的发展贡献力量！👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java实战项目Python实战项目微信小程序|安卓实战项目大数据实战项目PHP|C#.NET|Golang实战项目🍅 主页获取源码联系🍅。
使用flask-restful和flask-socketio 写一个前后端分离的聊天程序
05-24
好的，以下是使用 Flask-RESTful 和 Flask-SocketIO 构建前后端分离的聊天程序的示例代码： 后端代码： ```python from flask import Flask, request from flask_restful import Resource, Api from flask_cors import CORS from flask_socketio import SocketIO, send, emit app = Flask(__name__) api = Api(app) CORS(app) socketio = SocketIO(app, cors_allowed_origins='*') class Chat(Resource): def get(self): return {'message': 'Welcome to the chat app!'} def post(self): data = request.get_json() message = data['message'] emit('message', message, broadcast=True) return {'message': message} api.add_resource(Chat, '/chat') if __name__ == '__main__': socketio.run(app, debug=True) ``` 前端代码： ```html <!DOCTYPE html> <html> <head> <title>Chat App</title> </head> <body> <h1>Chat App</h1> <div id="messages"></div> <form> <input id="message" type="text"> <button type="submit" id="send">Send</button> </form> <script src="https://cdn.socket.io/socket.io-3.1.0.min.js"></script> <script> const socket = io('http://localhost:5000'); socket.on('message', function (data) { const messages = document.getElementById('messages'); messages.innerHTML += '<p>' + data + '</p>'; }); const form = document.querySelector('form'); form.addEventListener('submit', function (event) { event.preventDefault(); const input = document.getElementById('message'); const message = input.value; socket.emit('message', message); input.value = ''; }); </script> </body> </html> ``` 在这个示例中，我们创建了一个名为 Chat 的资源，其中 GET 请求将返回欢迎消息，而 POST 请求将广播收到的消息。我们使用 Flask-SocketIO 在后端处理 WebSocket 连接，并使用 emit 函数将消息发送给所有连接的客户端。前端代码使用 Socket.IO 客户端库来建立 WebSocket 连接，并使用 emit 函数将用户输入的消息发送到服务器。收到服务器发送的消息时，前端代码将其显示在页面上。 要运行此示例，请确保已安装 Flask、Flask-RESTful、Flask-Cors 和 Flask-SocketIO，并在终端中运行以下命令： ``` $ export FLASK_APP=app.py $ flask run ``` 然后在浏览器中打开 http://localhost:5000/，即可开始聊天。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值