Sådan bruges Laravel med Socket.IO

Websockets er seje. De er virkelig nyttige, hvis du vil vise aktiviteter i realtid fra dine brugere (eller måske nogle køjobs).

Hvis du er bange for ordet " Websockets ", skal du ikke være det. Jeg vil lægge instruktionerne til, hvordan du kan bruge det, og vil være omkring for at besvare dine spørgsmål, hvis du har brug for det.

Jeg havde denne udfordring, hvor jeg havde brug for den for at vise en liste over mennesker, der i øjeblikket ser en bestemt URL i Laravel . Så jeg begyndte at tænke. En del af mig ville lave et hurtigt hack (det er heldigvis ikke den stærkeste side af mig). Mens den anden ønskede at bygge noget køligt, genanvendeligt og holdbart.

"Hvorfor bruger du ikke bare Pusher?"

Her er sagen.

Laravel leveres med Pusher aktiveret. Selvom Pusher virker som en hurtig “ Plug and play ” -løsning (som den er), kommer den med begrænsninger. Tjek //pusher.com/pricing

Og de fleste tutorials narre dig med deres titel til implementering af Websockets, når de i virkeligheden bare vil give dig Pusher. (Og min yndlingsdel er, når de siger, at du nemt kan skifte til stikkontakt. Io)

"Vi ønsker at have et ubegrænset antal forbindelser"

Vi ønsker ikke at bekymre os om begrænsninger.

Lad os begynde.

Jeg bruger vagrant / homestead.

Til dette bliver vi nødt til at læse om Broadcasting af begivenheder.

Ting at bemærke her (så jeg behøver ikke gentage ting):

1. ShouldBroadcast-interface til begivenheder

2. Aktivering af Broadcast-ruter og brug af routes / channel.php til at godkende brugere

3. Offentlig kanal - Alle kan lytte

4. Privat kanal - Du skal godkende brugere, før de kan deltage i en kanal

5. Tilstedeværelseskanal - Som privat, men du kan videregive en masse ekstra metadata på den kanal og få en liste over personer, der har tilmeldt sig kanalen.broadcastOn () Begivenhedsmetode

Opret din begivenhed

php artisan make:event MessagePushed

Du kan endda følge det specifikke eksempel i dokumentationen til Event Broadcasting. (Som vi virkelig burde).

Installer Redis

Før dette havde jeg faktisk køopsætninger med Supervisor / Redis / Horizon. Horizon er fantastisk, og du kan finde oplysninger om det her //laravel.com/docs/5.6/horizon

Når du har dine køer i gang, skal den MessagePushed-begivenhed bruge køer.

Bemærk : For at alt dette skal fungere, skal du sørge for at redigere din .env-fil:

BROADCAST_DRIVER=redis
QUEUE_DRIVER=redis
(this is from the horizon setup actually, but we will need that for later)
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

Installer Laravel Echo Server

Så denne del er faktisk, hvor vi installerer socket.io-server, der er samlet inde i laravel-echo-server. Du kan finde ud af det her: //github.com/tlaverdure/laravel-echo-server

Bemærk : Kontroller kravene øverst!

Kør følgende (som angivet i dokumentet)

npm install -g laravel-echo-server

Og kør derefter init for at få din laravel-echo-server.json-fil genereret i appens rod (som vi bliver nødt til at konfigurere).

laravel-echo-server init

Når du har genereret din laravel-echo-server.json-fil, skal den se sådan ud.

{
"authHost": "//local-website.app",
"authEndpoint": "/broadcasting/auth",
"clients": [
{
"appId": "my-app-id",
"key": "my-key-generated-with-init-command"
}
],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
},
"port": "6379",
"host": "127.0.0.1"
},
"devMode": false,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": ""
}

Bemærk : Hvis du vil skubbe dette til din offentlige server, skal du sørge for at tilføje laravel-echo-server.json til din .gitignore. G enerer denne fil på serveren, ellers skal du ændre din authHost hele tiden.

Kør din Laravel Echo Server

Du skal køre det for at starte websockets.

laravel-echo-server start 

(inde i din rod - hvor din laravel-echo-server.json er placeret)

