My prod. stack:
- Vue.js CLI – https://example.com
- 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
Try changing this
host: 'https://example.com/socket.io'
tohost: 'https://example.com'
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:
add in ngnix:
in the vue client: