Flask框架：运用SocketIO实现WebSSH

article/2025/10/2 17:38:01

Flask 框架中如果想要实现WebSocket功能有许多种方式，运用SocketIO库来实现无疑是最简单的一种方式，Flask中封装了一个flask_socketio库该库可以直接通过pip仓库安装，如下内容将重点简述SocketIO库在Flask框架中是如何被应用的，最终实现WebSSH命令行终端功能，其可用于在Web浏览器内实现SSH命令行执行。

首先我们先来看一下SocketIO库是如何进行通信的，对于前端部分需要引入socket.io这个框架，然后就是利用该框架内提供的各类函数实现创建WS通道，如下代码：

代码中通过调用io.connect来连接后端，socket.emit则是用于向后端推送一条消息，而socket.on则是一个回调函数，一旦有数据被传出则第一时间执行回调函数内的代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.lyshark.com/javascript/socket.io/socket.io.min.js"></script>
</head>
<body>
<script type="text/javascript" charset="UTF-8">$(document).ready(function() {namespace = '/Socket';var socket = io.connect("http://" + document.domain + ":" + location.port + namespace);// 初始化完成后,发送一条消息socket.emit("message",{"data":"hello lyshark"});// 收到数据后,执行输出socket.on('response', function(recv) {console.log('hello lyshark ' + recv.Data)});});
</script>
</body>
</html>

接着就是后端，后端部分代码如下所示，代码中app.config['SECRET_KEY']是配置一个安全密钥这里可以随意填写，通过socketio = SocketIO(app)初始化一个SOCKET对象，当有消息出现时SocketIO会自动执行相应的处理函数，常见的处理方法也就如下这三种。

  • message 出现消息后,率先执行此处
  • connect 当websocket连接成功时,自动触发connect默认方法
  • disconnect 当websocket连接失败时,自动触发disconnect默认方法
from flask import Flask,render_template,request
from flask_socketio import SocketIOasync_mode = Noneapp = Flask(import_name=__name__,static_url_path='/python',   # 配置静态文件的访问url前缀static_folder='static',      # 配置静态文件的文件夹template_folder='templates') # 配置模板文件的文件夹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['data'])for i in range(1,100):socketio.sleep(1)socketio.emit("response",           # 绑定通信{"Data":i},           # 返回socket数据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,host="0.0.0.0")

如上就是前后端所有的代码，当我们运行Flask后端时，打开前端页面并查看控制台，可以看到效果，后台会每隔一段时间自动向前端推送一个消息此时这个通道也算是建立成功了。

原理明白了以后，再去实现一个WebSSH终端就会变得很容易，WebSSH终端我们需要xterm这个前端库来实现，其原理就是当后台有数据输出或前台有输入时第一时间传递给SSH模块执行然后返回结果，我们先来看前端部分是如何实现这段功能的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.lyshark.com/javascript/socket.io/socket.io.min.js"></script><link rel="stylesheet" href="https://cdn.lyshark.com/javascript/bootstrap/3.3.7/css/bootstrap.min.css" /><link rel="stylesheet" href="https://cdn.lyshark.com/javascript/xterm/xterm.css" /><script type="text/javascript" src="https://cdn.lyshark.com/javascript/xterm/xterm.js"></script>
</head>
<body><div id="terminal"></div><script>var window_width = $(window).width();var window_height = $(window).height();var term = new Terminal({cols: Math.floor(window_width/9),rows: Math.floor(window_height/20),useStyle:false,convertEol: true,cursorBlink:true,cursorStyle:null,});console.log("高度" + window_height + "宽度" + window_width);$(document).ready(function() {namespace = '/Socket';var socket = io.connect("http://" + document.domain + ":" + location.port + namespace);socket.on("connect",function(){term.open(document.getElementById('terminal'));});// 接受后端数据,并写到控制台socket.on("response",function(recv){term.write(recv.Data);});// 发送消息到对端term.on("data",function(data){socket.send(data);//socket.emit("message",{"data":data});});});
</script>
</body>
</html>

上方代码中当链接SOCKET成功后，则socket.on("response",function(recv)用于接收后台的输出，一旦后台有输出数据则直接调用term.write(recv.Data);将该数据写出到控制台，而term.on则是xterm中提供的接收方法，其作用是接收用户的输入并将该输入传递给后台来处理。

那后台是如何处理的呢，其实后端只是使用paramiko模块建立一个SSH隧道，并在message函数内处理发送接收数据。

from flask import Flask,render_template,request
from flask_socketio import SocketIO
import paramikoasync_mode = None
app = Flask(import_name=__name__,static_url_path='/python',   # 配置静态文件的访问url前缀static_folder='static',      # 配置静态文件的文件夹template_folder='templates') # 配置模板文件的文件夹app.config['SECRET_KEY'] = "lyshark"
socketio = SocketIO(app)def ssh_cmd():tran = paramiko.Transport(('192.168.150.129', 22,))tran.start_client()tran.auth_password('root', '1233')chan = tran.open_session()chan.get_pty(height=492,width=1312)chan.invoke_shell()return chansessions = ssh_cmd()@app.route("/")
def index():return render_template("index.html")# 出现消息后,率先执行此处
@socketio.on("message",namespace="/Socket")
def socket(message):print("接收到消息:",message)sessions.send(message)ret = sessions.recv(4096)socketio.emit("response", {"Data": ret.decode("utf-8")}, namespace="/Socket")print(message)# 当websocket连接成功时,自动触发connect默认方法
@socketio.on("connect",namespace="/Socket")
def connect():ret = sessions.recv(4096)socketio.emit("response", {"Data": ret.decode("utf-8")}, namespace="/Socket")print("链接建立成功..")# 当websocket连接失败时,自动触发disconnect默认方法
@socketio.on("disconnect",namespace="/Socket")
def disconnect():print("链接建立失败..")if __name__ == '__main__':socketio.run(app,debug=True,host="0.0.0.0")

代码运行后我们访问Web页面，即可成功登录到Linux主机，并执行任意命令。

当执行输出目录时也是带有颜色的，颜色的上色部分是xterm中自带的并不需要自己去配置。


http://chatgpt.dhexx.cn/article/bfR2fRec.shtml

相关文章

网页终端直接操作linux系统【webssh】

网页终端直接操作linux系统【webssh】

1、安装pip linux系统默认都安装了python&#xff0c;但不一定安装了pip&#xff0c;所以先安装pip 我的系统中默认安装的是python2.7版本 curl https://bootstrap.pypa.io/pip/2.7/get-pip.py -o get-pip.py python get-pip.py 安装成功如图 2、安装webssh pip install w…
阅读更多...
离线 安装webssh

离线 安装webssh

1 安装包 和 webssh 代码准备 1 cmake 安装 安装参考文档: 文档地址 下载地址 $ tar xvfz cmake-3.24.2-linux-x86_64.tar.gz 配置环境全局变量 $ vim /etc/profile ​ # 添加 export PATH/root/webterminal/cmake-3.18.0-Linux-x86_64/bin:$PATH ​ $ source /etc/profil…
阅读更多...
webshell是什么？

webshell是什么？

webshell是什么&#xff1f; 百度百科的定义&#xff1a;webshell就是以asp、php、jsp或者cgi等网页文件形式存在的一种代码执行环境&#xff0c;也可以将其称做为一种网页后门。黑客在入侵了一个网站后&#xff0c;通常会将asp或php后门文件与网站服务器WEB目录下正常的网页文…
阅读更多...
Docker 容器内体验 WebSSH

Docker 容器内体验 WebSSH

Docker容器内体验 WebSSH 项目地址: https://pypi.org/project/webssh/ 容器创建 docker run -tid --name centos -p 8888:8888 -p 122:22 centos:7 /bin/bash # 启动容器写个比较呆的shell脚本&#xff0c;方便安装 cat <<EOF > wssh.sh yum -y install epel-re…
阅读更多...
golang实现WebSSH的功能

golang实现WebSSH的功能

在最近一次需求里&#xff0c;需要实现一个webSSH的功能&#xff0c;就是把terminal搬到web中来。要实现这个功能&#xff0c;可以采用websocketssh来说实现 1.第一步实现websocket websocket主要是ws或wss协议&#xff0c;其原理就是http协议升级成ws协议&#xff0c;即ws是…
阅读更多...
纯Java实现一个网页版的Xshell

纯Java实现一个网页版的Xshell

前言 最近由于项目需求&#xff0c;项目中需要实现一个WebSSH连接终端的功能&#xff0c;由于自己第一次做这类型功能&#xff0c;所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用&#xff0c;当时看到了很多这方面的项目&#xff0c;例如&#xff1a;GateOne、webss…
阅读更多...
webssh

webssh

vue djangolinux实现webssh 技术栈 xterm.js&#xff1a;做到vue的表现型 websocket&#xff1a; 做vue和django之间的通信 paramiko&#xff1a; 建立SSH连接通道 ssh&#xff1a; 与linux进行连接 threading&#xff1a;多条数据返回前端&#xff0c;io密集型&#xff0c;用…
阅读更多...
webSSH如何安装？如何使用？解决Web端远程连接终端~~运维篇

webSSH如何安装？如何使用？解决Web端远程连接终端~~运维篇

Hi~由于博主公司业务有相当多的Linux终端设备&#xff0c;每次连上设备需要使用到外部工具&#xff0c;如&#xff1a;Xshell&#xff0c;每次都得去输入IP&#xff0c;端口&#xff0c;账号&#xff0c;密码相当的繁琐&#xff1b;偶尔看到阿里云远程连接终端功能挺有意思的&a…
阅读更多...
超强功能WebSSH安装，解决Web远程SSH终端

超强功能WebSSH安装，解决Web远程SSH终端

项目地址&#xff1a;https://github.com/huashengdun/webssh 一个简单的 Web 应用程序&#xff0c;用作 ssh 客户端以连接到您的 ssh 服务器。它是用 Python 编写的&#xff0c;基于 tornado、paramiko 和 xterm.js。 特征&#xff1a; 支持SSH密码认证&#xff0c;包括空密…
阅读更多...
webssh —— 浏览器上的终端

webssh —— 浏览器上的终端

需求 近期接到一个需求&#xff0c;实现一个运行在浏览器上的终端&#xff0c;用于快速连接到公司设备。 Tip&#xff1a;只求实现的可直接跳到 「最终方案」 处 。 需求有以下几点 1、设备都不在公网状态下 2、webshell 需要免密登陆 3、动态连接的端口、账号、密码 4、可显…
阅读更多...
webssh的安装与使用

webssh的安装与使用

最近研究了一下在web端实现一个远程连接终端操作的类似网页版xshell的实现。在网上搜索了一下发现已经有类似的操作在这里主要介绍以下两种。 https://github.com/huashengdun/websshhttps://github.com/billchurch/WebSSH2 我用的是虚拟机centos7系统&#xff0c;别的linux系…
阅读更多...
简单分析实现运维利器---webssh终端

简单分析实现运维利器---webssh终端

背景 现在几乎所有东西都向往着自动化，在运维界更是如此，运维人员都向往自动化代替人工操作、解决人工操作大量重复性工作的问题、故障主动恢复：及时发现；流程；解决。运维规范化：角色定义和责任划分、流程化等。但这些种种的目的，都离不开非常细小的技术支持，下面我们…
阅读更多...
WebsocketWebSSH

WebsocketWebSSH

什么是WebSSH? webssh 泛指一种技术可以在网页上实现一个 SSH 终端ssh终端&#xff1a;用来通过ssh协议&#xff0c;连接服务器进行管理运维开发方向&#xff1a;堡垒机登录、线上机器管理&#xff08;因为运维人员不可能24小时携带电脑&#xff09;在线编程&#xff1a;提供…
阅读更多...
WebSSH神器sshwifty的安装与使用

WebSSH神器sshwifty的安装与使用

本文章最初发表在XJHui’s Blog&#xff0c;未经允许&#xff0c;任何人禁止转载&#xff01; 为使您获得最好的阅读体验&#xff0c;强烈建议您点击 这里 前往 XJHui’s Blog 查看&#xff01; WebSSH工具 初衷 9.9买的一年服务器&#xff0c;不用实属可惜由于是计算机专业…
阅读更多...
Sql Server查看表结构

Sql Server查看表结构

1、表结构 2、通过 t abc 查询出的表结构 3、存储过程 t CREATE proc t TableName nvarchar(200) as SELECT (select top 1 isnull(value,) from sys.extended_properties ex_p where…
阅读更多...
sql 查看表结构改动的记录

sql 查看表结构改动的记录

系统更新迭代比较大的情况&#xff0c;可能改动了比较多的数据库&#xff0c;留个笔记。。 select * from sys.objects order by modify_date desc 这句是查看数据库表的改动&#xff0c;希望对自己有帮助 -20180613
阅读更多...
Access、SQLServer以及SQLite如何查询数据表结构

Access、SQLServer以及SQLite如何查询数据表结构

日期&#xff1a;2021年11月05日 作者&#xff1a;Commas 注释&#xff1a;整理了一下不同数据库如何获取数据表结构&#xff0c;比较有意思的玩法就是将不同数据库进行相互转换&#xff0c;由于篇幅问题&#xff0c;暂且仅讨论"数据表结构"的获取…… 目录 文章目录…
阅读更多...
sqlServer 查看表结构（字段类型） （更新中）

sqlServer 查看表结构（字段类型） （更新中）

对MySQL和Oracle熟悉的朋友知道用desc就可以查询一张表的结构&#xff0c;但是在SQL Server里执行desc命令会报错。 现提供两条命令查询表结构&#xff1a; 1.sp_help table_name; 2.sp_columns table_name; sp_help 直通车报表上周宝贝$; sp_columns 直通车报表…
阅读更多...
用SQL语句查看Oracle数据表的结构信息

用SQL语句查看Oracle数据表的结构信息

文章目录 获取所有表的列表查看表结构查看某表的注释查看某表的字段注释 获取所有表的列表 相知道相应用户下有哪些表&#xff0c;可以通过以下 SQL 语句进行查询 select table_name from user_tables; //当前用户的表 select table_name from all_tables; //所有用户…
阅读更多...
使用SQL语句修改表结构（SQL Server）

使用SQL语句修改表结构（SQL Server）

使用SQL语句修改表结构&#xff08;SQL Server&#xff09; 文章目录 使用SQL语句修改表结构&#xff08;SQL Server&#xff09;ALTER TABLE的语法格式如下&#xff1a;添加列删除列修改表的列数据类型和名称 ALTER TABLE的语法格式如下&#xff1a; 上述格式主要参数说明如下…
阅读更多...
推荐文章

Copyright @ 2022~2023