lasthourcloud/resources/views/livewire/realtime-connection.blade.php

<div x-data="{ showNotification: @entangle('showNotification') }">
    @if ($checkConnection)
        @script
            <script>
                let checkPusherInterval = null;
                let checkNumber = 0;
                checkPusherInterval = setInterval(() => {
                    if (window.Echo) {
                        if (window.Echo.connector.pusher.connection.state !== 'connected') {
                            checkNumber++;
                            if (checkNumber > 4) {
                                @if ($isNotificationEnabled)
                                    $wire.showNotification = true;
                                @endif
                                console.error(
                                    'Last Hour Cloud could not connect to the new realtime service introduced in beta.154. This will cause unusual problems on the UI if not fixed! Please check the related upstream documentation (https://coolify.io/docs/cloudflare/tunnels) or get help on Discord (https://coollabs.io/discord).)'
                                );
                                clearInterval(checkPusherInterval);
                            }
                        } else {
                            console.log('Last Hour Cloud Realtime Service is connected!');
                            clearInterval(checkPusherInterval);
                        }
                    } else {
                        @if ($isNotificationEnabled)
                            $wire.showNotification = true;
                        @endif
                        console.error(
                            'Last Hour Cloud could not connect to the new realtime service introduced in beta.154. This will cause unusual problems on the UI if not fixed! Please check the related upstream documentation (https://coolify.io/docs/cloudflare/tunnels) or get help on Discord (https://coollabs.io/discord).)'
                        );
                        clearInterval(checkPusherInterval);
                    }
                }, 1000);
            </script>
        @endscript
        <div class="toast z-[9999]" x-cloak x-show="showNotification">
            <div class="flex flex-col text-white border border-red-500 border-dashed rounded alert bg-coolgray-200">
                <span><span class="font-bold text-left text-red-500">WARNING: </span>Last Hour Cloud could not connect to the new
                    realtime service introduced in beta.154. <br>This will cause unusual problems on the UI if not
                    fixed!<br><br>Please check the
                    related upstream <a href='https://coolify.io/docs/cloudflare/tunnels' target='_blank'>documentation</a> or get
                    help on <a href='https://coollabs.io/discord' target='_blank'>Discord</a>.</span>
                <x-forms.button class="bg-coolgray-400" wire:click='disable'>Acknowledge the problem and disable this
                    popup</x-forms.button>
            </div>
        </div>
    @endif
</div>