Laravel Websockets not working on Production/Cpanel

Question

I have a laravel application in which i am using websockets, its working fine on local server but when i move it to cpanel and run the websocket command php artisan websocket:serve --port=3030, it says Starting the WebSocket server on port 3030... but on the application it never works

I have used laravel BeyondCode Websockets Package and using Echo to listen to the socket

Also setup a debug dashboard but its not working https://demo.hexondigital.com/laravel-websockets

in console it says enter image description here

Here is my code for config/broadcasting.php

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
                'port' => env('PUSHER_PORT', 443),
                'scheme' => env('PUSHER_SCHEME', 'https'),
                'encrypted' => true,
                'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
        ],

        'ably' => [
            'driver' => 'ably',
            'key' => env('ABLY_KEY'),
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

recources/js/bootstrap.js

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

.env

PUSHER_APP_ID=anyid
PUSHER_APP_KEY=anykey
PUSHER_APP_SECRET=anysecret
PUSHER_HOST=https://demo.hexondigital.com/draw
PUSHER_PORT=3030
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1
LARAVEL_WEBSOCKETS_PORT=3030

Just point me where i am missing something. Thanks a lot

For listening to the port i am using echo

Here is the script i am using

<script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
    <script src="{{ asset('build/assets/app-DTjr7N8Z.js') }}"></script>
    <script>
        function lottaryCall(ticket, delay) {
            return new Promise((resolve, reject) => {
                var lotteryNumbersElement = document.getElementById('lotteryNumbers');
                var numbers = ticket;
                var lotteryInterval = setInterval(function() {
                    var randomNumbers = '';
                    for (var i = 0; i < numbers.length; i++) {
                        randomNumbers += numbers.charAt(Math.floor(Math.random() * numbers.length));
                    }
                    lotteryNumbersElement.textContent = randomNumbers;
                }, 100);
                setTimeout(function() {
                    clearInterval(lotteryInterval);
                    lotteryNumbersElement.textContent = numbers;
                    resolve(); // Resolve the Promise when the animation is complete
                }, delay);
            });
        }

        Echo.channel('channel').listen("sendMessage", (e) => {
            console.log('Received sendMessage event:', e); // Log the received event
            let ticket = e.message.winner.ticket;
            let delay = parseInt(e.message.prize.spin_time) * 1000;
            let username = e.message.winner.username;
            let slug = e.message.slug.slug;
            var currentPath = window.location.pathname;
            var pathParts = currentPath.split('/');
            var lastPart = pathParts[pathParts.length - 1];

            if(slug == lastPart){
                lottaryCall(ticket, delay).then(() => {
                document.getElementById('cong').style.display = 'block';
                document.getElementById('winName').innerHTML = username;
                document.getElementById('winName').style.display = 'block';
                }).catch(error => {
                    console.error('Error in lottaryCall:', error);
                });
            }else{
                console.warn("Some Other Draw Is Done...");
            }

        });

    </script>

Answer 1

There are two possiblilities.

your hosting has blocked the specific ports or allowed a limited number of ports and you have to choose one of them.

There could be some issue with the ssl as well.