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

 

positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE f├╝r deine Bewertung!

Aktualisiert: 29.12.2018 von Bernhard |­čöö


Fragen / Kommentare