Python Flask框架开发之运用SocketIO实现WebSSH方法详解

2024-07-28 23:44:30

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 SocketIO
async_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)
@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" rel="external nofollow"  />
    <link rel="stylesheet" href="https://cdn.lyshark.com/javascript/xterm/xterm.css" rel="external nofollow"  />
    <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 paramiko
async_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 chan
sessions = 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中自带的并不需要自己去配置。

到此这篇关于Python Flask框架开发之运用SocketIO实现WebSSH方法详解的文章就介绍到这了,更多相关Python SocketIO实现WebSSH内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

python flask sqlalchemy连接数据库流程介绍

1.安装flask_sqlalchemy和pymysql包 pip install flask-sqlalchemy pip install pymysql 2.进行配置使用Flask-SQLAlchemy扩展操作数据库,首先需要通过URL建立数据库连接,必须保存到Flask配置对象的SQLALCHEMY_DATABASE_URI中. HOSTNAME = '127.0.0.1'PORT = '3306'DATABASE = 'flask_test'USERNAME = 'root'P
python Flask框架之HTTP请求详解

我们的浏览器访问网站时,默认为发送了一个HTTP的GET请求. 在浏览网站时,会经常填写表单,比如填写用户名密码.点击登录后,会跳转到我们的主页. 接下来,我们实现这个案例. 首先我们先写一个登录页面 <!doctype html> <html lang="en"> <head> <title>Hello from Flask</title> </head> <body> <form action
Python+ Flask实现Mock Server详情

目录一.Mock介绍 1.什么是Mock 2.Mock的三种典型应用场景 3.Mock的作用 4.Mock实现的3种方式二.环境搭建三.Mock的案例一.Mock介绍 1.什么是Mock 模拟接口接口Mock测试:在接口测试中,对于某些不容易构造或者不容易获取的接口,可以用一个模拟接口来代替 2.Mock的三种典型应用场景依赖的接口未实现依赖的接口响应速度慢针对接口模拟各种异常 3.Mock的作用可以用来解除测试对象对外部服务的依赖,使得测试用例可以独立运行模拟异常逻辑,异常
Python Flask框架使用介绍

