ajax轮询请求现实(ajax并发请求阻塞讲解)
程序员文章站
2023-11-24 21:42:22
轮询和长轮询优缺点分析轮询:客户端定时向服务器发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。优点:后端程序编写比较容易。缺点:请求中有大半是无用,浪费带宽和服务器资源。实例:适于小型应...
轮询和长轮询优缺点分析
- 轮询:客户端定时向服务器发送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('/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 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>
长轮询示例代码
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 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>