Python Flask框架開發(fā)之運用SocketIO實現(xiàn)WebSSH方法詳解

更新時間：2022年10月08日 16:27:35 作者：LyShark 孤風洗劍

Socket.IO本是一個面向實時web應用的JavaScript庫，現(xiàn)在已成為擁有眾多語言支持的Web即時通訊應用的框架。這篇文章主要介紹了Python 運用SocketIO實現(xiàn)WebSSH方法

Flask 框架中如果想要實現(xiàn)WebSocket功能有許多種方式，運用SocketIO庫來實現(xiàn)無疑是最簡單的一種方式，F(xiàn)lask中封裝了一個flask_socketio庫該庫可以直接通過pip倉庫安裝，如下內容將重點簡述SocketIO庫在Flask框架中是如何被應用的，最終實現(xiàn)WebSSH命令行終端功能，其可用于在Web瀏覽器內實現(xiàn)SSH命令行執(zhí)行。

首先我們先來看一下SocketIO庫是如何進行通信的，對于前端部分需要引入socket.io這個框架，然后就是利用該框架內提供的各類函數實現(xiàn)創(chuàng)建WS通道，如下代碼：

代碼中通過調用io.connect來連接后端，socket.emit則是用于向后端推送一條消息，而socket.on則是一個回調函數，一旦有數據被傳出則第一時間執(zhí)行回調函數內的代碼。

<!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);
        // 初始化完成后,發(fā)送一條消息
        socket.emit("message",{"data":"hello lyshark"});
        // 收到數據后,執(zhí)行輸出
        socket.on('response', function(recv) {
            console.log('hello lyshark ' + recv.Data)
        });
    });
</script>
</body>
</html>

接著就是后端，后端部分代碼如下所示，代碼中app.config['SECRET_KEY']是配置一個安全密鑰這里可以隨意填寫，通過socketio = SocketIO(app)初始化一個SOCKET對象，當有消息出現(xiàn)時SocketIO會自動執(zhí)行相應的處理函數，常見的處理方法也就如下這三種。

message 出現(xiàn)消息后,率先執(zhí)行此處
connect 當websocket連接成功時,自動觸發(fā)connect默認方法
disconnect 當websocket連接失敗時,自動觸發(fā)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',   # 配置靜態(tài)文件的訪問url前綴
            static_folder='static',      # 配置靜態(tài)文件的文件夾
            template_folder='templates') # 配置模板文件的文件夾
app.config['SECRET_KEY'] = "lyshark"
socketio = SocketIO(app)
@app.route("/")
def index():
    return render_template("index.html")
# 出現(xiàn)消息后,率先執(zhí)行此處
@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連接成功時,自動觸發(fā)connect默認方法
@socketio.on("connect",namespace="/Socket")
def connect():
    print("鏈接建立成功..")
# 當websocket連接失敗時,自動觸發(fā)disconnect默認方法
@socketio.on("disconnect",namespace="/Socket")
def disconnect():
    print("鏈接建立失敗..")
if __name__ == '__main__':
    socketio.run(app,debug=True,host="0.0.0.0")

如上就是前后端所有的代碼，當我們運行Flask后端時，打開前端頁面并查看控制臺，可以看到效果，后臺會每隔一段時間自動向前端推送一個消息此時這個通道也算是建立成功了。

原理明白了以后，再去實現(xiàn)一個WebSSH終端就會變得很容易，WebSSH終端我們需要xterm這個前端庫來實現(xiàn)，其原理就是當后臺有數據輸出或前臺有輸入時第一時間傳遞給SSH模塊執(zhí)行然后返回結果，我們先來看前端部分是如何實現(xiàn)這段功能的。

<!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"  rel="external nofollow"  />
    <link rel="stylesheet"  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);
            });
            // 發(fā)送消息到對端
            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函數內處理發(fā)送接收數據。

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',   # 配置靜態(tài)文件的訪問url前綴
            static_folder='static',      # 配置靜態(tài)文件的文件夾
            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")
# 出現(xiàn)消息后,率先執(zhí)行此處
@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連接成功時,自動觸發(fā)connect默認方法
@socketio.on("connect",namespace="/Socket")
def connect():
    ret = sessions.recv(4096)
    socketio.emit("response", {"Data": ret.decode("utf-8")}, namespace="/Socket")
    print("鏈接建立成功..")
# 當websocket連接失敗時,自動觸發(fā)disconnect默認方法
@socketio.on("disconnect",namespace="/Socket")
def disconnect():
    print("鏈接建立失敗..")
if __name__ == '__main__':
    socketio.run(app,debug=True,host="0.0.0.0")

代碼運行后我們訪問Web頁面，即可成功登錄到Linux主機，并執(zhí)行任意命令。

當執(zhí)行輸出目錄時也是帶有顏色的，顏色的上色部分是xterm中自帶的并不需要自己去配置。

到此這篇關于Python Flask框架開發(fā)之運用SocketIO實現(xiàn)WebSSH方法詳解的文章就介紹到這了,更多相關Python SocketIO實現(xiàn)WebSSH內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

理解python多線程（python多線程簡明教程）
這篇文章主要介紹了理解python多線程,一個快速理解python多線程的簡明教程,需要的朋友可以參考下
2014-06-06
Python函數裝飾器常見使用方法實例詳解
這篇文章主要介紹了Python函數裝飾器常見使用方法,結合實例形式分析了Python函數裝飾器的概念、原理、用法及相關操作注意事項,需要的朋友可以參考下
2019-03-03
python flask web服務實現(xiàn)更換默認端口和IP的方法
今天小編就為大家分享一篇python flask web服務實現(xiàn)更換默認端口和IP的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-07-07
Python字典 dict幾種遍歷方式
這篇文章主要給大家分享的是Python字典 dict幾種遍歷方式，文章主要介紹使用 for key in dict遍歷字典、使用for key in dict.keys () 遍歷字典的鍵等內容,需要的朋友可以參考一下，希望對你有所幫助
2021-11-11
Spy++的使用方法及下載教程
這篇文章主要介紹了Spy++的使用方法及下載教程,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-01-01
Python爬蟲之Selenium鼠標事件的實現(xiàn)
這篇文章主要介紹了Python爬蟲之Selenium鼠標事件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
python基于Node2Vec實現(xiàn)節(jié)點分類及其可視化示例詳解
這篇文章主要為大家介紹了python基于Node2Vec實現(xiàn)節(jié)點分類及其可視化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
python的函數和方法(中)
這篇文章主要為大家詳細介紹了python的函數和方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
python中用ctypes模擬點擊的實例講解
在本篇文章里小編給各位整理了一篇關于python中用ctypes模擬點擊的實例講解內容，需要的朋友可以參考學習下。
2020-11-11
python之no module named xxxx以及虛擬環(huán)境配置過程
在Python開發(fā)過程中,經常會遇到環(huán)境配置和包管理的問題,主要原因包括未安裝所需包或使用虛擬環(huán)境導致的,通過pip install命令安裝缺失的包是解決問題的一種方式,此外,使用虛擬環(huán)境,例如PyCharm支持的Virtualenv,可以為每個項目創(chuàng)建獨立的運行環(huán)境
2024-10-10