长轮询

最新推荐文章于 2024-06-24 10:50:20 发布

苟修今

最新推荐文章于 2024-06-24 10:50:20 发布

阅读量289

点赞数

本文链接：https://blog.csdn.net/DeskyAki/article/details/89788755

版权

长轮询，投票系统，没人投票hold住，有投票，实时刷新

app.py
from flask import Flask, render_template, request, jsonify, session
import uuid
import queue

app = Flask(__name__)
app.secret_key = 'deskyaki'


USERS = {
    '1': {'name': 'a', 'count': 1},
    '2': {'name': 'b', 'count': 0},
    '3': {'name': 'c', 'count': 0},
}

QUEUE_DICT = {
    #  'uuid':Queue()
}


@app.route('/user/list')
def user_list():
    user_uuid = str(uuid.uuid4())
    QUEUE_DICT[user_uuid] = queue.Queue()       # 对不同的访问用户根据uuid创建不同的队
    session['current_user_uuid'] = user_uuid    # 存到session中
    return render_template('user_list.html', users=USERS)


@app.route('/vote', methods=['POST'])
def vote():
    uid = request.form.get('uid')  # 前端发来的ajax的post请求
    USERS[uid]['count'] += 1
    for q in QUEUE_DICT.values():  # 为队列每个用户加入最新投票结果
        q.put(USERS)
    return "投票成功"


@app.route('/get/vote', methods=['GET'])
def get_vote():
    user_uuid = session['current_user_uuid']
    q = QUEUE_DICT[user_uuid]

    ret = {'status': True, 'data': None}
    try:
        users = q.get(timeout=5)
        ret['data'] = users
    except queue.Empty:
        ret['status'] = False
    return jsonify(ret)


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

user_list.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        li{
            cursor: pointer;
            /*悬停有小手*/
        }
    </style>
</head>
<body>
    <ul id="userList">
        {% for key,val in users.items() %}
            <li uid="{{key}}">{{val.name}} ({{val.count}})</li>
        {% endfor %}
    </ul>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script>
        $(function () {
            $('#userList').on('click','li',function () {
                var uid = $(this).attr('uid');
                $.ajax({
                    url:'/vote',
                    type:'POST',
                    data:{uid:uid},
                    success:function (arg) {
                        console.log(arg);
                    }
                })
            });
            get_vote();
        });
        /*
        获取投票信息
         */
        function get_vote() {
            $.ajax({
                url:'/get/vote',
                type:"GET",
                dataType:'JSON',
                success:function (arg) {
                    if(arg.status){
                        $('#userList').empty();
                            $.each(arg.data,function (k,v) {
                                var li = document.createElement('li');
                                // 创建li标签
                                li.setAttribute('uid',k);
                                // 创建属性
                                li.innerText = v.name + "(" + v.count + ')' ;
                                $('#userList').append(li);
                            })
                    }
                    get_vote();
                }
            })
        }
    </script>
</body>
</html>