How to clear browser buffer when max size reached of the data

Question

I have heavy live streaming using socket.io receiving around 10,000 messages per minute, problem with below code i have set Bufferlimit 2MB so once its reach max size i have shift() to reomve first item from $scope.event . But aftetr while i see $scope.event.length starts increasing and froze the browser.

How to manage heavy streaming and remove items at set BufferLimit ?

Any better approach to deal with this issue ?

main.html

<div class="panel-body display-logs" scroll-bottom="event" style="width:100%;">
                <ul style="list-style: none;">
                    <li ng-repeat="message in event" ng-class="{lastItem: $last}"><span>{{message.value}}</span></li>
                </ul>
            </div>

ctrl.js

    var Bufferlimit = 1024 * 1024 * 2;
    $scope.event = [];
    var totalReceived = 0;

    socket.on(searchEnv + 'Consumer', function(data) {
        var messageSize = getBytesForBuffer(data);
        safelyAdd({
            id: $scope.event.length,
            value: data,
            messageSize: messageSize
        });
    });

    function safelyAdd(element) {
        if (totalReceived > Bufferlimit && $scope.event.length) {
            totalReceived -= $scope.event[0].messageSize;
            $scope.event.shift(); //delete first element in $scope.event
            console.log('totalReceivedBytes', totalReceived);
            console.log('Length', $scope.event.length);
        }
        $scope.event.push(element); //then push new item..

    }

    function getBytesForBuffer(str) {
        var strBytes = str.length * 2;
        checkLimit(strBytes);
        return strBytes;
    }

function checkLimit (val){
        totalReceived += val;
    }

Answer 1

If this is all of the relevant code, then it looks like you only update totalReceived when it exceeds the buffer limit, but because you don't add the length of items received to it, it remains at zero and your array just continues to grow without limits.

I think you're just missing something along the lines of:

else { totalReceived += element.length }