Flask 框架：运用SocketIO实现WebSSH

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" />

    <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 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中自带的并不需要自己去配置。

Flask 框架：运用SocketIO实现WebSSH的更多相关文章

Flask 框架入门
Flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . 安装 Flask 依赖两个外部库, We ...
Flask框架获取用户IP地址的方法
本文实例讲述了python使用Flask框架获取用户IP地址的方法.分享给大家供大家参考.具体如下: 下面的代码包含了html页面和python代码,非常详细,如果你正使用Flask,也可以学习一下最 ...
Python自动化运维之30、Flask框架
Flask 官网:http://flask.pocoo.org/ flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是 ...
flask框架+pygal+sqlit3搭建图形化业务数据分析平台
一. 前言先说下主要的框架和主要的图形库的特点:(个人见解) Django:python开发的一个重量级的web框架,集成了MVC和ORM等技术,设计之初是为了使开发复杂的.数据库驱动的网站变得简单 ...
2nd_SE-结对编程1-基于flask框架的四则运算生成器
0x00 Coding https://coding.net/u/nikochan/p/2nd_SE/git 0x01 写在前面因为在上一个作业中,是基于python完成的Command程序.那么再 ...
Flask框架
FLask框架的简单介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请 ...
Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
Flask框架（1）--基础
Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...
Flask框架搭建一个日程表
目录前言项目介绍技术栈 Flask Web开发流程一.搭建环境 1.1: 创建虚拟环境 1.2: 安装依赖包 1.3: 创建依赖包列表文件 1.4: 测试hello word 二.应用程序开发 ...
Flask框架搭建REST-API服务
一.目的为了能够将测试工具部署成RESTful-API服务,这样就能通过接口的方式提供统一测试工具服务,使用人员就不用构建application而产生的各种环境问题.使用问题. 适合人群:Pytho ...

随机推荐

自媒体时代的贤内助——AI 视频云
视频,通常是一段由活动画面组成的传递信息的内容.在如今这个信息爆炸的时代,我们每天都要在浩瀚的内容海洋中寻找需求的信息.一个视频是否吸引人内容固然是最重要的,但是播放是否流畅,画质是否清晰的影响力也不 ...
VA41 销售合同创建BAPI
一.事务代码VA41 合同创建的过程和销售订单几乎一致二.调用BAPI 调用BAPI为BAPI_CONTRACT_CREATEFROMDATA 传参和销售订单BAPI:BAPI_SALESORDER ...
VS2019 快速实现 C# 连接 MySQL 数据库并实现基本操作代码
一.工具: Visual Studio 2019 MySQL 数据库二.添加动态链接: Visual Studio 中选择项目-> 管理NuGet程序包(N) -> 然后在浏览里面搜索 ...
modint 板子
自动对 int 取模 // modint template<int MOD> struct Fp { ll val; constexpr Fp(ll v = 0) noexcept : v ...
AISing Programming Contest 2021（AtCoder Beginner Contest 202）简单题解记录
补题链接:Here A - Three Dice 水题,问给定三次摇色子的正面,请问3次结果以后相对面的点数和 cout << (21 - a - b - c) << &quo ...
L2-010. 排座位（种类并查集）
布置宴席最微妙的事情,就是给前来参宴的各位宾客安排座位.无论如何,总不能把两个死对头排到同一张宴会桌旁!这个艰巨任务现在就交给你,对任何一对客人,请编写程序告诉主人他们是否能被安排同席. 输入格式: ...
C++函数：std::tie 详解
在补CF周赛时发现dalao用了一个 tie函数和tuple类型,表示没怎么接触,现在稍微学习记录一下. tuple 即元组,可以理解为pair的扩展,可以用来将不同类型的元素存放在一起,常用于函数的 ...
vue学习笔记十四、页面跳转
系列导航 vue学习笔记一.环境搭建 vue学习笔记二.环境搭建+项目创建 vue学习笔记三.文件和目录结构 vue学习笔记四.定义组件(组件基本结构) vue学习笔记五.创建子组件实例 v ...
shell脚本(7)-shell运算
文档目录: 一.算数运算符二.关系运算符三.布尔运算符四.逻辑运算符五.字符串运算符六.文件测试运算符算术运算符下表列出了常用的算术运算符,假定变量 a 为 10,变量 b 为 20: ...
基于html+javascript开发的base64解码工具
base64在线解码工具可以帮助你将Base64编码的字符串解码为原始的文本或数据. 预览入口以下是一个简单的base64在线解码工具的示例: html <!DOCTYPE html> ...

Flask 框架：运用SocketIO实现WebSSH

Flask 框架：运用SocketIO实现WebSSH的更多相关文章

随机推荐

热门专题