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的更多相关文章

  1. Flask 框架入门

    Flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . 安装 Flask 依赖两个外部库, We ...

  2. Flask框架获取用户IP地址的方法

    本文实例讲述了python使用Flask框架获取用户IP地址的方法.分享给大家供大家参考.具体如下: 下面的代码包含了html页面和python代码,非常详细,如果你正使用Flask,也可以学习一下最 ...

  3. Python自动化运维之30、Flask框架

    Flask 官网:http://flask.pocoo.org/ flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是 ...

  4. flask框架+pygal+sqlit3搭建图形化业务数据分析平台

    一. 前言 先说下主要的框架和主要的图形库的特点:(个人见解) Django:python开发的一个重量级的web框架,集成了MVC和ORM等技术,设计之初是为了使开发复杂的.数据库驱动的网站变得简单 ...

  5. 2nd_SE-结对编程1-基于flask框架的四则运算生成器

    0x00 Coding https://coding.net/u/nikochan/p/2nd_SE/git 0x01 写在前面 因为在上一个作业中,是基于python完成的Command程序.那么再 ...

  6. Flask框架

    FLask框架的简单介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请 ...

  7. Python基于Flask框架配置依赖包信息的项目迁移部署小技巧

    一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...

  8. Flask框架(1)--基础

    Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...

  9. Flask框架搭建一个日程表

    目录 前言 项目介绍 技术栈 Flask Web开发流程 一.搭建环境 1.1: 创建虚拟环境 1.2: 安装依赖包 1.3: 创建依赖包列表文件 1.4: 测试hello word 二.应用程序开发 ...

  10. Flask框架搭建REST-API服务

    一.目的 为了能够将测试工具部署成RESTful-API服务,这样就能通过接口的方式提供统一测试工具服务,使用人员就不用构建application而产生的各种环境问题.使用问题. 适合人群:Pytho ...

随机推荐

  1. Educational Codeforces Round 92 (Rated for Div. 2) A~C

    原作者为 RioTian@cnblogs, 本作品采用 CC 4.0 BY 进行许可,转载请注明出处. 最近写学习了一下网络爬虫,但昨天晚上的CF让人感觉实力明显退步,又滚回来刷题了QAQ... 比赛 ...

  2. spring中这些编程技巧,真的让我爱不释手

    前言 最近越来越多的读者认可我的文章,还是挺让人高兴的.有些读者希望我多分享spring方面的知识点,能够在实际工作中派的上用场.我对spring的源码有过一定的研究,结合我这几年实际的工作经验,把s ...

  3. 【体验有奖】玩转 AIGC,函数计算 x 通义千问预体验,一键部署AI应用赢Airpods

    玩转 AIGC,基于函数计算 FC 部署通义千问预体验 从文字生成到图片生成,AIGC 的创造力让人惊叹,更多的人开始探索如何使用 AI 提高生产效率,激发更多创作潜能,然而在实际应用中,AI 技术的 ...

  4. 如何使用阿里云 CDN 对部署在函数计算上的静态网站进行缓存

    前言 为了进一步提升网站的访问速度,我们会使用 CDN 对网站进行加速,但是最近在调试阿里云的函数计算和 CDN 的配合使用时发现了一个需要额外注意的地方,下面带大家一起看一下. 如何使用 CDN 对 ...

  5. SpringBoot发布https服务

    一.生成SSL证书 1.进入本地jdk的路径 cd D:\Program\jdk1.8.0_77\jre\lib\security cmd窗口生成证书HSoftTiger.keystore到D盘 ke ...

  6. Xmanager连接linux服务器的桌面

    在办公室使用xshell通过22端口访问linux服务器大家都很熟悉,但有的时候在办公室要远程linux服务器上的桌面应用,该如何实现. 环境准备 客户端:win10 服务器:centos7.9 一. ...

  7. shell脚本(16)-awk命令

    文档目录 一.awk介绍 二.awk基本用法 1.awk对字段(列)的提取: 2.awk对记录(行)的提取: 3.awk对字符串提取: 4.awk程序的优先级: 三.awk高级用法 1.awk定义数组 ...

  8. Go socket 编程源码解析(上)

    0. socket 介绍 Liunx 中一切皆文件.通过文件描述符和系统调用号可以实现对任何设备的访问.同样的,socket 也是一种文件描述符.通过 socket 可以建立网络传输.对于 TCP 和 ...

  9. SQL—排序专用窗口函数

    下面介绍三种用于进行排序的专用窗口函数: 1.RANK()     在计算排序时,若存在相同位次,会跳过之后的位次.     例如,有3条排在第1位时,排序为:1,1,1,4······ 2.DENS ...

  10. python3查看文件是否存在,以及读、写与执行的属性

    技术背景 在使用python对系统文件进行操作的项目中,经常需要用到对本地文件的存在和读写进行判断的操作.最常用的比如os.exists函数,可以很方便的判断给定的文件名是否存在于系统中.但是这里我们 ...