长轮询

Love The Way You Lie 2022-06-10 00:12 285阅读 0赞

**长轮询的定义：**

1、长轮询是传统轮询（短轮询）的一个翻版，即浏览器定时向服务器发送请求，看看有没有数据更新

2、页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求。这一过程在页面打开期间一直持续不断。

**长轮询和短轮询的相同点**：浏览器都要在接收数据之前，先发起对服务器的连接

**长轮询和短轮询的不同点**：最大的区别在于服务器如何发送数据

短轮询是服务器立即发送响应，无论数据是否有效

长轮询是等待发送响应。

**在前端和后台都会有个超时设置**

在前端超时的话，浏览器又会向服务器发起一个请求。

在后台超时的话，服务器会向浏览器发送超时信息。

使用ajax技术，使服务器端和客户端之间建立连接，客户端发送请求，服务器端隔一定时间检查数据库是否有变动，没有变动，返回给客户端的数据为空，即可以是data=''，还可能有个提示信息的返回变量msg='超时'。当检查到数据变动了，则服务器端返回数据，data='数据'，msg='成功'，客户端则做相应处理，处理完立即再次调用函数，与服务器端保持连接；服务器端会设定一定的时间，当超过这个时间数据库没有变化，就向客户端返回超时的信息，让客户端做处理，然后在建立连接关系。无论成功还是失败，都要在此次进行长轮询。

下面这个例子是轮询红包的状态变化:status=0，显示倒计时；status=1，处于抢红包状态；status=2，如果还有下一轮红包活动，则提示还有下一轮红包活动；如果没有下一轮抢红包活动，则显示活动已经结束。一进来该页面，就要显示相应状态的界面信息，然后处理当前有效的红包，才进入长轮询函数。

思路如下：

1、设置变量：

current\_redbag用于存储当前有效的红包活动信息，redbags存储所有红包活动信息。

2、函数requestRedbags(activity\_id)的作用是根据活动的id号，前端向后台请求该活动的红包信息，并将请求到的红        包信息全部保存在全局变量redbags里面。

3、函数getAvailableRedbag()获取当前有效的红包，若没有有效的红包，则返回null

4、函数handleRedbag(redbag)，处理当前有效的红包，即根据当前有效红包的status来进行相应的处理

5、函数check\_redbag\_status(redBagId,oldStatus,timeOut,startTime) 是检查红包状态变化的长轮询，参数redBagId        是当前该轮红包的id，oldStatus是上次红包的状态，timeOut超时的时间，startTime是开始摇红包开始的时间，          用 于倒计时的。无论成功还是失败，都要在此次进行长轮询

