Django3+websocket+paramiko实现web页面实时输出

布满荆棘的人生 2022-12-04 10:59 117阅读 0赞

# 一、概述 #

在上一篇文章中，简单在浏览器测试了websocket，链接如下：[https://www.cnblogs.com/xiao987334176/p/13615170.html][https_www.cnblogs.com_xiao987334176_p_13615170.html]

但是，我们最终的效果是web页面上，能够实时输出结果，比如执行一个shell脚本。

以母鸡下蛋的例子，来演示一下，先来看效果：

![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvMTM0MTA5MC8yMDIwMDkvMTM0MTA5MC0yMDIwMDkwNzEwMzgxMTA4My0xOTYzNjc0Njc2LmdpZg][]

# 二、代码实现 #

## 环境说明 ##

操作系统：windows 10

python版本：3.7.9

操作系统：centos 7.6

ip地址：192.168.31.196

说明：windows10用来运行django项目，centos系统用来执行shell脚本。脚本路径为：/opt/test.sh，内容如下：

#!/bin/bash
    
    for i in {
        1..10}
    do
        sleep 0.5
        echo 母鸡生了$i个鸡蛋;
    done

## 新建项目 ##

这里，我在上篇文章中的项目基础上，进行修改。项目：django3\_websocket，应用名称：web

安装paramiko模块

pip3 install paramiko

修改urls.py，增加首页

from django.contrib import admin
    from django.urls import path
    from web import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('index/', views.index),
    ]

修改web目录下的views.py，内容如下：

from django.shortcuts import render
    
    # Create your views here.
    def index(request):
        return render(request,'index.html')

修改web目录下的websocket.py，内容如下：

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][] ![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9FeHBhbmRlZEJsb2NrU3RhcnQuZ2lm][]

# ！/usr/bin/python3
    # -*- coding: utf-8 -*-
    import paramiko
    
    
    async def websocket_application(scope, receive, send):
        while True:
            event = await receive()
    
            if event['type'] == 'websocket.connect':
                await send({
                    'type': 'websocket.accept'
                })
    
            if event['type'] == 'websocket.disconnect':
                break
    
            if event['type'] == 'websocket.receive':
                if event['text'] == 'ping':
                    await send({
                        'type': 'websocket.send',
                        'text': 'pong!'
                    })
    
                # 这里根据web页面获取的值进行对应的操作
                if event['text'] == 'laying_eggs':
                    print("要执行脚本了")
                    # 执行的命令或者脚本
                    command = 'bash /opt/test.sh'
    
                    # 远程连接服务器
                    hostname = '192.168.31.196'
                    username = 'root'
                    password = 'root'
    
                    ssh = paramiko.SSHClient()
                    ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
                    ssh.connect(hostname=hostname, username=username, password=password)
                    # 务必要加上get_pty=True,否则执行命令会没有权限
                    stdin, stdout, stderr = ssh.exec_command(command, get_pty=True)
                    # result = stdout.read()
                    # 循环发送消息给前端页面
                    while True:
                        nextline = stdout.readline().strip()  # 读取脚本输出内容
                        # print(nextline.strip())
                        # 发送消息到客户端
                        await send({
                            'type': 'websocket.send',
                            'text': nextline
                        })
                        # 判断消息为空时,退出循环
                        if not nextline:
                            break
    
                    ssh.close()  # 关闭ssh连接
                    # 关闭websocket连接
                    await send({
                        'type': 'websocket.close',
                    })

**注意：这里面的服务器ip，用户名，密码，脚本路径。请根据实际情况修改！ **

在templates目录下，新建文件index.html，内容如下：

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][] ![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9FeHBhbmRlZEJsb2NrU3RhcnQuZ2lm][]

<!DOCTYPE html >
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>测试demo</title>
        <style type="text/css">
            #execute_script {
                margin: 20px;
                height: 40px;
                background-color: #00ff00;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    </head>
    <body>
    
    <button type="button" id="execute_script" value="laying_eggs">执行Shell脚本</button>
    <h3 style="margin: 20px;">脚本执行结果:</h3>
    <div id="messagecontainer" style="margin: 20px;">
    </div>
    <hr/>
    </body>
    <script type="text/javascript">
        $(function () {
    
        });
        // 点击按钮
        $('#execute_script').click(function () {
            // 打开一个 web socket
            var socket = new WebSocket("ws://" + window.location.host);
            console.log(socket);
            // 连接建立成功事件
            socket.onopen = function () {
                console.log('WebSocket open');
                //发送字符: laying_eggs到服务端
                socket.send('laying_eggs');
            };
            // 接收消息事件
            socket.onmessage = function (e) {
                if (e.data.length > 0) {
                    //打印服务端返回的数据
                    console.log('message: ' + e.data);
                    $('#messagecontainer').append(e.data + '<br/>');
                }
            };
            // 关闭连接事件
            socket.onclose = function(e) {
                console.log("connection closed (" + e.code + ")");
            }
        });
    </script>
    </html>

使用uvicorn启动项目

uvicorn web.asgi:application

访问首页

http://127.0.0.1:8000/index/

![format_png][]

点击执行脚本，效果就是文章开头部分的动态效果了。

完整代码在github中，地址：

[https://github.com/py3study/django3\_websocket][https_github.com_py3study_django3_websocket]

[https_www.cnblogs.com_xiao987334176_p_13615170.html]: https://www.cnblogs.com/xiao987334176/p/13615170.html
[aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvMTM0MTA5MC8yMDIwMDkvMTM0MTA5MC0yMDIwMDkwNzEwMzgxMTA4My0xOTYzNjc0Njc2LmdpZg]: /images/20221123/ae5bbe252b80484a9ff210ace6f8c2c4.png
[aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm
[aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9FeHBhbmRlZEJsb2NrU3RhcnQuZ2lm]: /images/20221123/048d3e9af45043c997575ac7ec81a78e.png
[format_png]: /images/20221123/9e12095839334a1fb3d78683fcaf9708.png
[https_github.com_py3study_django3_websocket]: https://github.com/py3study/django3_websocket