如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH

這篇文章主要講解了“如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH”吧！

“只有客戶(hù)發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)公司的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線(xiàn)，而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無(wú)止境。

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

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

代碼中通過(guò)調(diào)用io.connect來(lái)連接后端，socket.emit則是用于向后端推送一條消息，而socket.on則是一個(gè)回調(diào)函數(shù)，一旦有數(shù)據(jù)被傳出則第一時(shí)間執(zhí)行回調(diào)函數(shù)內(nèi)的代碼。

<!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"});

        // 收到數(shù)據(jù)后,執(zhí)行輸出
        socket.on('response', function(recv) {
            console.log('hello lyshark ' + recv.Data)
        });
    });
</script>
</body>
</html>

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

message 出現(xiàn)消息后,率先執(zhí)行此處
connect 當(dāng)websocket連接成功時(shí),自動(dòng)觸發(fā)connect默認(rèn)方法
disconnect 當(dāng)websocket連接失敗時(shí),自動(dòng)觸發(fā)disconnect默認(rèn)方法

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)文件的訪(fǎng)問(wèn)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數(shù)據(jù)
                      namespace="/Socket")

# 當(dāng)websocket連接成功時(shí),自動(dòng)觸發(fā)connect默認(rèn)方法
@socketio.on("connect",namespace="/Socket")
def connect():
    print("鏈接建立成功..")

# 當(dāng)websocket連接失敗時(shí),自動(dòng)觸發(fā)disconnect默認(rèn)方法
@socketio.on("disconnect",namespace="/Socket")
def disconnect():
    print("鏈接建立失敗..")

if __name__ == '__main__':
    socketio.run(app,debug=True,host="0.0.0.0")

如上就是前后端所有的代碼，當(dāng)我們運(yùn)行Flask后端時(shí)，打開(kāi)前端頁(yè)面并查看控制臺(tái)，可以看到效果，后臺(tái)會(huì)每隔一段時(shí)間自動(dòng)向前端推送一個(gè)消息此時(shí)這個(gè)通道也算是建立成功了。

如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH

原理明白了以后，再去實(shí)現(xiàn)一個(gè)WebSSH終端就會(huì)變得很容易，WebSSH終端我們需要xterm這個(gè)前端庫(kù)來(lái)實(shí)現(xiàn)，其原理就是當(dāng)后臺(tái)有數(shù)據(jù)輸出或前臺(tái)有輸入時(shí)第一時(shí)間傳遞給SSH模塊執(zhí)行然后返回結(jié)果，我們先來(lái)看前端部分是如何實(shí)現(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" 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'));
            });

            // 接受后端數(shù)據(jù),并寫(xiě)到控制臺(tái)
            socket.on("response",function(recv){
                term.write(recv.Data);
            });

            // 發(fā)送消息到對(duì)端
            term.on("data",function(data){
               socket.send(data);
               //socket.emit("message",{"data":data});
            });
        });
</script>
</body>
</html>

上方代碼中當(dāng)鏈接SOCKET成功后，則socket.on("response",function(recv)用于接收后臺(tái)的輸出，一旦后臺(tái)有輸出數(shù)據(jù)則直接調(diào)用term.write(recv.Data);將該數(shù)據(jù)寫(xiě)出到控制臺(tái)，而term.on則是xterm中提供的接收方法，其作用是接收用戶(hù)的輸入并將該輸入傳遞給后臺(tái)來(lái)處理。

那后臺(tái)是如何處理的呢，其實(shí)后端只是使用paramiko模塊建立一個(gè)SSH隧道，并在message函數(shù)內(nèi)處理發(fā)送接收數(shù)據(jù)。

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)文件的訪(fǎng)問(wèn)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)

# 當(dāng)websocket連接成功時(shí),自動(dòng)觸發(fā)connect默認(rèn)方法
@socketio.on("connect",namespace="/Socket")
def connect():
    ret = sessions.recv(4096)
    socketio.emit("response", {"Data": ret.decode("utf-8")}, namespace="/Socket")
    print("鏈接建立成功..")

# 當(dāng)websocket連接失敗時(shí),自動(dòng)觸發(fā)disconnect默認(rèn)方法
@socketio.on("disconnect",namespace="/Socket")
def disconnect():
    print("鏈接建立失敗..")

if __name__ == '__main__':
    socketio.run(app,debug=True,host="0.0.0.0")

代碼運(yùn)行后我們?cè)L問(wèn)Web頁(yè)面，即可成功登錄到Linux主機(jī)，并執(zhí)行任意命令。

如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH

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

如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH

感謝各位的閱讀，以上就是“如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

名稱(chēng)欄目：如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH
本文網(wǎng)址：http://jinyejixie.com/article12/gcepdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、Google、服務(wù)器托管、虛擬主機(jī)、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何運(yùn)用SocketIO實(shí)現(xiàn)WebSSH