de Adnan Sabanovic

Cum se utilizează Laravel cu Socket.IO

Websockets Sunt cool. Acestea sunt cu adevărat utile dacă doriți să afișați activități în timp real de la utilizatorii dvs. (sau poate unele joburi la coadă).

Acum, dacă ți-e frică de cuvântul „Websockets”, Nu fi. Voi stabili instrucțiunile despre modul în care îl puteți folosi și voi fi în jur pentru a vă răspunde la întrebări, dacă aveți nevoie.

Am avut această provocare în care aveam nevoie pentru a afișa o listă a persoanelor care vizualizează în prezent o anumită adresă URL Laravel. Așa că am început să mă gândesc. O parte din mine a vrut să facă un hack rapid (din fericire, aceasta nu este partea mea cea mai puternică). În timp ce celălalt dorea să construiască ceva răcoros, reutilizabil și de lungă durată.

„De ce nu îl folosești doar pe Pusher?”

Iată chestia.

Laravel vine cu Pusher activat. Chiar dacă Pusher pare un rapid „Conectează și utilizează”Soluție (care este), vine cu limitări. Verifică https://pusher.com/pricing

Și majoritatea tutorialelor te păcălesc cu titlul lor de implementare a Websocket-urilor, atunci când în realitate vor doar să-ți ofere Pusher. (Și partea mea preferată este când se spune că puteți trece cu ușurință la socket.io)

„Vrem să avem un număr nelimitat de conexiuni”

Nu vrem să ne facem griji cu privire la limitări.

Să începem.

Folosesc vagabond / gospodărie.

Pentru aceasta, va trebui să citim despre Difuzarea evenimentelor.

Lucruri de remarcat aici (deci nu trebuie să repet lucrurile):

1. Interfață ar trebui difuzată pentru evenimente

2. Activarea rutelor de difuzare și utilizarea rutelor / canalelor.php pentru autentificarea utilizatorilor

3. Canal public – Toată lumea poate asculta

4. Canal privat – Trebuie să autorizați utilizatorii înainte ca aceștia să se alăture unui canal

5. Canal de prezență – Ca Privat, dar puteți transmite o mulțime de metadate suplimentare pe acel canal și puteți obține o listă de persoane care s-au alăturat canalului. BroadcastOn () Metoda evenimentului

Creați-vă evenimentul

php artisan make:event MessagePushed

Puteți chiar să urmați exemplul specific din documentația de difuzare a evenimentelor. (Ceea ce ar trebui cu adevărat).

Instalați Redis

Înainte de aceasta, aveam de fapt configurarea cozilor cu Supervisor / Redis / Horizon. Orizont este minunat și puteți găsi informații despre asta aici https://laravel.com/docs/5.6/horizon

După ce aveți cozile de lucru, acel eveniment MessagePush va trebui să utilizeze cozile.

Notă: Pentru ca toate acestea să funcționeze, asigurați-vă că editați fișierul .env:

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

Instalați Laravel Echo Server

Deci, această parte este de fapt locul în care instalăm serverul socket.io care este inclus în laravel-echo-server. Puteți afla aici: https://github.com/tlaverdure/laravel-echo-server

Notă: Verificați cerințele din partea de sus!

Rulați următoarele (așa cum se menționează în document)

npm install -g laravel-echo-server

Și apoi rulați init pentru a obține fișierul laravel-echo-server.json generat în rădăcina aplicației (pe care va trebui să o configurăm).

laravel-echo-server init

Odată ce ați generat fișierul laravel-echo-server.json, ar trebui să arate astfel.

{

"authHost": "http://local-website.app",

"authEndpoint": "/broadcasting/auth",

„clienți”: [

{

"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": ""

}

Notă: Dacă doriți să trimiteți acest lucru la serverul dvs. public, asigurați-vă că adăugați laravel-echo-server.json pentru dumneavoastră .gitignore. Galimentați acest fișier pe server, altfel va trebui să vă schimbați mereu autentificarea.

Rulați serverul Laravel Echo

Trebuie să-l rulați pentru a porni websockets.

laravel-echo-server start 

(în interiorul rădăcinii dvs. – unde este amplasat laravel-echo-server.json)

Ar trebui să înceapă cu succes. (Acum vom dori să adăugăm acest lucru la supervizorul de pe serverul dvs., astfel încât acesta să fie pornit automat și repornit în cazul în care se blochează)

În interiorul tău /etc/supervisor/conf.d/laravel-echo.conf (doar creați acest fișier în interiorul fișierului conf.d folder) plasați următoarele:

[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

Odată ce ați poziționat în rădăcina dvs. Laravel, puteți rula

pwd

pentru a obține calea pentru „directorul” dvs. de mai sus și prefixul „stdout_logfile”.

Utilizatorul dvs. va fi utilizatorul dvs. Linux (vagabond sau Ubuntu sau altul)

Salvați fișierul și ieșiți.

Dacă ați folosit vim laravel-echo.conf atunci când ați fost înăuntru, apăsați I (ca Istanbul) de pe tastatură pentru a edita un fișier cu VIM și apoi tastați ESC urmând: Pentru a închide fișierul și a-l salva.

Apoi, trebuie să executăm următoarele comenzi:

sudo supervisorctl stop all sudo supervisorctl reread

sudo supervisorctl reload

După aceea verificați dacă ecoul laravel rulează

sudo supervisorctl status

Instalați clientul Laravel Echo și Socket IO

npm install --save laravel-echo

npm install --save socket.io-client

Și apoi în bootstrap.js (folosesc Vue js) înregistrați-vă Echo

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',  });}

Acum verificați din nou cum să ascultați evenimentele dvs. pe anumite canale.

Urmărind documentația despre Laravel Broadcasting pe care am împărtășit-o mai sus, dacă setați broadcastOn () metoda de returnare a nou PresenceChannel (Voi explica cazul particular pe care l-am făcut, dar simțiți-vă liber să puneți întrebări în cazul în care aveți nevoie de altceva implementat. Consider că este de o complexitate mai mare decât simpla utilizare a unui canal public, astfel încât să putem reduce fără probleme) doriți să ascultați acel canal pe partea Javascript (frontend).

Iată un exemplu concret:

1. Am împins un eveniment pe un canal de prezență (mă ocupam de sondaje)

public function broadcastOn()

{

return new PresenceChannel('survey.' . $this->survey->id);

}

2. După ce împingeți evenimentul, acesta va trece prin channels.php. Acolo vrem să creăm o autorizație pentru acest utilizator. (Nu uitați să returnați o matrice pentru autorizarea canalului de prezență și nu un Boolean.)

Broadcast::channel('survey.{survey_id}', function ($user, $survey_id) {

întoarcere [

'id' => $user->id,

'image' => $user->image(),

'full_name' => $user->full_name

];

});

3. Apoi, în componenta mea VueJs care se încarcă pe pagina pe care vreau să o monitorizez, definesc o metodă care va fi inițiată de la metoda created () la încărcare:

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();

});

},

Evident, am scos un anumit cod din context, dar am această matrice „users_viewing” pentru a-mi păstra utilizatorii actuali care s-au alăturat canalului.

Și asta ar fi cu adevărat.

Sper că ai reușit să urmărești, deoarece am încercat să fiu detaliată cât pot.

Codificare fericită!

Urmărește-mă Stare de nervozitate
Adauga-ma pe LinkedIn