Question

我们正在使用firebase Listener来更新UI，数据库结构如下：

我们使用mailgun批量发送来发送广播，因此一个广播可能有n个联系人（电子邮件），它可能有300个或可能有1000个联系人，并且我们正在跟踪其发送或读取或点击状态，因此每个联系人（电子邮件）将通过mailgun回调更新Firebase数据库中的状态（使用Firebase云功能）并更新其状态，日期和时间。它将更新Firebase数据库，因此在这里，我们将使用Firebase侦听器获得广播更新的通知。

现在，如果选择了广播并且正在更新浏览器，则我们将更新dataTable，因为我们可能会同时从mailGun收到100或300个回调（取决于mailgun回调，它们将发送多少回叫）一次）。对于用户界面，请检查下图。

在更新dataTable浏览器时，它将挂起并且没有响应。

我们正在使用以下代码：

var broadcastRef = firebase.database().ref("businessListings/" + listingId + "/broadcast");
broadcastRef.on('child_changed', function(broadcastSnapshot) {//it will call multiple time because when we received callback from mailgun at that time database will be update and we will received notification in Listener , it will get notification may be 100 or 300 at a time depends firebase database update from the mailgun.
        if (broadcastSnapshot.exists()) {
            var broadcastKey  = broadcastSnapshot.key;
            var broadcastResult = broadcastSnapshot.val();
            var activeMainTab = $('#mainTabBar li').find('a.active').html();
            allBroadCast[broadcastKey] = broadcastResult ;
            if(selectedBroadcast == broadcastKey){ // It's true when we have selected broadcast updating status.
                updateCounts(broadcastKey);  // Updating dataTable and drawing again dataTable, it will call multiple time because when we received the callback from mailgun at that time database will be updated and we will receive notification in Listener, it will get notification maybe 100 or 300 at a time depends on mailgun.
            }
        }
    });

function updateCounts(broadcastId){
        if(broadcastId in allBroadCast){
            var boradcastDetail = allBroadCast[broadcastId];   //allBroadcast is local array which have all  the broadcast.
            var contacts = boradcastDetail['contacts'];
            var table = $('.broadcast_table').DataTable(); // Initalize data table
            $.map(contacts,function(contact){
                var number = (contact.number == "" || contact.number === undefined) ? "" : contact.number.toString(); //Each number we are assing as a Id for identifying row and updating the row
                var errors = ('error' in contact) ? contact.error : "";
                var deliveryStatus = ('deliveryStatus' in contact) ? contact.deliveryStatus : 'Unknown';  // Getting updated status
                var deliveryTimeStamp = ('deliveryTimeStamp' in contact) ? contact.deliveryTimeStamp : ""; // Getting updated TimeStamp
                var deliveryDateTime = (deliveryTimeStamp != "") ? moment.unix(deliveryTimeStamp).format("MMMM DD, YYYY hh:mm A") : "-";
                var clickCount = ('clickCount' in contact) ? contact.clickCount : 0; // Getting updated Clicked Count
                var readCount = ('readCount' in contact) ? contact.readCount : 0; // Getting updated Read Count


        //Each number (#abc@g.com_Status or #abc@g.com_deliveryDateTime) we are asking as an Id for identifying row and updating the row
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_status').html(deliveryStatus);
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_deliveryDateTime').html(deliveryDateTime);
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_readCount').html(readCount);
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_clickCount').html(clickCount);
                $('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_error').html(errors);

                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_status')).invalidate(); // Updating cell for status
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_status').attr('data-order', deliveryStatus)).invalidate(); // Updating cell for status
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_deliveryDateTime')).invalidate(); // Updating cell for deliveryDateTime
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_deliveryDateTime').attr('data-order', deliveryDateTime)).invalidate();
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_readCount')).invalidate();
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_readCount').attr('data-order', readCount)).invalidate();
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_clickCount')).invalidate(); // Updating cell for Click count
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_clickCount').attr('data-order', clickCount)).invalidate();
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_error')).invalidate(); // Updating cell for Error if any
                table.cells($('#'+number.replace(/[^a-zA-Z0-9 ]/g, "")+'_error').attr('data-order', errors)).invalidate(); // Updating cell for Error if any
            });
            table.draw();  // Drawing table
        }
    }

注意：我们需要对表进行排序，然后在绘制表之后进行搜索。它在更新和重绘dataTable时处于挂页状态，因为我们可能会同时从mailGun中获得100或300个回调。

使用Firebase侦听器挂起浏览器更新数据表

0 个答案: