09月22日, 2014 131次
轮询和长轮询优缺陷领会轮询：软硬件准时向效劳器发送Ajax乞求，效劳器接到乞求后赶快归来相应动静并封闭贯穿。便宜：后端步调编写比较简无脑单。缺陷：乞求中有泰半是无效，滥用带宽和效劳器资源。范例：适于袖珍运用。
长轮询：软硬件向效劳器发送Ajax乞求，效劳器接到乞求后hold住贯穿，直到有新动静才归来相应动静并封闭贯穿，软硬件处置完相应动静后再向效劳器发送新的乞求。便宜：在无动静的状况下不会一再的乞求。缺陷：效劳器hold贯穿会耗费资源。范例：Webqq、Hi网页版、Facebook IM。
其余，对于长贯穿和socket贯穿也有辨别：长贯穿：在页面里嵌入一个隐蔵iframe，将这种隐蔵iframe的src属性设为对一个长贯穿的乞求，效劳器端就动力源不停地往软硬件输出材料。
便宜：动静赶快达到，不发无效乞求。
缺陷：效劳器养护一个长贯穿会减少开支。
范例：Gmail谈天
Flash Socket：在页面中内嵌入一个运用了Socket类的 Flash 步调javaScript经过挪用此Flash步调供给的Socket接口与效劳器端的Socket接口举行通讯，JavaScript在收到效劳器端传递的动静后遏制页面包车型的士展示。
便宜：实行真实的赶快通讯，而不是伪赶快。
缺陷：软硬件确定安置Flash插件；非HTTP和议，没辙全机动穿梭风火墙。
范例：搜集交互健身玩耍。
轮询示例代码Flask版app.pyapp.pyfrom 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='127.0.0.1',threaded=True)
app.run(threaded=True)
templates/user_list.html<!DOCTYPE html>
<html>
<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>
长轮询示例代码
Flask版
app.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=5)
ret['data'] = users
except queue.Empty:
ret['status'] = False
return jsonify(ret)
if __name__ == '__main__':
app.run(host='127.0.0.1',threaded=True)
# app.run(threaded=True)
\templates\user_list.html<!DOCTYPE html>
<html>
<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>
