Web Socket via Pusher in Laravel - call 4 times

Question

I use Pusher on my Laravel project. When I logged any pee, poop, it broadcast those events on all my devices: phone, laptops.

I have this code.

   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
    <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
    <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('****', {
        cluster: 'us2'
    });

    var channel = pusher.subscribe('logEventChannel');
    channel.bind('logEvent', function(response) {



        var log       = response.data['json'];
        var method    = response.data['method'];

 
        console.log('\x1b[41m%s\x1b[0m',">>>>>>>>>>>>>>>>>>>>>>>>>DBEUG<<<<<<<<<<<<<<<<<<<<<<<<<");
        console.log('\x1b[41m%s\x1b[0m','method');
        console.log(method);
        console.log('\x1b[41m%s\x1b[0m',">>>>>>>>>>>>>>>>>>>>>>>>>DBEUG<<<<<<<<<<<<<<<<<<<<<<<<<");
        
                   
        console.log("SENT FROM BE", method , log);

        //====================================
        //              POST
        //====================================

        if(method == 'POST'){

            var type      = log.type;
            var id        = log.id;
            var babyId    = log.babyId;
            var updatedAt = log.updated_at;
            var timeAgo   = moment(updatedAt).fromNow();
            var time      = moment(updatedAt).format('hh:mm a');

            
            getLogMessages(type);
            getCount(type);
            shake('.badge-'+type,1);


            if(type == 'feed'){

            
                logAudit(babyId);

                blink(".timeLeft");
                blink(".nextFeed");

            }



            var row = `<tr id="tr-${id}" data-type="${type}"> <td > <a class="btn btn-${type}" > <img class="logIconSmall" src="/assets/be/img/baby/${type}.png"/> </a> </td> <td> <a onclick="showModal('${time}','${type}','${id}')" class="btn btn-link"> ${time} </a> </td> <td></td> </tr>`; 

            $('.tbody-log').prepend(row);
            blink("#tr-"+id);

        } 

        //====================================
        //              PUT
        //====================================

        if(method == 'PUT'){


            var type      = log.type;
            var id        = log.id;
            var babyId    = log.babyId;
            var updatedAt = log.updated_at;
            var timeAgo   = moment(updatedAt).fromNow();
            var time      = moment(updatedAt).format('hh:mm a');

            getLogMessages(type);
            getCount(type);
            shake('.badge-'+type,1);


            if(type == 'feed'){
            
                logAudit(babyId);
                blink(".timeLeft");
                blink(".nextFeed");
            }

            $("#tr-"+id).remove();  

            var row = `<tr id="tr-${id}" data-type="${type}"> <td > <a class="btn btn-${type}" > <img class="logIconSmall" src="/assets/be/img/baby/${type}.png"/> </a> </td> <td> <a onclick="showModal('${time}','${type}','${id}')" class="btn btn-link"> ${time} </a> </td> <td></td> </tr>`;



            $('.tbody-log').prepend(row);
            blink("#tr-"+id);


        } 

        //====================================
        //              DELETE
        //====================================

        if(method == 'DELETE'){

            var id     = log.logId;
            var type   = log.type;
            var babyId = log.babyId;


            if(type == 'feed'){
                
                logAudit(babyId);
                blink(".timeLeft");
                blink(".nextFeed");
            }

            getLogMessages(type);
            getCount(type);
            shake('.badge-'+type,1);
            blink("#tr-"+id);

            $("#tr-"+id)
            .animate({ backgroundColor: "#ef004810" }, 500 )
            .animate({ backgroundColor: "black"}, 500 )
            .fadeOut(100);
        }






        audit(babyId, id, type, method);
        getNextFeed(babyId);

    });

</script>

---

audit fn

function audit(babyId, logId, type, method) {

    var data    = {};
    data.babyId = babyId;
    data.logId  = logId;
    data.type   = type;
    data.method = method;
    
    console.log('SENT from FE',data);

    $.ajax({
        method: 'POST',
        url: '/baby/audit',
        crossDomain: true,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
            "Accept": "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
            "Cache-Control": "no-cache"
        },
        data: data,
        success: function(response){
            console.log('SUCCESS response',response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });

}

will trigger this controller fn

public function storeAudit()
{

    $inputs = Request::all();
    $logId  = $inputs['logId'];
    $babyId = $inputs['babyId'];
    $type   = $inputs['type'];
    $method = $inputs['method'];

    $baby   = Baby::where('id',$babyId)->first();

    if($baby){

        $log         = new BabyLogAudits;
        $log->type   = $type;
        $log->method = $method;
        $log->babyId = intval($babyId);
        $log->logId  = intval($logId);
        $log->note   = Visitor::get_client_ip();
        $log->save();

    }

    return response()->json($log,200);


}

---

It's working but every time, I did something, my audit function called 4 times.

Result :

https://www.bunlongheng.com/baby/1/audit?code=rithys4k&type=all

Everything seems call only 1 time only... why it ran 4 times.

Why ??

Is it because I have 4 devices in my home that visit the same link ?

Edit

Console.log show only one time. See the red banner :