Laravel Echo socket.io - https 443 - ReverseProxy
Wer seinen eigenen WebSocket-Server betreiben will kann, Anstelle von Pusher, auch Laravel ECHO in Kombination mit socket.io verwenden.
Sollte der ECHO-Server direkt am Webserver betrieben werden, kann dieser nicht denselben Port verwenden: der Browser muss sich zusätzlich auf einen anderen Port verbinden, was bei bestimmten Internetzugängen, speziell beim Einsatz eines Proxys zu Problemen führt. Alternativ kann der socket.io-Traffic auch über einen Reverse-Proxy am Webserver umgeleitet werden. Beim Einsatz eines Reverse-Proxy kann sich der Browser sowohl auf die Webseite, als auch auf den ECHO Server über Port 443 verbinden.
Redis:
Installation, siehe: www.libe.net/ubuntu-redis
.env
BROADCAST_DRIVER='redis'
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=???
REDIS_PORT=6379
Konsole
npm install laravel-echo-server
laravel-echo-server init
? Do you want to run this server in development mode? Yes
? Which port would you like to serve from? 6001
? Which database would you like to use to store presence channel members? redis
? Enter the host of your Laravel authentication server. https://laravel.libe.net
? Will you be serving on http or https? https
? Enter the path to your SSL cert file. /usr/local/psa/var/modules/letsencrypt/etc/live/domain/cert.pem
? Enter the path to your SSL key file. /usr/local/psa/var/modules/letsencrypt/etc/live/domain/privkey.pem
? Do you want to generate a client ID/Key for HTTP API? No
? Do you want to setup cross domain access to the API? No
? What do you want this config to be saved as? laravel-echo-server.json
Configuration file saved. Run laravel-echo-server start to run server.
Configuration file saved. Run laravel-echo-server start to run server.
npm install -save socket.io-client
npm install --save laravel-echo
laravel-echo-server.json Port 6001 https:
{
"authHost": "https://domain",
"authEndpoint": "/broadcasting/auth",
"clients": [],
"database": "redis",
"databaseConfig": {
"redis": { "port": "6379",
"host": "127.0.0.1",
"password": "???x"},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
}
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "https",
"socketio": {},
"sslCertPath": "/usr/local/psa/var/modules/letsencrypt/etc/live/domain/fullchain.pem",
"sslKeyPath": "/usr/local/psa/var/modules/letsencrypt/etc/live/domain/privkey.pem",
"sslCertChainPath": "",
"sslPassphrase": "",
"subscribers": {
"http": true,
"redis": true
},
"apiOriginAllow": {
"allowCors": false,
"allowOrigin": "",
"allowMethods": "",
"allowHeaders": ""
}
}
Wer seinen Webserver für Testzwecke in einem frühen Entwicklungsstadium mit HTTP Basic Authentication abgesichert hat, kann die Funktion durch das Hinzufügen der Anmeldeinformation zu authHost testen:
{ "authHost": "https://[username]:[password]@[hostname]", }
ReverseProxy 443 https:
laravel-echo-server.json
{
"authHost": "https://domain",
"authEndpoint": "/broadcasting/auth",
"clients": [],
"database": "redis",
"databaseConfig": {
"redis": { "port": "6379",
"host": "127.0.0.1",
"password": "???"},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
}
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertChainPath": "",
"sslPassphrase": "",
"subscribers": {
"http": true,
"redis": true
},
"apiOriginAllow": {
"allowCors": false,
"allowOrigin": "",
"allowMethods": "",
"allowHeaders": ""
}
}
Für die Reverse-Proxy-Einstellung musste ich folgende Zeilen in der Webserverkonfiguration hinzufügen.
/var/www/vhosts/system/domain/conf/httpd.conf:
#socket.io
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/socket.io [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule /(.*) ws://localhost:6001/$1 [P,L]
ProxyPass /socket.io http://127.0.0.1:6001/socket.io
ProxyPassReverse /socket.io http://127.0.0.1:6001/socket.io
</VirtualHost>
Start
Sollte die Reverse-Proxy-Konfiguration funktionieren, antwortet der Webserver beim Aufruf von https://domain/socket.io mit "Cannot GET /socket.io".
Damit der ECHO Server auch nach einem Reboot wieder aktiv ist kann dieser mittels Supervisor gestartet werden,
dazu für Debian oder Ubuntu folgenden Befehl im Terminal ausführen: sudo apt-get install supervisor
Dann eine neue Datei anlegen in /etc/supervisor/conf.d z.B. laravel-echo.conf mit folgendem Inhalt:
[program:laravel-echo]
directory=/var/www/vhosts/domain/laravelfolder
process_name=%(program_name)s_%(process_num)02d
command=laravel-echo-server start
autostart=true
autorestart=true
user=root
numprocs=1
redirect_stderr=true
stdout_logfile=/var/www/vhosts/domain/laravelfolder/storage/logs/echo.log
sudo supervisorctl stop all
sudo supervisorctl reread
sudo supervisorctl reload
Der Status kann mit
supervisorctl status
überprüft werden ...
/resources/js/bootstrap.js
import Echo from "laravel-echo"
window.io = require('socket.io-client');
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname
});
Normal müsste hier bei "host:" auch noch der Port 6001 angegeben werden,
dank der Reverse-Proxy Einstellung benötigen wir an dieser Stelle den Port 6001 nicht mehr ...
Nach dem Anpassen der Datei bootstrap.js muss natürlich npm run dev ausgeführt werden um die Assets zu kompilieren
{{percentage}} % positiv