'How to launch laravel-echo server on production?
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"
}
}
Solution 1:[1]
Try changing this host: 'https://example.com/socket.io'
to host: 'https://example.com'
Solution 2:[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,
}
}
});
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 | Ikechukwu |
Solution 2 | David |