'Laravel Vue websockets running but not working on unbutu server

Hello laravel websocket is working on local but when I deployed on ubuntu server it showing the following error.

http://sockjs.pusher.com/pusher/app/MY_KEY/288/iqbkjca8/xhr_streaming?protocol=7&client=js&version=7.0.6&t=1644557389290&n=3

I checkout a lot of post about this laravel vue websockets issue but that doesn't worked for me... pusher-js version: "pusher-js": "^7.0.3", laravel echo version: "laravel-echo": "^1.10.0",

someone mentioned that change pusher version to 5.1.1 I do that but that also doesn't worked for me...

here is broadcasting.php

'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'),
            'encrypted' => true,
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'http'
        ],
    ],

here is on vue side

import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'thisIsA1xicP0rTaLD3v310p3DByHBilalKhanY0safZai',
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
});

here is console screenshot

here is console screenshot



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source