基於websocket的celery任務狀態監控

缺月掛疏桐發表於2019-02-16
Web

1. 目的
曾經想向前臺實時返回Celery任務的狀態監控，也檢視了很多部落格，但是好多也沒能如願，因此基於網上已有的部落格已經自己的嘗試，寫了一個小的demo，實現前臺實時獲取後臺傳輸的任務狀態。

2. 準備
本篇文章使用的是Flask框架，安裝celery，celery採用redis作為儲存。同時用到了Flask-SocketIO建立websocket。同時還用到了協程庫eventlet（這個是Flask-SocketIO文件建議的，連結文件）。

3. 實現
demo仿照其他例子實現了一個簡單的後臺任務監控。我們直接上程式碼吧，下面是server端程式碼：

# -*- utf-8 -*-
# app.py
import time
import uuid
from flask import Flask, render_template, request, make_response, jsonify
from flask_socketio import SocketIO
from celery import Celery
import eventlet
from flask_redis import FlaskRedis
eventlet.monkey_patch()

app = Flask(__name__)

app.config[`BROKER_URL`] = `redis://localhost:6379/0`
app.config[`CELERY_RESULT_BACKEND`] = `redis://localhost:6379/0`
app.config[`CELERY_ACCEPT_CONTENT`] = [`json`, `pickle`]
app.config[`REDIS_URL`] = `redis://localhost:6379/0`

socketio = SocketIO(app, async_mode=`eventlet`,message_queue=app.config[`CELERY_RESULT_BACKEND`])
redis = FlaskRedis(app)

celery = Celery(app.name)
celery.conf.update(app.config)

#模擬後臺耗時任務
@celery.task
def background_task(uid):
    sid = redis.get(uid)
    socketio.emit(`info`, {`data`: `Task starting ...`, `time`: time.time() * 1000 },room=sid, namespace=`/task`)
    socketio.sleep(4)
    socketio.emit(`info`, {`data`: `Task running!`, `time`: time.time() * 1000 }, room=sid, namespace=`/task`)
    socketio.sleep(5)
    socketio.emit(`info`, {`data`: `Task complete!`, `time`: time.time()*1000 }, room=sid, namespace=`/task`)

#建立連結時把sid傳到瀏覽器端儲存。
@socketio.on(`connect`, namespace=`/task`)
def connect_host():
    sid = request.sid
    socketio.emit(`hostadd`, {`sid`: sid}, room=sid, namespace=`/task`)

#將每一個客戶端生成一個uuid存放在cookie中
@app.route(`/`)
def index():
    if not request.cookies.get(`host_uid`, None):
        uid = uuid.uuid1().get_hex()
        response = make_response(render_template(`index.html`))
        response.set_cookie(`host_uid`, uid)
        return response
    return render_template(`index.html`)

@app.route(`/task`)
def start_background_task():
    uid = request.cookies.get(`host_uid`)
    background_task.delay(uid)
    return `Started`

#設定sid建立連結後瀏覽器將sid傳送到server，並將uid與sid對映存放在redis裡面，預設保留12小時
@app.route(`/setsid`, methods=[`POST`])
def set_uid():
    data = request.json
    uid = request.cookies.get(`host_uid`)
    redis.set(uid, data[`sid`])
    redis.expire(uid, 3600 * 12)
    return jsonify({`success`: True})

if __name__ == `__main__`:
    socketio.run(app, host=`0.0.0.0`, port=5000, debug=True)

如果不想使用debug模式的話，可以用gunicorn執行，命令如下所示：

gunicorn --worker-class eventlet -w 1 app:app

使用上述命令需要注意，由於gunicorn負載均衡演算法的限制，文件建議worker數量為1，我測試過大於1，確實會出問題。
前端程式碼如下，index.html:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.js"></script>
</head>
<body>
    <h3>Logging</h3>
    <p id="log"></p>
    <button id="background">Execute</button>
    <script type="text/javascript">
        $(document).ready(function () {
            namespace = `/task`;
            socket = io.connect(`http://` + document.domain + `:` + location.port + namespace);
            socket.on(`hostadd`, function(msg){
                console.log(msg.sid);
                $.ajax({
                    url: "{{ url_for(`set_uid`) }}",
                    data: JSON.stringify({ sid: msg.sid }),
                    type: `post`,
                    dataType: `json`,
                    contentType: "application/json; charset=utf-8"
                })
            });
            socket.on(`info`, function (msg) {
                console.log(`Recived: ` + msg.data);
                var t = new Date(msg.time);
                $(`#log`).append(`Recived: ` + t.toLocaleTimeString() + `->` + msg.data + `<br>`);
            });
            $(`#background`).on(`click`, function(){
                $.get("{{ url_for(`start_background_task`) }}");
            });
        });
    </script>
</body>
</html>

GitHub地址：https://github.com/junfenggoo…

相關文章