ajax轮询请求现实（ajax并发请求阻塞介绍）

更新时间:2023-03-31 04:01:54 阅读：评论：0

轮询和长轮询优缺点分析

轮询：软件定时向服务器发送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.py

app.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(‘/ur/list’)
def ur_list():
import time
return render_template(‘ur_list.html’,urs=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/ur_list.html

<!DOCTYPE html>
<html>
<head>
<meta chart=”UTF-8″>
<title>Title</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
li{
cursor: pointer;
}
</style>
</head>
<body>
<ul id=”urList”>
{% for key,val in urs.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 () {
$(‘#urList’).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) {
$(‘#urList’).empty();
$.each(arg,function (k,v) {
var li = document.createElement(‘li’);
li.tAttribute(‘uid’,k);
li.innerText = v.name + “(” + v.count + ‘)’ ;
$(‘#urList’).append(li);
})
}
})
easybug }
/* 定时任务 */
tInterval(get_vote,3000);
</script>
</body>
</html>

长轮询示例代码
Flask版
app.py

from flask import Flask,render_template,request,jsonify,ssion
import uuid
import queue
app = Flask(__name__)
app.cret_key = ‘asdfasdfasd’
USERS = {
‘1’:{‘name’:’路人甲’,’count’:1},
‘2’:{‘name’:’路人乙’,’count’:0},
‘3’:{‘name’:’路人丙’,’count’:0},
}
QUEQUE_DICT = {
# ‘asdfasdfasdfasdf’:Queue()
}
@app.route(‘/ur/list’)
def ur_list():
ur_uuid = str(uuid.uuid4())
QUEQUE_DICT[ur_uuid] = queue.Queue()
ssion[‘current_ur_uuid’] = ur_uuid
return render_template(‘ur_list.htmlR文秘工作总结17;,urs=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():
ur_uuid = ssion[‘current_ur_uuid’]
哈奇士 q = QUEQUE_DICT[ur_uuid]
ret = {‘status’:True,’data’:None}
try:
urs = q.get(timeout=5)
ret[‘data̵蒲公英的作用7;] = urs
except queue.Empty:
ret[‘status’] = Fal
return jsonify(ret)
if __name__ == ‘__main__’:
app.run(host=’127.0.0.1′,threaded=True)
# app.run(threaded=True)

\templates\ur_list.html

<!DOCTYPE html>
<html>
<head>
<meta chart=”UTF-8″>
<title>Title</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
li{
cursor: pointer;
}
</style>
</head>
<body>
<ul id=”urList”>
{% for key,val in urs.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 () {
$(‘#urList’).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){
$(‘#urList’).empty();
$.each(arg.data,function (k,v) {
var li = document.createElement(‘li’);
li.tAttribute(‘uid’,k);
li.innerText = v.name + “(” + v.count + ‘)’ ;
$(‘#urList’).append(li);
})
}
get_vote();
}
})
}
</script>
</body>
</html>