$(function() {
        var SHAKE_THRESHOLD = 1800;
        var last_update = 0;
        var x = y = z = last_x = last_y = last_z = 0;
        var num = 0;                    
        var shake_status = 0;                                    //0:未开始，1：正在进行 2：已结束                               
        var activity_id = "96";                                                                    
                                                   
                                                                
       var current_redbag;                                                                       
       var redbags;                                                                               
       var time_distance = 0;//本地时间和服务器时间的差                                                                                                                                                                                                                                                             
       var numMax = 30;                                                                           
       
        // 请求红包列表，并对数据进行处理
        requestRedbags(activity_id);
    
        
        // --检测设备是否有摇一摇动作
        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            shake_status = 1;
            if ((curTime - last_update) > 100) {
                var diffTime = curTime - last_update;
                last_update = curTime;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
    
                if (speed > SHAKE_THRESHOLD) {
                    // times++;
                    handelShakingMotion();
                }
                last_x = x;
                last_y = y;
                last_z = z;
            }
        }
    
        // 设备有摇一摇动作，则对页面已摇次数进行加1，若已经摇到最大次数numMax，则请求抢红包接口
        function handelShakingMotion() {
            if (shake_status == 2 || shake_status == 0) {
                return false;
            }
            num++;
            // 添加摇一摇的声音
            $('#shakingAudio').trigger('play');
            document.getElementById("numberCount").innerHTML = num;
            // setTimeout(function() {
            // times = 0;
            if (num == numMax) {
                num = 0;
                shake_status = 2;
                // 关闭摇一摇的接口
                window.removeEventListener("devicemotion", deviceMotionHandler);
                // 添加摇到红包的声音
                $('#shakingResult').trigger('play'); 
                // 摇一摇结束之后，请求抢红包接口
                drawRedbag(openid);
            }
            // }, 100); //测试得知80是比较理想的数值
        }
    
        
    
        // 发送抢红包请求
        function drawRedbag(openid){
            console.log("drawRedbag");
            var url = globalConfig.pre_api_url + "/wxwall_api/redbag/draw_redbag.php";
            var param = {
                "openid":openid
            };
            request(url,param,function(response){
                // 请求抢红包接口成功
                var redBagData = response.data;
                // $('#shakingResult').trigger('play');
                price = redBagData.price;
                refreshView(current_redbag,true);
                console.log(response.msg);
            });
    
        }
    
        // 抢红包进行中，监听摇一摇的动作
        function listenPhoneShake() {
            if (window.DeviceMotionEvent) {
                window.addEventListener('devicemotion', deviceMotionHandler,false);
                console.log("addEventListener devicemotion");
            } else {
                alert('抱歉，你的手机配置实在有些过不去，考虑换个新的再来试试吧');
            }
        }
    
        // 当前红包：刷新界面
        function refreshView(redbag,is_show_redbag){
            // 显示没有红包
            if( redbag === undefined ){
                $('#shake_view').hide();
                $('#countdown').hide();
                $('#redBagInfo').hide();
                $('#nextRedBagActivity').hide();
                $('#activityEnd').hide();
                $('#redbagRecordPage').hide();
                $('#noRushRedbag').hide();
                $('#noData').show();
                return;
            }
            // 有红包，但都已经无效了
            if (redbag === null) {
                $('#shake_view').hide();
                $('#countdown').hide();
                $('#redBagInfo').hide();
                $('#nextRedBagActivity').hide();
                $('#activityEnd').hide(); 
                $('#noData').hide();
                // 显示红包记录/或者没有抢到红包
                getRedbagRecord();
                // $('#redbagRecordPage').show();
                return;
            }
    
            var status = redbag.status;
            if (status == '0') {
                //显示倒计时
                $("#shake_view").hide();
                $('#redBagInfo').hide();
                $('#nextRedBagActivity').hide();
                $('#activityEnd').hide();
                $("#countdown").show();    
            }else if (status == '1'){
                if (is_show_redbag == true) {
                    $('#hostName').text( activity_title + "的红包" );
                    $('#fee').text('成功抢到' + price +'元');
                    $('#shake_view').hide();
                    $('#nextRedBagActivity').hide();
                    $('#activityEnd').hide();
                    $("#countdown").hide();  
                    $('#redBagInfo').show();
                    return;
                }else{
                    //显示摇一摇
                    $("#countdown").hide(); 
                    $('#redBagInfo').hide();
                    $('#nextRedBagActivity').hide();
                    $('#activityEnd').hide();  
                    $('#redBagInfo').hide();
                    $("#shake_view").show();
                }
               
            }else if(status == '2'){
                // 判断是否还有下一轮红包，在用户没有抢到红包的情况下， 
                // 有下一轮红包就显示进入下一轮，没有的话就显示活动结束
                // 当用户抢到红包，就不会进入这种情况
                var nextRedbag = getAvailableRedbag();
                if (nextRedbag == null) {
                    //若无，显示已经结束；.......
                    $('#redBagInfo').hide();
                    $("#shake_view").hide(); 
                    $("#countdown").hide(); 
                    $('#nextRedBagActivity').hide();  
                    if( price == 0 ){
                        $('#endActivityPageTxt').text('很可惜，您没抢到红包');
                    }else{
                        $('#endActivityPageTxt').text('成功抢到' + price + '元');
                    }
                    $('#activityEnd').show();
                }else{
                    //若有，显示还有下一轮......
                    $('#redBagInfo').hide();
                    $("#countdown").hide(); 
                    $('#activityEnd').hide();
                    $("#shake_view").hide();
                    if( price == 0 ){
                        $('#promst').text('很可惜，您没抢到红包');
                    }else{
                        $('#promst').text('成功抢到' + price + '元');
                    }
                    $('#nextRedBagActivity').show();
                }
            }
        }
    
        // 获取当前有效的红包
        function getAvailableRedbag(){
            var length = redbags.length;
            // 没有红包活动返回null
            if (length == 0) {
                return null;
            }
            // 遍历红包列表，取到第一个有效的红包，若有则返回当前有效的红包
            for(var i = 0; i < length; i++){
                var redbag = redbags[i];
                var status = redbag.status;
                // 主要获取到第一个有效的红包就返回当前有效的红包，并且退出该函数
                if (status != '2') {
                    return redbag;
                    break;
                }
            }
            // 没有有效的红包，即所有的红包活动都结束了
            return null;       
        }
    
        // 开始摇红包倒计时
        function startCount(startTime) {  
            // var timeContent = $('#timeContent');   //显示倒计时的框
            var endTime = new Date(startTime.replace(/-/g,'/'));     //红包开始的时间
            var countTimer = setInterval(
                function() {
                    var nowTime = new Date();
                    var time = endTime.getTime() - nowTime.getTime() + time_distance; //截止时间和开始时间相差的毫秒数
                    if (!isNaN(time) && time >= 0) {
                        var day = parseInt(time / 1000 / 60 / 60 / 24);
                        var hour = parseInt(time / 1000 / 60 / 60 % 24);
                        var minute = parseInt(time / 1000 / 60 % 60);
                        var second = parseInt(time / 1000 % 60);
                        if (time == 0) {
                            current_redbag.status = "1";
                            refreshView(current_redbag,false);
                        }else if (time <= 10000) {
                            // 调用10秒倒计时动画
                            $('#timeContent').text( second + '秒' );
                        } else if (time <= 120000) {
                            // 倒数120秒的时候
                            var secondLeft = minute * 60 + second;
                            $('#timeContent').text( secondLeft + '秒');
                        } else {
                            $('#timeContent').text( day + '天' + hour + '小时' + minute + '分钟' + second + '秒');
                        }
                    } else if (time < 0) {
                        clearInterval(countTimer);
                    }
                }, 1000
            );
        }
     // 检查红包状态变化的长轮询 function check_redbag_status(redBagId,oldStatus,timeOut,startTime) { var url = globalConfig.pre_api_url + "/wxwall_api/redbag/check_redbag_status.php"; //检查红包状态的url var redbag_id = redBagId; var old_status = oldStatus; var time_out = timeOut; var start_time = startTime; var param = { "redbag_id": redbag_id, "old_status": old_status, "time_out": time_out }; $.ajax({ // 提交数据的类型 type: "POST", // 提交的网址 url: url, // 提交的数据 data: param, // 返回数据的格式 datatype: "json", // 在请求之前调用的函数 beforeSend: function() { }, // 成功返回之后调用的函数 success: function(response) { response = eval("(" + response + ")"); var status = response.status; if (status == '2') { current_redbag.status = response.data.new_status;//很重要 handleRedbag(current_redbag); if (current_redbag.status == '2') { return; } } check_redbag_status(redbag_id,current_redbag.status,time_out,start_time); // console.log(response.msg); }, // 执行后调用的函数 complete: function(XMLHttpRequest, textStatus) { // console.log(textStatus); }, // 调用出错执行的函数 error: function() { console.log("error"); setTimeout(function(){ check_redbag_status(redbag_id,old_status,time_out,start_time); }, 500); //这里是500ms吗？？失败后果500ms再次请求 }, }); }
    
        // 请求红包列表
        function requestRedbags(activity_id){
            var get_redbag_list_url = globalConfig.pre_api_url + "/wxwall_api/redbag/get_redbag_list.php"; //获取红包列表的url
            data = {
                "activity_id": activity_id,
            };
            // 向后台请求红包列表，并根据每个红包的status进行相应的处理
            request(get_redbag_list_url, data, function(response) {
                var datas = response.data;
                redbags = datas.redbags;
                // 当没有红包活动的时候，提示没有红包
                if( datas == '' || response.status == '6'){
                    refreshView(undefined,false);
                    return;
                }
                // redbag 存储当前有效的红包或者null
                var redbag = getAvailableRedbag();
                // 当有红包活动的时候，但是没有有效红包，显示抢到红包的信息
                if( redbag === null ){
                    refreshView(null,false);
                    return;
                }
                var servie_time = new Date(datas.current_time.replace(/-/g,'/'));  //卸载下面，防止datas=‘’的时候，replace()函数出错
                var local_time = new Date();
                time_distance = local_time.getTime() - servie_time.getTime();     //服务器和用户的时间相差的毫秒数
                // 获取红包列表
                var length = redbags.length;
                var redbag_id = redbag.id;
                var old_status = redbag.status;
                var start_time = redbag.start_time;
                var time_out = 40; 
                current_redbag = redbag;
                // 处理当前的红包
                handleRedbag(redbag);
                // 长轮询检测status
                check_redbag_status(redbag_id,old_status,time_out,start_time);          
    
            });      
        }
    
        // 处理当前有效的红包
        function handleRedbag(redbag){
            var status = redbag.status;
            var start_time = redbag.start_time;
            // 
            refreshView(redbag,false);
            // $("#device_log").append("<li>status:"+status+"<li>");
    
            if (status == '0') {
                //显示倒计时
                startCount(start_time);
            }else if(status == '1'){
                //监听摇一摇
                if (isTestEnv == true) {
                    monitor_shake();
                }else{
                    listenPhoneShake();
                }
    
            }else if(status == '2'){
                // refreshView()函数已经处理了
                //结束该轮抢红包，进入了结束界面
    
                //关闭用户可以摇红包的能力
    
                //提示用户是否还有下一轮红包活动，如果有，则引导用户操作；如果没有，提示没有。
            }
        }
    
       
    });