欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajax轮询请求现实(ajax并发请求阻塞讲解)

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

轮询和长轮询优缺点分析

  1. 轮询:客户端定时向服务器发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。优点:后端程序编写比较容易。缺点:请求中有大半是无用,浪费带宽和服务器资源。实例:适于小型应用。
  2. 长轮询:客户端向服务器发送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>