Hvordan bruke laravel med stikkontakt.Io

Websockets er kul. De er veldig nyttige hvis du vil vise sanntidsaktiviteter fra brukerne dine (eller kanskje noen køjobber).

Nå, hvis du er redd for ordet “websockets”, ikke vær. Jeg vil legge ned instruksjonene om hvordan du kan bruke den og vil være rundt for å svare på spørsmålene dine hvis du trenger det.

Jeg hadde denne utfordringen der jeg trengte den for å vise en liste over mennesker som for øyeblikket ser på en spesifikk URL i Laravel. Så jeg begynte å tenke. En del av meg ønsket å gjøre et raskt hack (heldigvis er det ikke den sterkeste siden av meg). Mens den andre ønsket å bygge noe kult, gjenbrukbart og langvarig.

“Hvorfor bruker du ikke bare pusher?”

Her er tingen.

Laravel kommer med pusher aktivert. Selv om pusher virker som en rask "plug and play" -løsning (som den er), kommer den med begrensninger. Sjekk ut https: // skyver.com/priser

Og de fleste av veiledningene lurer deg med tittelen på å implementere websockets når de i virkeligheten bare vil gi deg pusher. (Og favorittdelen min er når de sier at du enkelt kan bytte til stikkontakt.io)

"Vi ønsker å ha et ubegrenset antall tilkoblinger"

Vi vil ikke bekymre oss for begrensninger.

La oss begynne.

Jeg bruker Vagrant / Homestead.

For dette må vi lese om begivenhetssending.

Ting å merke seg her (så jeg trenger ikke å gjenta ting):

1. Skal bradcast -grensesnittet for hendelser

2. Aktivere kringkastingsruter og bruke ruter/kanaler.PHP for å autentisere brukere

3. Public Channel - Alle kan lytte

4. Privat kanal - Du må autorisere brukere før de kan bli med på en kanal

5. Presence Channel - som privat, men du kan passere mye ekstra metadata på den kanalen og få en liste over mennesker som har sluttet seg til kanalen.Broadcaston () Event Method

Lag arrangementet ditt

PHP Artisan Make: Event MessagePushed

Du kan til og med følge det spesifikke eksemplet i arrangementets kringkastingsdokumentasjon. (Som vi virkelig burde).

Installer Redis

Før dette hadde jeg faktisk køoppsett med Supervisor/Redis/Horizon. Horizon er flott, og du kan finne informasjon om det her https: // laravel.com/docs/5.6/Horisont

Når du har fått køene dine, må den meldingspushede hendelsen bruke køer.

Merk: For at alt dette skal fungere, må du forsikre deg om at du redigerer din .Env -fil:

Broadcast_Driver = Redis
QUEE_DRIVER = Redis (dette er faktisk fra horisontoppsettet, men det trenger vi til senere)
Redis_host = 127.0.0.1
Redis_password = null
Redis_port = 6379

Installer Laravel Echo Server

Så denne delen er faktisk der vi installerer kontakten.IO-serveren som er samlet inne i Laravel-ekkoserver. Du kan finne om det her: https: // github.com/tlaverdure/laravel-ekko-server

Merk: Kontroller kravene øverst!

Kjør følgende (som angitt i dokumentet)

NPM install -g laravel-ekko-server

Og kjør deretter init for å få din laravel-ekko-server.JSON -fil generert i approten (som vi trenger å konfigurere).

Laravel-Echo-server init

Når du har generert din laravel-ekko-server.JSON -fil, den skal se slik ut.

"Authhost": "http: // local-website.app ",
"Authendpoint": "/Broadcasting/Auth",
"Klienter": [

"Appid": "my-app-id",
"Key": "My-Key-Generated-With-Init-Command"

],
"Database": "Redis",
"Databaseconfig":
"Redis": ,
"sqlite":
"Databasepath": "/Database/Laravel-Echo-Server.sqlite "
,
"Port": "6379",
"Vert": "127.0.0.1"
,
"DevMode": False,
"Vert": NULL,
"Port": "6001",
"Protokoll": "HTTP",
"Socketio": ,
"SSLCERTPATH": "",
"Sslkeypath": "",
"SSLCERTCHAINPATH": "",
"SSLPassphrase": ""

Merk: Hvis du vil presse dette til den offentlige serveren din, må du huske å legge til laravel-ekko-server.json til din .Gitignore. Generer denne filen på serveren, ellers må du endre autoristen din hele tiden.

Kjør Laravel Echo Server

Du må kjøre den for å starte websockets.

Laravel-ekkoserverstart

