skip to Main Content

My prod. stack:

  1. Vue.js CLI – https://example.com
  2. Laravel API – https://example.com/api

I’ve already created a real-time chat using laravel-echo server & socket.io on my localhost.
However, I want to run it on my production server. For that purpose I use nginx.

The problem is that when I run laravel-echo-server start it launches successfully but gives no response when I access my site from web browser. (No use joined)

I’ve already rebuilt vue app, cleared laravel cache and restarted nginx service.

At /etc/nginx/sites-enabled/default I have:

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";
        proxy_set_header Host $host;
    }

    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;
    }
}

My main.js file where I connect to web sockets:

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')}`
        }
    }
});

My laravel-echo.server.json:

{
    "authHost": "https://example.com/api",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            appId: "xxxxx",
            key: "xxxxx"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": false,
    "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"
    }
}

2

Answers


  1. Try changing this host: 'https://example.com/socket.io' to host: 'https://example.com'

    Login or Signup to reply.
  2. I kept the sites with normal https in the laravel-echo config, but I removed ssl rules such as certificate etc… and instead of pointing to localhost I pointed to the host ip changing only the ports:

    {
        "authHost": "https://example.com/api",
        "authEndpoint": "/broadcasting/auth",
        "clients": [
            {
                appId: "xxxxx",
                key: "xxxxx"
            }
        ],
        "database": "redis",
        "databaseConfig": {
               "redis": {
                            "port": "6379",
                            "host": "127.0.0.1"
                    },
            "sqlite": {
                "databasePath": "/database/laravel-echo-server.sqlite"
            }
        },
        "devMode": false,
        "host": 127.0.0.1,
        "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"
        }
    }
    

    add in ngnix:

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

    in the vue client:

        window.Echo = new Echo({
            broadcaster: 'socket.io',
            host: window.location.origin, // sem a porta
            auth: {
                headers: {
                    Authorization: 'Bearer ' + bearerToken,
                }
            }
        });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search