ajax轮询请求现实(Ajax轮询)
首发

ajax轮询请求现实(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>

<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>

以上就是由优质生活领域创作者 生活常识网 整理编辑的,如果觉得有帮助欢迎收藏转发~

分享到 :
相关推荐

好看的bl小说(中国女生为何偏爱同性恋小说)

请用语音读文章这4本书真的是超好看。耽美界的经典之作。零差评的!!!介绍书单1、[&...

AMD锐龙7(5800X/锐龙5)

请用语音读文章在本届2021年的CES期间。AMD发布了2款桌面处理器。分别为锐龙[...

四川将裁撤2地级市(整合为7个地级市或拆分为4省2市)

请用语音读文章德阳市。别称“旌城”。四川省地级市。位于成都平原东北部;地处龙门山脉[...

项脊轩志翻译及原文(《项脊轩志》原文)

请用语音读文章归有光。字熙甫、开甫。号震川、项脊生。归有光与唐顺之、王慎中均崇尚内[...

发表评论

您的电子邮箱地址不会被公开。