(Inne i roten din-der din laravel-ekko-server.JSON er plassert)

Det skal starte med hell. (Nå vil vi legge dette til veileder på serveren din, så det startes automatisk og startes på nytt i tilfelle det krasjer)

Inne i din/etc/veileder/Conf.d/laravel-ekko.Conf (bare opprett denne filen i din Conf.d mappe) Plasser følgende:

[Program: Laravel-Echo]
Katalog =/var/www/my-website-folder
Process_name =%(program_name) s _%(prosess_num) 02d
Kommando = Laravel-ekko-serverstart
autostart = sant
autorestart = sant
Bruker = din-Linux-brukeren
numProcs = 1
Redirect_stderr = true
stdout_logfile =/var/www/my-website-folder/lagring/logger/ekko.Logg

Når du har plassert deg i Laravel Root, kan du løpe

PWD

For å få banen for "katalogen" ovenfor og "stdout_logfile" prefikset.

Brukeren din vil være din Linux -bruker (Vagrant eller Ubuntu eller noen andre)

Lagre filen og gå ut.

Hvis du brukte vim laravel-ekko.Konf så inne, trykk i (som Istanbul) på tastaturet ditt for å redigere en fil med VIM og skriv deretter ESC etter: WQ! Å lukke filen og lagre den.

Deretter må vi kjøre følgende kommandoer:

Sudo Supervisorctl stopp alle
Sudo Supervisorctl Reread
Sudo Supervisorctl Reload

Etter den sjekken for å se om Laravel Echo kjører

Sudo Supervisorctl status

Installer Laravel Echo og Socket IO -klient

NPM Install-Laravel-ekko
NPM Install.io-klient
[/c] C
Og så i bootstrap.JS (jeg bruker Vue JS) Registrer ekkoet ditt
[cc lang = "bash" rømte = "ekte" bredde = "800"]
Importer ekko fra "Laravel-ekko"
vindu.io = krever ('stikkontakt.io-klient ');
// ha dette i tilfelle du slutter å kjøre din
Laravel Echo Serverif (typeof io !== 'udefinert')
vindu.Ekko = nytt ekko (
kringkaster: 'stikkontakt.io ',
Vert: Vindu.plassering.vertsnavn + ': 6001',
);

Sjekk nå igjen hvordan du lytter etter hendelsene dine på spesifikke kanaler.

Etter dokumentasjonen om Laravel Broadcasting delte vi ovenfor, hvis du angir din kringkasting () -metode for å returnere en ny presenceanal (jeg vil forklare den spesielle saken jeg gjorde, men gjerne stille spørsmål i tilfelle du trenger noe annet implementert. Jeg synes dette er av høyere kompleksitet enn bare å bruke en offentlig kanal, slik at vi kan skalere ned uten problemer), så vil vi lytte etter den kanalen på JavaScript -siden (frontend).

Her er et konkret eksempel:

1. Jeg presset en begivenhet inn på en tilstedeværelseskanal (jeg hadde å gjøre med undersøkelser)

public Function Broadcaston ()
Returner ny presencechannel ('undersøkelse.' . $ this-> survey-> id);

2. Etter at du har presset arrangementet, vil det gå gjennom kanaler.PHP. Der inne vil vi opprette en autorisasjon for denne brukeren. (Husk å returnere en matrise for tilstedeværelseskanalautorisasjon og ikke en boolsk.)

Broadcast :: Channel ('Survey.Survey_id ', funksjon ($ bruker, $ survey_id) return
['id' => $ bruker-> id, 'image' => $ user-> image (), 'full_name' => $ user-> full_name];);

3. Så i Vuejs -komponenten min som laster på siden jeg vil overvåke, definerer jeg en metode som vil bli startet fra CATED () -metoden på belastning:

listenforBroadcast (survey_id)
Ekko.Bli med ('undersøkelse.' + Survey_id)
.her ((brukere) =>
dette.brukere_viewing = brukere;
dette.$ ForceUpDate ();
)
.bli med ((bruker) =>
hvis dette.checkifuseralReadyViewingSurvey (bruker))
dette.brukere_viewing.Push (bruker);
dette.$ ForceUpDate ();

)
.forlater ((bruker) =>
dette.fjerne evalueringseuser (bruker);
dette.$ ForceUpDate ();
);
,

Jeg trakk tydeligvis litt kode ut av konteksten her, men jeg har denne "brukere_viewing" -arrayen for å beholde mine nåværende brukere som ble med i kanalen.
Og det ville være det virkelig.

Håper du kunne følge da jeg prøvde å bli detaljert som jeg kan.

Glad koding!