基于轮询实现实时的在线投票系统

Posted crazymagic

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于轮询实现实时的在线投票系统相关的知识,希望对你有一定的参考价值。

需求

  用户在投票的页面可以实时的监测到,投票详情

 

在这里我会通过轮询和长轮询(推荐使用这个,可以减少请求数,实时性也好)的方法来实现

 

基于轮询实现投票系统

大致的思路是前端开启一个定时器每隔10秒定时的向服务器获取投票的结果

from flask import Flask,render_template,request,jsonify


app = Flask(__name__)


USERS = {
    ‘1‘:{‘name‘:‘贝贝‘,‘count‘:1},
    ‘2‘:{‘name‘:‘小东北‘,‘count‘:0},
    ‘3‘:{‘name‘:‘何伟明‘,‘count‘:0},
}

@app.route(‘/user/list‘)
def user_list():
    import time
    return render_template(‘user_list.html‘,users=USERS)

@app.route(‘/vote‘,methods=[‘POST‘])
def vote():
    uid = request.form.get(‘uid‘)
    USERS[uid][‘count‘] += 1
    return "投票成功"

@app.route(‘/get/vote‘,methods=[‘GET‘])
def get_vote():

    return jsonify(USERS)


if __name__ == ‘__main__‘:
    # app.run(host=‘192.168.13.253‘,threaded=True)
    app.run(threaded=True)
技术分享图片
<!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(dblclick,li,function () {
                var uid = $(this).attr(uid);
                $.ajax({
                    url:/vote,
                    type:POST,
                    data:{uid:uid},
                    success:function (arg) {
                        console.log(arg);
                    }
                })
            });

        });


        /*
        获取投票信息
         */
        function get_vote() {
            $.ajax({
                url:/get/vote,
                type:"GET",
                dataType:JSON,
                success:function (arg) {
                    $(#userList).empty();
                    $.each(arg,function (k,v) {
                        var li = document.createElement(li);
                        li.setAttribute(uid,k);
                        li.innerText = v.name + "(" + v.count + ) ;
                        $(#userList).append(li);
                    })

                }
            })
        }


        setInterval(get_vote,3000);

    </script>
</body>
</html>
templates/user_list.html

 

缺点 : 获取票数的实时性不好,频繁的向服务器发送请求  

基于长轮询实现投票系统

基本的思路:

   前端: 通过递归发送查询投票详情的请求,更新数据  (数据驱动模型)

   服务端 :如果没有人来投票服务器把所有用户的请求hang住10秒,把原有的信息返回,如果在这等待的10s中有人来投票,直接返回最新的结果给所有hang住的用户

 

基于队列queue的阻塞, 来实现hang住请求,queue的基本用法如下

import queue

q = queue.Queue()


val = q.get()
print(val)

try:
    val = q.get(timeout=10)
    print(val)
except queue.Empty:
    pass

 

run.py

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

app = Flask(__name__)
app.secret_key = ‘asdfasdfasd‘


USERS = {
    ‘1‘:{‘name‘:‘贝贝‘,‘count‘:1},
    ‘2‘:{‘name‘:‘小东北‘,‘count‘:0},
    ‘3‘:{‘name‘:‘何伟明‘,‘count‘:0},
}

QUEQUE_DICT = {
    # ‘asdfasdfasdfasdf‘:Queue()
}

@app.route(‘/user/list‘) 
def user_list():
    user_uuid = str(uuid.uuid4())
    QUEQUE_DICT[user_uuid] = queue.Queue()

    session[‘current_user_uuid‘] = user_uuid
    return render_template(‘user_list.html‘,users=USERS)

@app.route(‘/vote‘,methods=[‘POST‘])
def vote():
    uid = request.form.get(‘uid‘)
    USERS[uid][‘count‘] += 1
    for q in QUEQUE_DICT.values():
        q.put(USERS)
    return "投票成功"


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

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

    return jsonify(ret)



if __name__ == ‘__main__‘:
    app.run(host=‘192.168.13.253‘,threaded=True)
    # app.run(threaded=True)

  

技术分享图片
<!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.setAttribute(uid,k);
                                li.innerText = v.name + "(" + v.count + ) ;
                                $(#userList).append(li);
                            })
                    }
                    get_vote();

                }
            })
        }

    </script>
</body>
</html>
templates/user_list.html

 

以上是关于基于轮询实现实时的在线投票系统的主要内容,如果未能解决你的问题,请参考以下文章

轮询长轮询和websocket

实时监听数据示例

基于Python Tornado的在线问答系统

Django实现websocket完成实时通讯,聊天室,在线客服等

SocketIO介绍+SpringBoot整合SocketIO完成实时通信

基于Vue+Java实现的在线聊天APP系统设计与实现