需求

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

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

基于轮询实现投票系统

大致的思路是前端开启一个定时器每隔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)

Title

cursor: pointer;

}

• {% for key,val in users.items() %}
• {{val.name}} ({{val.count}}){% endfor %}

$('#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);

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)

Title

cursor: pointer;

}

• {% for key,val in users.items() %}
• {{val.name}} ({{val.count}}){% endfor %}

$('#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();

}

})

}

templates/user_list.html