Jak używać laravel z gniazdem.Io

WebSockets są fajni. Są naprawdę pomocne, jeśli chcesz wyświetlać czynności w czasie rzeczywistym od użytkowników (a może kilka zadań w kolejce).

Teraz, jeśli boisz się słowa „WebSockets”, nie bądź. Opracuję instrukcje, w jaki sposób możesz z niego korzystać i będę w pobliżu, aby odpowiedzieć na twoje pytania.

Miałem to wyzwanie, w którym potrzebowałem, aby pokazać listę osób, które obecnie oglądają określony adres URL Laravel. Więc zacząłem myśleć. Część mnie chciała zrobić szybkie włamanie (na szczęście nie jest to moja najsilniejsza strona). Podczas gdy drugi chciał zbudować coś fajnego, wielokrotnego użytku i długotrwałego.

„Dlaczego nie użyjesz po prostu popychacza?"

Oto rzecz.

Laravel jest wyposażony w włączony popychacz. Mimo że Pusher wydaje się szybkim rozwiązaniem „plug and play” (które jest), ma ograniczenia. Sprawdź https: // popychacz.com/cena

I większość samouczków oszukuje tytuł wdrażania WebSockets, podczas gdy w rzeczywistości chcą po prostu dać ci popychacz. (A moją ulubioną częścią jest to, że mówią, że możesz łatwo przełączyć się na gniazdo.io)

„Chcemy mieć nieograniczoną liczbę połączeń”

Nie chcemy się martwić o ograniczenia.

Zaczynajmy.

Używam Vagrant / Homestead.

W tym celu będziemy musieli przeczytać o transmisji wydarzeń.

Rzeczy, na które należy zwrócić uwagę (więc nie muszę się powtarzać):

1. Interfejs o zdarzeniach

2. Włączanie tras transmisji i korzystanie z tras/kanałów.PHP do uwierzytelnienia użytkowników

3. Kanał publiczny - każdy może słuchać

4. Kanał prywatny - musisz autoryzować użytkowników, zanim będą mogli dołączyć do kanału

5. Channel obecności - jak prywatny, ale możesz przekazać wiele dodatkowych metadanych na tym kanale i uzyskać listę osób, które dołączyły do ​​kanału.Broadcast () Metoda zdarzenia

Utwórz swoje wydarzenie

PHP Artisan Make: Event MessagePushed

Możesz nawet postępować zgodnie z konkretnym przykładem w dokumentacji nadawania wydarzeń. (Które naprawdę powinniśmy).

Zainstaluj Redis

Wcześniej miałem kolejki z przełożonym/redis/horyzontem. Horyzont jest świetny i możesz znaleźć informacje o tym tutaj https: // laravel.com/Docs/5.6/Horizon

Po pracy kolejki to wydarzenie w komunikacie będzie musiało używać kolejki.

Uwaga: aby wszystko działało, upewnij się, że edytujesz swój .plik env:

Broadcast_driver = Redis
Queue_driver = redis (to właściwie z konfiguracji horyzontu, ale będziemy potrzebować tego później)
Redis_host = 127.0.0.1
Redis_password = null
Redis_port = 6379

Zainstaluj serwer Laravel Echo

Więc ta część jest tak naprawdę miejscem, w którym instalujemy gniazdo.serwer IO, który jest pakowany w Laravel-Echo-Server. Możesz znaleźć o tym tutaj: https: // github.com/tlaverdure/laravel-echo-server

Uwaga: Sprawdź wymagania u góry!

Uruchom następujące (jak stwierdzono w dokumencie)

NPM instaluj-g laravev-echo-server

A następnie uruchom init, aby zdobyć serwer Laravela.plik JSON wygenerowany w App Root (który będziemy musieli skonfigurować).

Laravev-echo-server init

Po wygenerowaniu swojego serwera laravela-echo.plik JSON, powinien wyglądać tak.

„Authhost”: „http: // lokalny website.aplikacja ”,
„AuthendPoint”: „/Broadcasting/Auth”,
„Klienci”: [

„AppId”: „My-App-ID”,
„Key”: „Wygenerowane moim kluczem-init-command”

],
„Baza danych”: „Redis”,
„DatabaseConfig”:
„Redis”: ,
„Sqlite”:
„DatabasEpath”: „/baza danych/laravel-echo-server.sqlite "
,
„Port”: „6379”,
„Host”: „127.0.0.1 "
,
„DevMode”: false,
„Host”: Null,
„Port”: „6001”,
„Protokół”: „HTTP”,
„Socketio”: ,
„SslCertPath”: „”,
„sslkeypath”: „”,
„SslCertChainpath”: „”,
„SslPassPhraze”: „”

UWAGA: Jeśli chcesz to popchnąć do swojego serwera publicznego, upewnij się, że dodaj Laravel-Echo-Server.JSON do twojego .Gitignore. Wygeneruj ten plik na serwerze, w przeciwnym razie musisz przez cały czas zmienić swój Authhost.

Uruchom serwer Laravel Echo

Musisz go uruchomić, aby uruchomić WebSockets.

