Come usare Laravel con la presa.Io

Websockets sono alla moda. Sono davvero utili se vuoi mostrare attività in tempo reale dai tuoi utenti (o forse alcuni lavori in coda).

Ora, se hai paura della parola "websocket", non essere. Posterò le istruzioni su come puoi usarlo e sarò in giro per rispondere alle tue domande se ne hai bisogno.

Ho avuto questa sfida in cui ne avevo bisogno per mostrare un elenco di persone che stanno attualmente visualizzando un URL specifico Laravel. Quindi ho iniziato a pensare. Una parte di me voleva fare un rapido hack (per fortuna non è il mio lato più forte). Mentre l'altro voleva costruire qualcosa di interessante, riutilizzabile e di lunga durata.

“Perché non usi solo lo spinto?"

Ecco la cosa.

Laravel viene fornito con Pusher abilitato. Anche se Pusher sembra una rapida soluzione "plug and play" (che è), viene fornito con limiti. Dai un'occhiata a https: // pusher.com/prezzi

E la maggior parte dei tutorial ti inganna con il loro titolo di implementazione di websocket quando in realtà vogliono solo darti il ​​pusher. (E la mia parte preferita è quando dicono che puoi passare facilmente alla presa.io)

"Vogliamo avere un numero illimitato di connessioni"

Non vogliamo preoccuparci delle limitazioni.

Iniziamo.

Sto usando Vagrant / Homestead.

Per questo, dovremo leggere la trasmissione di eventi.

Cose da notare qui (quindi non devo ripetere le cose):

1. Interfaccia dovrebbe broadcast per gli eventi

2. Abilitare i percorsi di trasmissione e utilizzare percorsi/canali.PHP per autenticare gli utenti

3. Canale pubblico - Tutti possono ascoltare

4. Canale privato: è necessario autorizzare gli utenti prima che possano unirsi a un canale

5. Canale di presenza - come privato ma puoi passare molti metadati aggiuntivi su quel canale e ottenere un elenco di persone che si sono unite al canale.Metodo dell'evento Broadcaston ()

Crea il tuo evento

PHP Artisan Make: Message EventPushed

Puoi anche seguire l'esempio specifico nella documentazione di trasmissione di eventi. (Che dovremmo davvero).

Installa Redis

Prima di questo, ho effettivamente installato le code con il supervisore/Redis/Horizon. Horizon è fantastico e puoi trovare informazioni al riguardo qui https: // Laravel.com/docs/5.6/orizzonte

Una volta che le tue code funzionano, quell'evento di messaggi dovrà utilizzare le code.

Nota: per tutto ciò che funzioni, assicurati di modificare il tuo .File di Env:

Broadcast_Driver = Redis
Queue_driver = Redis (questo è in realtà dalla configurazione dell'orizzonte, ma ne avremo bisogno per dopo)
Redis_host = 127.0.0.1
Redis_Password = null
Redis_port = 6379

Installa il server Laravel Echo

Quindi questa parte è in realtà dove installiamo socket.Server IO in bundle all'interno di Laravel-Echo-Server. Puoi trovarlo qui: https: // github.com/tlaverdure/laravel-echo-server

Nota: controlla i requisiti in alto!

Esegui quanto segue (come indicato nel documento)

NPM Installa -g Laravel-Echo-Server

E poi eseguire l'inizio per ottenere il tuo server Laravel-Echo.File JSON generato nella root dell'app (che dovremo configurare).

Laravel-Echo-Server Init

Una volta che hai generato il tuo laravel-echo-server.file json, dovrebbe sembrare così.

"Authhost": "http: // local-webite.app ",
"Authendpoint": "/Broadcasting/Auth",
"Clienti": [

"Appid": "My-app-id",
"Key": "My-Key-Generato-With-Init-comand"

",
"Database": "Redis",
"DatabaseConfig":
"Redis": ,
"sqlite":
"Databasepath": "/database/laravel-echo-server.sqlite "
,
"Porta": "6379",
"host": "127.0.0.1 "
,
"DevMode": False,
"host": null,
"Porta": "6001",
"Protocollo": "HTTP",
"Socketio": ,
"SSLCertPath": "",
"SSLKEYPATH": "",
"SSLCertChainPath": "",
"sslpassphrase": ""

Nota: se si desidera spingere questo sul tuo server pubblico, assicurati di aggiungere laravel-echo-server.json al tuo .gitignore. Genera questo file sul server, altrimenti dovrai cambiare sempre l'autenticazione.

Esegui il tuo server Laravel Echo

Devi eseguirlo per avviare WebSockets.

Laravel-Echo-Server inizia

(Inside Your Root-dove il tuo Laravel-Echo-Server.JSON è posto)

Dovrebbe iniziare con successo. (Ora vorremo aggiungere questo al supervisore sul tuo server, quindi viene avviato automaticamente e riavviato nel caso in cui si blocchi)

All'interno del tuo/etc/supervisore/conf.D/Laravel-Echo.conf (basta creare questo file all'interno del tuo conf.cartella d) Posizionare quanto segue:

[Programma: Laravel-Echo]
Directory =/var/www/my-webolder
Process_name =%(Program_Name) S _%(Process_num) 02D
Command = Laravel-Echo-Server Start
Autostart = true
autorestart = true
utente = tuo-linux-uker
numProcs = 1
redirect_stderr = true
stdout_logfile =/var/www/my-website-filoder/Storage/logs/echo.tronco d'albero

Una volta posizionato nella tua radice di Laravel, puoi eseguire

PWD

Per ottenere il percorso per la tua "directory" sopra e "stdout_logfile".

Il tuo utente sarà il tuo utente Linux (Vagrant o Ubuntu o qualche altro)

Salva il file ed esci.

Se hai usato Vim Laravel-Echo.Conf quindi quando dentro, premi I (come Istanbul) sulla tastiera per modificare un file con VIM e quindi digitare ESC seguendo: WQ! Per chiudere il file e salvarlo.

Successivamente, dobbiamo eseguire i seguenti comandi:

SUDO SUPERVISORCTL STOP tutto
SUDO SUPERVISORCTL READ
Sudo Supervisorctl RELADL

Dopo quel controllo per vedere se Laravel Echo è in esecuzione

Stato Supervisorctl sudo

Installa il client di eco e socket IO

NPM Installa-Save Laravel-Echo
NPM Installa -Socket -save.io-client
[/c] c
E poi nel tuo bootstrap.JS (sto usando vue js) Registra la tua eco
[cc lang = "Bash" Escaped = "True" width = "800"]
Eco di importazione da "Laravel-Echo"
finestra.Io = Requisito (Socket.io-client ');
// ha questo nel caso in cui smetti di eseguire il tuo
laravel echo serverif (typeof io !== 'undefined')
finestra.Echo = new echo (
Emittente: presa ".io ',
Host: finestra.posizione.Hostname + ': 6001',
);

Ora controlla come ascoltare i tuoi eventi su canali specifici.

Seguendo la documentazione su Laravel Broadcasting abbiamo condiviso sopra, se imposti il ​​tuo metodo Broadcaston () per restituire un nuovo PresenceChannel (spiegherò il caso particolare che ho fatto, ma sentiti libero di porre domande nel caso in cui abbia bisogno di qualcos'altro implementato. Trovo che questo sia di maggiore complessità rispetto al semplice utilizzo di un canale pubblico, quindi possiamo ridimensionare senza problemi), quindi vogliamo ascoltare quel canale sul lato JavaScript (frontend).

Ecco un esempio concreto:

1. Ho spinto un evento su un canale di presenza (avevo a che fare con i sondaggi)

funzione pubblica broadcaston ()
Restituisci il nuovo PresenceChannel ('sondaggio.' . $ this-> sondaggio-> id);

2. Dopo aver spinto l'evento, passerà attraverso i canali.PHP. Dentro vogliamo creare un'autorizzazione per questo utente. (Ricorda di restituire un array per l'autorizzazione del canale di presenza e non un booleano.)

Broadcast :: Channel ('Sondaggio.Survey_id ', funzione ($ user, $ sondaggi_id) return
['id' => $ user-> id, 'image' => $ user-> image (), 'full_name' => $ user-> full_name];);

3. Quindi nel mio componente VUEJS che si carica sulla pagina che voglio monitorare definire un metodo che verrà avviato dal metodo creato () sul carico:

lischedForBraadcast (Survey_id)
Eco.Iscriviti ('Sondaggio.' + sondaggio_id)
.qui ((utenti) =>
Questo.utenti_viewing = utenti;
Questo.$ forceUpdate ();
)
.joining ((user) =>
se questo.checkIfUseraLreadyViewSurvey (utente))
Questo.utenti_viewing.push (utente);
Questo.$ forceUpdate ();

)
.Leaving ((User) =>
Questo.RimuoviViewinguser (utente);
Questo.$ forceUpdate ();
);
,

Ovviamente ho tirato fuori un po 'di codice dal contesto qui, ma ho questo array "utenti_viewing" per mantenere i miei attuali utenti che si sono uniti al canale.
E questo sarebbe davvero.

Spero che tu sia stato in grado di seguire perché ho cercato di essere dettagliato possibile.

Codice felice!