用flask和長輪詢實現對帥哥投票和實時查看票數

時間 2019-11-09

原文原文鏈接

flask中的代碼html

from flask import Flask,request,render_template,redirect,session,jsonify
import uuid
import queue

app = Flask(__name__)
app.secret_key = 'asdfasdf'
#定義一個字典，用於存放用戶的queue  鍵爲uuid
USER_QUEUE = {

}
#在用戶訪問以前判斷是否登陸，注意這裏的before_request沒有括號
@app.before_request
def check_login():
    #若是用戶訪問login則直接讓訪問
    if request.path == '/login':
        return None
    user = session.get('user_info')
    if not user:
        return redirect('/login')

@app.route('/login',methods=['GET',"POST"])
def login():
    if request.method == "GET":
        return render_template('login.html')
    else:
        user = request.form.get('user')
        pwd = request.form.get('pwd')
        uid = str(uuid.uuid4()) #生成一個uuid
        USER_QUEUE[uid] = queue.Queue()
        #把用戶登陸信息放入到session 中去
        session['user_info'] = {'uid':uid,'name':user}
        return redirect('/index')

#僞裝這是數據庫，裏邊有數據
GENTILEMAN = {
    '1':{'name':'向龍','count':0},
    '2':{'name':'霄漢','count':0},
}

@app.route('/index')
def index():
        #從數據庫中取出數據，返回給前端
    return render_template('index.html',gg=GENTILEMAN)

@app.route('/get_new_count')
def get_new_count():
    """
    獲取用戶session中的uid
    根據uid獲取當前登陸用的隊列
    :return:
    """
    #定義一個字典，裏邊放着從queue中取出的數據，status爲False的時候表明裏邊沒有值，讓前端繼續過來 長輪詢
    ret = {'status':True,'data':None }
    uid = session['user_info']['uid']
    
    q = USER_QUEUE[uid] #在字典中取出用戶的queue
    try:
    #視圖從queue中取出數據，最多等10秒 長輪詢之 夯住操做，一直在等queue中是否能取出數據，取出去以後直接返回，或是10秒以後沒有的話返回數據，
        data = q.get(timeout=10)
        ret['data'] = data
        #若是queue中被取空的話，報錯
    except queue.Empty as e:
        ret['status'] = False

    return jsonify(ret)

@app.route('/vote',methods=['POST'])
def vote():
    """
    接收用戶請求，對帥哥進行投票
    :return:
    """
    gid = request.form.get('gid')
    old = GENTILEMAN[gid]['count']
    new = old + 1
    GENTILEMAN[gid]['count'] = new

    data = {'gid':gid,'count':new}
    for q in USER_QUEUE.values():
        q.put(data)

    return 'OK'




if __name__ == '__main__':
    app.run(host='0.0.0.0',threaded=True)

index.html的代碼前端

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <h1>請選出最帥的男人</h1>
    <ul>
        {% for k,v in gg.items() %}
            <li style="cursor: pointer" id="user_{{ k }}" ondblclick="vote({{ k }});">ID:{{ k }}, 姓名：{{ v.name }} ，票數：<span>{{ v.count }}</span></li>
        {% endfor %}
    </ul>

    <script src="/static/jquery-3.3.1.min.js"></script>
    <script>
        #一放問網頁就執行此函數
        $(function () {
            get_new_count();
        });
        
        function get_new_count() {
            $.ajax({
                url: '/get_new_count',
                type:'GET',
                dataType:'JSON',
                success:function (arg) {
                    if (arg.status){
                        // 更新票數
                        var gid = "#user_" + arg.data.gid;
                        $(gid).find('span').text(arg.data.count);
                    }else{
                        // 10s內沒有人投票
                    }
                    #這裏於後端的 夯住實現了長輪詢
                    get_new_count();

                }
            })
        }

        function vote(gid) {
            $.ajax({
                url: '/vote',
                type:'POST',
                data:{gid:gid},
                dataType:"JSON",
                success:function (arg) {

                }
            })
        }
    </script>
</body>
</html>