A Laravel használata a Socket.IO-val

A webaljzatok klasszak . Nagyon hasznosak, ha valós idejű tevékenységeket akarnak bemutatni a felhasználóktól (vagy esetleg néhány sorban álló munkát).

Most, ha fél a „ Webhálózatokszótól , ne legyen. Le fogom adni az utasításokat, hogyan lehet használni, és szükség esetén válaszolok a kérdéseire.

Nekem ott volt ez a kihívás, ahol szükségem volt rá, hogy megmutassam azokat az embereket, akik jelenleg egy adott URL-t néznek meg a Laravelben . Szóval gondolkodni kezdtem. Részem gyorsan meg akart hackelni (szerencsére ez nem a legerősebb oldalam). Míg a másik valami klassz, újrafelhasználható és tartós dolgot akart építeni.

- Miért nem csak a Pusher-t használja?

Itt van a dolog.

A Laravel a Pusher funkcióval érkezik. Annak ellenére, hogy a Pusher gyors „ Plug and Play ” megoldásnak tűnik (ami az), korlátozásokkal jár. Nézze meg a //pusher.com/pricing oldalt

És az oktatóanyagok többsége a Websocketek megvalósításának címével csal meg, amikor a valóságban csak a Pusher-t akarják neked adni. (És a kedvenc részem, amikor azt mondják, hogy könnyedén átválthat a socket.io-ra)

"Korlátlan számú kapcsolatot szeretnénk elérni"

Nem akarunk aggódni a korlátozások miatt.

Kezdjük.

Csavargót / tanyát használok.

Ehhez olvasnunk kell az Eseményműsorszórásról.

Itt megjegyzendő dolgok (tehát nem kell ismételnem a dolgokat):

1. A Broadcast interfész az eseményekhez

2. A Broadcast útvonalak engedélyezése és a route / channels.php használata a felhasználók hitelesítéséhez

3. Nyilvános csatorna - mindenki hallgathat

4. Privát csatorna - Engedélyeznie kell a felhasználókat, mielőtt csatlakozhatnak egy csatornához

5. Jelenléti csatorna - hasonlóan a priváthoz, de sok további metaadatot adhat át azon a csatornán, és listát kaphat azokról, akik csatlakoztak a csatornához.broadcastOn () Esemény metódus

Hozz létre eseményt

php artisan make:event MessagePushed

Akár követheti a konkrét példát az Event Broadcasting dokumentációjában. (Amire nekünk kellene igazán).

Telepítse a Redist

Ezt megelőzően ténylegesen sorokat állítottam fel a Supervisor / Redis / Horizon alkalmazással. A Horizon nagyszerű, és erről itt talál információt: //laravel.com/docs/5.6/horizon

Amint a sorok működnek, az adott MessagePushed eseménynek sorokat kell használnia.

Megjegyzés : Ahhoz, hogy mindez működjön, mindenképpen szerkessze a .env fájlt:

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

Telepítse a Laravel Echo Server alkalmazást

Tehát valójában erre a részre telepítjük a socket.io szervert, amely a laravel-echo-szerveren belül van csomagolva. Itt találhat róla: //github.com/tlaverdure/laravel-echo-server

Megjegyzés : Ellenőrizze a követelményeket a tetején!

Futtassa a következőket (a dokumentumban leírtak szerint)

npm install -g laravel-echo-server

Ezután futtassa az init-t annak érdekében, hogy a laravel-echo-server.json fájlt az alkalmazásgyökérben hozza létre (amelyet konfigurálnunk kell).

laravel-echo-server init

Miután létrehozta a laravel-echo-server.json fájlt, annak így kell kinéznie.

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

Megjegyzés : Ha ezt a nyilvános kiszolgálóra akarja küldeni, feltétlenül adja hozzá a laravel-echo-server.json fájlt a .gitignore fájljához. G enerate ezt a fájlt a szerveren, különben meg kell változtatni a authHost egész idő alatt.

Futtassa a Laravel Echo szervert

A webhálózatok indításához futtatnia kell.

laravel-echo-server start 

(a gyökérben - ahol a laravel-echo-server.json található)

Sikeresen el kell indulnia. (Most hozzá akarjuk adni ezt a szerver felügyelőjéhez, így automatikusan elindul és újraindul, ha összeomlik)

Az /etc/supervisor/conf.d/laravel-echo.conf fájlban (csak hozza létre ezt a fájlt a conf.d mappában) helyezze el a következőket:

[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

Miután elhelyezte a Laravel gyökerét, futhat

pwd

hogy megkapja a fenti 'könyvtár' és az 'stdout_logfile' előtag elérési útját.

A felhasználó lesz a Linux-felhasználó (csavargó vagy Ubuntu vagy más)

Mentse a fájlt, és menjen ki.

Ha a vim laravel-echo.conf fájlt használta, akkor amikor bent van, nyomja meg az I billentyűt (például Isztambul) a billentyűzeten egy fájl szerkesztéséhez a VIM segítségével, majd írja be az ESC parancsot: wq! A fájl bezárása és mentése.

Ezután a következő parancsokat kell futtatnunk:

sudo supervisorctl stop all sudo supervisorctl reread
sudo supervisorctl reload

Ezt követően ellenőrizze, hogy fut-e a laravel visszhang

sudo supervisorctl status

Telepítse a Laravel Echo és a Socket IO klienst

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

Ezután regisztrálja az Echo-t a bootstrap.js fájlban (a Vue js-t használom)

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

Most ellenőrizze újra, hogyan hallgathatja meg eseményeit bizonyos csatornákon.

A fent megosztott Laravel Broadcasting dokumentációját követve, ha úgy állítja be a broadcastOn () metódust, hogy új PresenceChannelt adjon vissza (elmagyarázom a konkrét esetet, amit tettem, de nyugodtan tegyen fel kérdéseket arra az esetre, ha valami másra lenne szükség. Megtalálom ezt hogy bonyolultabb legyen, mint egyszerűen egy nyilvános csatorna használata, így problémamentesen kicsinyíthetjük), akkor azt a csatornát szeretnénk hallgatni a Javascript oldalon (frontend).

Itt van egy konkrét példa:

  1. Toltam egy eseményt egy jelenléti csatornára (felmérésekkel foglalkoztam)
public function broadcastOn()
{
return new PresenceChannel('survey.' . $this->survey->id);
}

2. Miután megnyomta az eseményt, a csatornákon fog haladni.php. Ott szeretnénk létrehozni egy engedélyt a felhasználó számára. (Ne felejtsen el egy tömböt visszaadni a jelenléti csatorna engedélyezéséhez, és nem logikai értéket.)

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

3. Ezután a figyelni kívánt oldalon betöltődő VueJs komponensemben meghatározok egy metódust, amelyet a create () metódus indít betöltéskor:

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

Nyilvánvalóan kihúztam egy kis kódot a kontextusból, de megvan ez a 'users_viewing' tömb, hogy megtartsam a csatornámhoz csatlakozó jelenlegi felhasználóimat.

És ez tényleg az lenne.

Remélem, tudta követni, ahogy megpróbáltam részletezni, amennyire csak tudtam.

Boldog kódolást!

Kövess a Twitteren

Vegyen fel a LinkedIn-re