Det skal starte med succes. (Nu vil vi føje dette til supervisor på din server, så det startes automatisk og genstartes, hvis det går ned)

Inde i din /etc/supervisor/conf.d/laravel-echo.conf (bare opret denne fil i din conf.d- mappe) skal du placere følgende:

[program:laravel-echo]
directory=/var/www/my-website-folder
process_name=%(program_name)s_%(process_num)02d
command=laravel-echo-server start
autostart=true
autorestart=true
user=your-linux-user
numprocs=1
redirect_stderr=true
stdout_logfile=/var/www/my-website-folder/storage/logs/echo.log

Når du har placeret dig i din Laravel-rod, kan du løbe

pwd

for at få stien til din 'bibliotek' ovenfor og 'stdout_logfile' præfiks.

Din bruger vil være din Linux-bruger (vagrant eller Ubuntu eller en anden)

Gem filen og gå ud.

Hvis du brugte vim laravel-echo.conf, når du er inde, skal du trykke på I (som Istanbul) på dit tastatur for at redigere en fil med VIM og derefter skrive ESC som følger: wq! For at lukke filen og gemme den.

Dernæst skal vi køre følgende kommandoer:

sudo supervisorctl stop all sudo supervisorctl reread
sudo supervisorctl reload

Kontroller derefter, om laravel ekko kører

sudo supervisorctl status

Installer Laravel Echo og Socket IO-klient

npm install --save laravel-echo
npm install --save socket.io-client

Og derefter registrere dit Echo i din bootstrap.js (jeg bruger Vue js)

import Echo from "laravel-echo"window.io = require('socket.io-client');
// Have this in case you stop running your laravel echo server
if (typeof io !== 'undefined') { window.Echo = new Echo({ broadcaster: 'socket.io', host: window.location.hostname + ':6001', });}

Tjek nu igen, hvordan du lytter til dine begivenheder på bestemte kanaler.

Efter dokumentationen om Laravel Broadcasting, som vi delte ovenfor, hvis du indstiller din broadcastOn () -metode til at returnere en ny PresenceChannel (jeg vil forklare den særlige sag, jeg gjorde, men du er velkommen til at stille spørgsmål, hvis du har brug for noget andet implementeret. Jeg finder dette for at have højere kompleksitet end blot at bruge en offentlig kanal, så vi kan skalere ned uden problemer) så vil vi lytte til den kanal på Javascript-siden (frontend).

Her er et konkret eksempel:

  1. Jeg skubbede en begivenhed ind på en tilstedeværelse kanal (jeg havde at gøre med undersøgelser)
public function broadcastOn()
{
return new PresenceChannel('survey.' . $this->survey->id);
}

2. Når du har skubbet til begivenheden, går den gennem kanaler.php. Derinde vil vi oprette en autorisation for denne bruger. (Husk at returnere en matrix for tilstedeværelse af kanalgodkendelse og ikke en boolsk.)

Broadcast::channel('survey.{survey_id}', function ($user, $survey_id) {
return [
'id' => $user->id,
'image' => $user->image(),
'full_name' => $user->full_name
];
});

3. Derefter definerer jeg i min VueJs-komponent, der indlæses på den side, jeg vil overvåge, en metode, der startes fra oprettet () metode ved indlæsning:

listenForBroadcast(survey_id) {
Echo.join('survey.' + survey_id)
.here((users) => {
this.users_viewing = users;
this.$forceUpdate();
})
.joining((user) => {
if (this.checkIfUserAlreadyViewingSurvey(user)) {
this.users_viewing.push(user);
this.$forceUpdate();
}
})
.leaving((user) => {
this.removeViewingUser(user);
this.$forceUpdate();
});
},

Jeg trak tydeligvis noget kode ud af konteksten her, men jeg har denne 'users_viewing' array for at beholde mine nuværende brugere, der sluttede sig til kanalen.

Og det ville være det virkelig.

Håber du var i stand til at følge, da jeg forsøgte at blive detaljeret, som jeg kan.

God kodning!

Følg mig på Twitter

Tilføj mig på LinkedIn