Laravel-echo-server start

(Wewnątrz korzenia-gdzie twój serwer laravela-echo.JSON jest umieszczony)

Powinno zacząć się pomyślnie. (Teraz będziemy chcieli dodać to do przełożonego na twoim serwerze, aby został uruchomiony automatycznie i ponownie uruchamiany na wypadek awarii)

Wewnątrz twojego/etc/przełożonego/conf.D/laravele-echo.conf (po prostu utwórz ten plik w Conf.D folder) Umieść następujące:

[Program: Laravel-go]
katalog =/var/www/my-ebsite-folder
Process_name =%(nazwa_ programu) s _%(proces_num) 02d
Command = Laravev-echo-server start
autostart = true
Autorestart = true
Użytkownik = Twój-linux-użytkownik
numprocs = 1
Redirect_stderr = true
stdout_logfile =/var/www/my-ebsite-folder/storage/logs/echo.dziennik

Po umieszczeniu w korzeni Laravela możesz uruchomić

PWD

Aby uzyskać ścieżkę dla swojego „katalogu” powyżej i prefiks „stdout_logfile”.

Twoim użytkownikiem będzie użytkownik Linux (Vagrant, Ubuntu lub inny)

Zapisz plik i wyjdź.

Jeśli użyłeś vim laravel-echo.conf, a następnie w środku, naciśnij i (jak ISTTAMBUL) na klawiaturze, aby edytować plik z vim, a następnie wpisz ESC: WQ! Aby zamknąć plik i zapisać go.

Następnie musimy uruchomić następujące polecenia:

sudo supervisorctl Zatrzymaj wszystko
Sudo Supervisorctl Reead
Sudo Supervisorctl Reload

Po tym sprawdzaniu, czy Laravel Echo działa

Status SUDO Supervisorctl

Zainstaluj echo echo i gniazda IO klienta

NPM Install-Save Laravel-echo
NPM instaluj -Socket Save.IO-CLIENT
[/c] c
A potem w twoim bootstrapie.JS (używam vue js) zarejestruj echo
[cc lang = "bash" uciekł = "true" szerokość = "800"]
importować echo z „laravel-go”
okno.IO = wymaga („gniazdo.io-client ');
// masz to na wypadek, gdybyś przestał uruchomić
Laravel Echo Serverif (typ IO !== „Undefined”)
okno.Echo = nowy echo (
nadawca: „gniazdo.io ',
Host: okno.Lokalizacja.Nazwa hosta + ': 6001',
);

Teraz sprawdź ponownie, jak słuchać wydarzeń na określonych kanałach.

Po dokumentacji dotyczącej transmisji Laravel, które udostępniliśmy powyżej, jeśli ustawiasz swoją metodę Broadcast (), aby zwrócić nowy przedsiębiorczy (wyjaśnię konkretną sprawę, którą zrobiłem, ale możesz zadawać pytania na wypadek, gdybyś potrzebował czegoś innego zaimplementowanego. Uważam, że ma to większą złożoność niż zwykłe użycie kanału publicznego, więc możemy się zmniejszyć bez problemów), a następnie chcemy słuchać tego kanału po stronie JavaScript (Frontend).

Oto konkretny przykład:

1. Pchnąłem wydarzenie na kanał obecności (miałem do czynienia z ankietami)

Funkcja publiczna Broadcast ()
Zwróć nowy PresenceChannel („Ankieta.' . $ this-> ankieta-> id);

2. Po popchnięciu wydarzenia przejdzie przez kanały.php. Tam chcemy stworzyć autoryzację dla tego użytkownika. (Pamiętaj, aby zwrócić tablicę autoryzacji kanału obecności, a nie logiki.)

Broadcast :: Channel („Ankieta.Survey_id ', funkcja ($ user, $ ankiety_id) return
['id' => $ user-> id, 'image' => $ user-> image (), 'full_name' => $ user-> full_name];);

3. Następnie w moim komponencie Vuejs, który ładuje się na stronie, którą chcę monitorować, definiuję metodę, która zostanie zainicjowana z metody Created () na obciążeniu:

ListoseForBroadcast (Survey_id)
Echo.dołącz („Ankieta.„ + Survey_id)
.Tutaj ((użytkownicy) =>
Ten.Users_viewing = Users;
Ten.$ Forceupdate ();
)
.dołączenie ((użytkownik) =>
Jeśli to.CheckIfUSeralReadyviewingSurvey (użytkownik))
Ten.Users_Viewing.push (użytkownik);
Ten.$ Forceupdate ();

)
.opuszczenie ((użytkownik) =>
Ten.removeviewingUser (użytkownik);
Ten.$ Forceupdate ();
);
,

Oczywiście wyciągnąłem tutaj jakiś kod z tego kontekstu, ale mam tę tablicę „Użytkowników”, aby utrzymać moich obecnych użytkowników, którzy dołączyli do kanału.
I to byłoby naprawdę.

Mam nadzieję, że byłeś w stanie podążać, jak próbowałem być szczegółowo opisany.

Szczęśliwe kodowanie!