- ?轮询：客户端定时向服务器发送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,jsonifyapp = 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 > ???????{% for key,val in users.items() %} ???????????<li u>{{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,sessionimport uuidimport queueapp = 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) templatesuser_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 > ???????{% for key,val in users.items() %} ???????????<li u>{{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>