Pusher private channel laravel sometimes not subscribe channel need refresh page until auth in network show up

[faisalgunanda]

Hello, i have issue when using pusher private channel laravel sometimes not subscribe channel. I need refresh page until the authentication in the network shows up

Here my code :

<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
<script>
const pusher = new Pusher('{{ config('broadcasting.connections.pusher.key') }}', {
    cluster: '{{ config('broadcasting.connections.pusher.options.cluster') }}',
    forceTLS: true,
    encrypted: true,
    authEndpoint: '/broadcasting/auth',
    auth: {
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        endpoint: '/broadcasting/auth' // Ubah dengan endpoint otentikasi yang sesuai di server Laravel Anda
    }
});

const modalWaitingExport = $("#{{ $modalIdWaitingExport }}");
const buttonDownloadFileExport = "#{{ $buttonIdDownloadFileExport }}";
const dataIdEmployee = '{{ auth()->user()->data_id }}';
const menu = "{{ $menu }}";

let urlDownloadFileExcel = "{{ $urlDownloadFileExcel }}";

// Map the menu names to your channel names
const menuToChannelMap = {
    'Leave Form': 'ExportLeave',
    'Daily Attendance': 'ExportDailyAttendance',
    'Employee': 'ExportEmployee',
    'Total Actual Working Days': 'ExportActualWorkingDays'
};

// Map the menu names to your event names
const menuToEventMap = {
    'Leave Form': 'NotifyUserOfCompletedExportLeave',
    'Daily Attendance': 'NotifyUserOfCompletedExportDailyAttendance',
    'Employee': 'NotifyUserOfCompletedExportEmployee',
    'Total Actual Working Days': 'NotifyUserOfCompletedExportActualWorkingDays'
};

const channelName = 'private-'+menuToChannelMap[menu] + '.' + dataIdEmployee;
const eventName = menuToEventMap[menu];

const channel = pusher.subscribe(channelName)
    .bind(eventName, (e) => {
        modalWaitingExport.find('.waiting').attr('hidden', true)
        modalWaitingExport.find('.ready').removeAttr('hidden');

        urlDownloadFileExcel = urlDownloadFileExcel.replace(':fileName', e.fileName);
        modalWaitingExport.find(buttonDownloadFileExport).attr('href', urlDownloadFileExcel);
    });
</script>

[benjamin-tang-pusher]

"until the authentication in the network shows up" Could you clarify this statement. Do you mean to say your Laravel auth endpoint is not receiving the request on the first page load, but it receives on it page refresh?

[faisalgunanda]

I apologize this is my fault, there is a limit on pusher connection, the problem solved when I upgrade the pusher account.