代码之家 › 专栏 › 技术社区 › user366312

如何点击按钮向烧瓶插槽.io发送请求?

flask-socketio flask python

-3

user366312 · 技术社区 · 1 年前

以下源代码在页面加载时向服务器发送一个请求,当任务完成时,页面会自动更新。

app.py

from flask import Flask, render_template
from flask_socketio import SocketIO, emit, disconnect

from time import sleep

async_mode = None

app = Flask(__name__)

socket_ = SocketIO(app, async_mode=async_mode)

@app.route('/')
def index():
    return render_template('index.html',
                           sync_mode=socket_.async_mode)

@socket_.on('do_task', namespace='/test')
def run_lengthy_task(data):
    try:
        duration = int(data['duration'])
        sleep(duration)
        emit('task_done', {'data': 'long task of {} seconds complete'.format(duration)})
        disconnect()
    except Exception as ex:
        print(ex)

if __name__ == '__main__':
    socket_.run(app, host='0.0.0.0', port=80, debug=True)

index.html

<!DOCTYPE HTML>
<html>
<head>
    <title>Long task</title>
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {

            namespace = '/test';
            var socket = io(namespace);

            socket.on('connect', function() {
                $('#messages').append('<br/>' + $('<div/>').text('Requesting task to run').html());
                socket.emit('do_task', {duration: '60'});
            });

            socket.on('task_done', function(msg, cb) {
                $('#messages').append('<br/>' + $('<div/>').text(msg.data).html());
                if (cb)
                    cb();
            });
        });
    </script>
</head>
<body>
    <h3>Messages</h3>
    <div id="messages" ></div>
</body>
</html>

如何修改此程序,以便只需单击按钮即可发送请求?

1 回复 | 直到 1 年前

ricardkelly 1 年前

下面是一个编辑,用于将事件从文档加载移动到正在单击的按钮。

<!DOCTYPE HTML>
<html>
<head>
    <title>Long task</title>
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
         $(document).on('click', '.widget input', function (event) {
            namespace = '/test';
            var socket = io(namespace);

            socket.on('connect', function() {
                $('#messages').append('<br/>' + $('<div/>').text('Requesting task to run').html());
                socket.emit('do_task', {duration: '60'});
            });

            socket.on('task_done', function(msg, cb) {
                $('#messages').append('<br/>' + $('<div/>').text(msg.data).html());
                if (cb)
                    cb();
            });
            event.preventDefault();
        });
    </script>
</head>
<body>
    <div class="widget">
        <input type="submit" value="Click me" />
    </div>
    <h3>Messages</h3>
    <div id="messages" ></div>
</body>
</html>

推荐文章

Kevin Müller · 使用javascript更改字节保存二进制数据

2 年前

NextNightFlyer · 如何将参数传递给Python应用程序的Get请求?

2 年前

Tushar Nautiyal · 我们需要在Flask应用程序中进行功能缩放吗

2 年前

Santhosh S · 在flask中使用会话

2 年前

sK500 · 从flask传递到JS的值是html格式的,而不是静态的

2 年前

Callum · 在HTML(Python应用程序)中使用变量时,在{name}周围放置不必要的括号

2 年前

Nadav Holtzman · 如何使用javascript更改HTML中的Flask WTForm字段值?

2 年前

Degun · 图表Js:如何根据第三个数据更改点的颜色

2 年前

Jae_JPN · HTML不会将参数传递给缺少1个必需的位置参数的烧瓶

2 年前

Shwetha K · Docker错误:MySQLdb_例外。操作错误:(2002,“无法通过套接字'/var/run/mysqld/mysqld.sock'(2)连接到本地MySQL服务器”)

2 年前