'Laravel Echo, Redis, Socket IO and Laravel-echo-server stopped working and need ideas

I'm having issues with getting laravel echo to work after moving to Ubuntu 20.04 on my production server. It use to work on 18.04. Both have the same Node version (my dev is v14). I'm wondering if anyone else is having issues or possible solutions. Btw, I tried switching to laravel-websockets and Soketi but those were a nightmare and I spent 3 days just trying to get them to connect (no luck).

In moving to Ubuntu 20.04, I updated package.json. I know there are issues with socket io and laravel-echo-server so those remained the same.

In the browser, there are no network errors. The socket io is reached. As well, nothing throwing an error in the console. Setting debug, I see the export event in Redis monitor and laravel-echo-server. However, Echo in the javascript never picks it up.

Would appreciate any feedback.

Ubuntu 20.04
NodeJs 14.19.0
Laravel-echo-server: 1.6.3
Laravel Echo: 1.11.3
Socket IO: 2.3.0
Broadcast driver: Redis
Queue: Beanstalk

(Domain and App info hidden)

.env file

ECHO_ID=APP_ID
ECHO_KEY=APP_KEY
ECHO_PORT=6001
ECHO_SSL_CRT=/etc/ssl/certs/DOMAIN.crt
ECHO_SSL_KEY=/etc/ssl/certs/DOMAIN.key

BROADCAST_DRIVER=redis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

QUEUE_DRIVER=beanstalkd

laravel-echo-server.json

{
    "authHost": "https://DOMAIN",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "APP_ID",
            "key": "APP_KEY"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "port": "6379",
            "host": "127.0.0.1"
        },
        "sqlite": {}
    },
    "devMode": false,
    "host": null,
    "port": "6001",
    "protocol": "https",
    "socketio": {
        "cors": {
            "origin": "https://DOMAIN",
            "credentials": true
        }
    },
    "sslCertPath": "/etc/ssl/certs/DOMAIN.crt",
    "sslKeyPath": "/etc/ssl/certs/DOMAIN.key",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

app.js

import Echo from "laravel-echo"
window.io = require("socket.io-client");
window.Echo = new Echo({
    broadcaster: "socket.io",
    host: window.location.hostname
});

nginx site.conf (using proxy)

location /socket.io/ {
    proxy_pass https://127.0.0.1:6001/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-For $remote_addr;
}

admin.js

Echo.channel('export')
    .listen('PollExportEvent', (e) => {
        console.log('export called');
    });

PollExportEvent.php

class PollExportEvent extends Event implements ShouldBroadcast
{

    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * @var array
     */
    public $data = [];

    /**
     * The name of the queue on which to place the event.
     *
     * @var string
     */
    public $broadcastQueue;

    /**
     * PollExportEvent constructor.
     * @param $data
     */
    public function __construct($data)
    {
        $this->data = $data;
        $this->broadcastQueue = 'event_tube';
    }

    /**
     * Get the channels the event should be broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel
     */
    public function broadcastOn(): Channel
    {
        return new Channel('export);
    }
}


Solution 1:[1]

Added the port for the host and removed my Nginx config and now it's working.

import Echo from "laravel-echo"
window.io = require("socket.io-client");
window.Echo = new Echo({
    broadcaster: "socket.io",
    host: window.location.hostname + ':6001'
});

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 rbruhn