码迷,mamicode.com
首页 > 其他好文 > 详细

用flask和长轮询实现对帅哥投票和实时查看票数

时间:2018-05-16 22:35:51      阅读:564      评论:0      收藏:0      [点我收藏+]

标签:status   else   scale   body   pos   text   style   orm   后端   

flask中的代码

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>

 

用flask和长轮询实现对帅哥投票和实时查看票数

标签:status   else   scale   body   pos   text   style   orm   后端   

原文地址:https://www.cnblogs.com/wangkun122/p/9048100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!