目录 1. 数据库连接池 2. wtfroms 3. 信号 3.1 内置信号 3.2 使用信号 3.3 自定义信号 4. 多app应用 5. flask-script 5.1 快速使用 5.2 自定制命令 1. 数据库连接池使用 pymsql 链接数据库导入:pip3 install dbutils pool.py 创建数据库连接池 from dbutils.pooled_db import PooledDB import pymysql POOL = PooledDB( creator=p
Python Flask中Cookie和Session区别详解

目录前言安装创建虚拟环境进入虚拟环境安装 flask Cookie的使用 Session的使用前言本篇文章,阐述一下Flask中Cookie和Session 为什么要说Cookie和Session呢? 答:因为http请求是无状态的,怎么理解呢?当你访问B站时,如果你没有Cookie或者Session,B站就认为你是一个没有登录的用户.如果你有Cookie或Session,那么B站就知道你登录了,并且知道你是谁.所以可以把跟你相关的资料返回给你两者的区别: 答:Cookie是明文
Python+Flask实现自定义分页的示例代码

目录前言后端后端思路后端代码前端前端思路前端代码前言分页操作在web开发中几乎是必不可少的,而我们的flask不像django自带封装好的分页操作,要分页则需要依赖flask-sqlalchemy中的分页查询,但是分页这么重要且简单的操作,自己实现必须要会这个思维,我也在网上看了一些,但大体上不合我意,因此这篇我带大家手写一个分页操作! 后端后端思路写这个分页操作前我们首先要思考我们需要什么?我们需要将我们需要的东西封装到一个字典里,然后传给前端!那么这里我先说分页算法,很
Python的flask常用函数route()

目录一.route()路由概述二.静态路由和动态路径方式1:静态路由方式2:动态路由三.route()其它参数 1.methods=[‘GET’,‘POST’] 一.route()路由概述功能:将URL绑定到函数路由函数route()的调用有两种方式:静态路由和动态路由二.静态路由和动态路径方式1:静态路由 @app.route(“/xxx”) xxx为静态路径如::/index / /base等,可以返回一个值.字符串.页面等 from flask import Flask
Python使用Flask Migrate模块迁移数据库

目录前言安装初始化项目结构三大命令前言本篇文章,阐述一下Flask中数据库的迁移为什么要说数据库迁移呢? 比如我们以前有一个数据库,里面的信息有 id, name现在我想再加一个gender属性,应该怎么办呢?不可能直接把数据库删除掉吧.然后重新创建一个,因此本文介绍一种,通过数据库迁移的方法,可以保留原始的数据,并完成添加新的一列的方法. 安装直接使用pip install flask-migrate即可初始化项目结构 # exts.py from flask_sqlal
Python Flask框架开发之运用SocketIO实现WebSSH方法详解

Flask 框架中如果想要实现WebSocket功能有许多种方式,运用SocketIO库来实现无疑是最简单的一种方式,Flask中封装了一个flask_socketio库该库可以直接通过pip仓库安装,如下内容将重点简述SocketIO库在Flask框架中是如何被应用的,最终实现WebSSH命令行终端功能,其可用于在Web浏览器内实现SSH命令行执行. 首先我们先来看一下SocketIO库是如何进行通信的,对于前端部分需要引入socket.io这个框架,然后就是利用该框架内提供的各类函数实现创建
使用python flask框架开发图片上传接口的案例详解

python版本:3.6+ 需要模块:flask,pillow 需求:开发一个支持多格式图片上传的接口,并且将图片压缩,支持在线预览图片. 目录结构: app.py编辑内容: from flask import Flask, request, Response, render_template from werkzeug.utils import secure_filename import os import uuid from PIL import Image, ExifTags app =
Spring框架开发IOC两种创建工厂方法详解

1.IOC有两种创建工厂的方法 IoC 通过工厂模式创建 bean 的方式有两种: 静态工厂方法实例工厂方法 2.两种方法的不同 2.1静态方法创建就是直接可以通过静态方法来实例化一个对象,采用类名.方法名的方式创建 public class HelloFactory { public static HelloWorld getInstance(){ return new Hello(); } } HelloWorldFactory.getInstance(); 2.2实例方法创建采用ne
python flask框架实现传数据到js的方法分析

本文实例讲述了python flask框架实现传数据到js的方法.分享给大家供大家参考,具体如下: 首先要清楚后台和前端交互所采用的数据格式. 一般选JSON,因为和js完美贴合. 后台返回的数据进行序列化在/homepageRecommend 路由的 view方法中返回序列化数据 dict = {"a":1, "b":2}<br data-filtered="filtered"> import json json.dumps(di
Python Flask实现图片上传与下载的示例详解

目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html 介绍 5.1 upload Jinja 模板介绍 5.2 upload css 介绍(虚线框) 5.3 upload js 介绍(拖拽) 1.效果预览我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下: 2.新增逻辑概览我们在官方指导工程上进行增加代码,改动如下: 由于 fl
Flask框架debug与配置项的开启与设置详解

目录开启debug模式配置项设置开启debug模式在app.run()中传递参数,使用debug = True开启: app.run(debug=True) 设置配置项,以配置参数的形式开启: app = Flask(__name__) app.config['DEBUG'] = True pycharm中设置Edit Configurations中开启: 注意:这里只有新建的是Flask 项目才行,才能看到FLASK_DEBUG,如果是新建的python项目是没有这个选项的. 这里有几
对Python 多线程统计所有csv文件的行数方法详解

如下所示: #统计某文件夹下的所有csv文件的行数(多线程) import threading import csv import os class MyThreadLine(threading.Thread): #用于统计csv文件的行数的线程类 def __init__(self,path): threading.Thread.__init__(self) #父类初始化 self.path=path #路径 self.line=-1 #统计行数 def run(self): reader =
对python中xlsx,csv以及json文件的相互转化方法详解

最近需要各种转格式,这里对相关代码作一个记录,方便日后查询. xlsx文件转csv文件 import xlrd import csv def xlsx_to_csv(): workbook = xlrd.open_workbook('1.xlsx') table = workbook.sheet_by_index(0) with codecs.open('1.csv', 'w', encoding='utf-8') as f: write = csv.writer(f) for row_num
对Python中一维向量和一维向量转置相乘的方法详解

在Python中有时会碰到需要一个一维列向量(n*1)与另一个一维列向量(n*1)的转置(1*n)相乘,得到一个n*n的矩阵的情况.但是在python中, 我们发现,无论是".T"还是"np.transpose"都无法实现一维向量的转置,相比之下,Matlab一句" a' "就能实现了. 那怎么实现呢?我找了个方法.请看: 即,我们把向量reshape一下,如此便实现了一维向量与一维向量转置相乘为矩阵的目的. 若大家有其他方法望告知. 以上这篇对
对python numpy.array插入一行或一列的方法详解

如下所示: import numpy as np a = np.array([[1,2,3],[4,5,6],[7,8,9]]) b = np.array([[0,0,0]]) c = np.insert(a, 0, values=b, axis=0) d = np.insert(a, 0, values=b, axis=1) print(c) print(d) >>c [[0 0 0] [1 2 3] [4 5 6] [7 8 9]] >>d [[0 1 2 3] [0 4 5

Python Flask框架开发之运用SocketIO实现WebSSH方法详解

相关推荐

随机推荐