Laravel-echo receives events but doesn't join channel listeners

Question

To start with, I have a real-time chat app (Vue as frontend, Laravel as backend)
On localhost it works perfectly, but not on production.

I've noticed that I do receive events, but I've never been able to join any channel.
Here is all the information, I hope you have any ideas on how to solve it. Thanks!


Main.js (laravel-echo / socket.io connection):

import Echo from "laravel-echo"
window.io = require('socket.io-client')

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'https://example.com/socket.io',
    auth: {
        headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
    }
});

Chat component (listener):

window.Echo.private(`chat.${this.user.id}`)
.listen('NewMessage', (e) => {
    console.log(e.message);
});

Nginx config:

server {
    server_name example.com www.example.com;

    root /var/www/html/example/api/public/;    
    index index.html index.php;

    location / {
        root /var/www/html/example/web/dist/;
        try_files $uri $uri/ /index.html;
    }

    location /socket.io {
        proxy_pass http://localhost:6001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /api {
        try_files $uri $uri/ /index.php$is_args$args;
    }


    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.0-fpm.sock;
    }
}

Laravel-echo config:

{
    "authHost": "https://example.com/api",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "xxx",
            "key": "xxxxxxx"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "*",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

Answer 1

As it's working in local but not in production, you need to check if socket.io path on your domain is proxied to laravel echo server. To check this path run this path in browser and it must return an array. if it's not proxied you will be redirected according to laravel rules.

https://example.com/socket.io must return:

{"code":0,"message":"Transport unknown"}