de Adnan Sabanovic
Conţinut
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:
- 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
#Cum #utilizează #Laravel #SocketIO
Cum se utilizează Laravel cu Socket.IO