Aktualizacje na żywo

Zmiany innych osób i nowe powiadomienia pojawiają się na otwartych stronach bez przeładowania: statusy, przypisania i komentarze w zgłoszeniu, tablica, lista, kalendarz, liczniki na dashboardzie, dzwonek powiadomień oraz informacja, kto jeszcze ogląda dane zgłoszenie. Całość działa na Laravel Reverb (serwer WebSocket) i Laravel Echo w przeglądarce. Bez Reverb aplikacja nadal działa i odświeża się sama w interwałach.

Architektura w jednym akapicie

Zapis wywołuje LiveUpdates (bezpośrednio albo przez trait modelu BroadcastsLiveChanges). LiveUpdates zbiera i deduplikuje zmiany z jednego żądania lub zadania, a po jego zakończeniu wysyła jedno zdarzenie ProjectChanged na projekt (oraz AccessChanged / NotificationsChanged na użytkownika) w kolejce live. Reverb dostarcza je na prywatne kanały project.{id} i user.{id}. Zdarzenie niesie tylko identyfikatory i rodzaje zmian, a nie zawartość rekordów. W przeglądarce useLiveChannel je odbiera, changeProps.ts zamienia je na propsy Inertia, które się zestarzały, a requestLiveReload pobiera ponownie tylko te propsy zwykłymi, autoryzowanymi trasami (łączone w jedno żądanie, wstrzymywane, gdy karta jest ukryta albo przeciągana jest karta). Gdy gniazdo jest wyłączone lub nie działa, useLiveFallback robi to samo w interwałach. Obecność („kto ogląda zgłoszenie”, „ktoś edytuje opis”) korzysta z kanału presence i szeptów między klientami; wymaga gniazda i nie ma zamiennika.

Przewodniki, w kolejności, w jakiej faktycznie będą potrzebne

1. Skonfiguruj ReverbAktualizacje na żywoSkonfiguruj ReverbPlik: docker-compose.yml — usługa Dockera reverb, wszystkie zmienne środowiskowe (Doppler i .env), generowanie kluczy, development a produkcja za proxy z TLS, skalowanie.
2. Ogłoś zmianęAktualizacje na żywoOgłoś zmianęKlienci na żywo dowiadują się o zapisie tylko wtedy, gdy zapis o sobie powie. Są trzy sposoby, od najbardziej do najmniej automatycznego. Przerobiony przyk… — jak sprawić, by nowy model lub ścieżka zapisu informowała klientów na żywo: BroadcastsLiveChanges, LiveUpdates, zdarzenia i zasada, że payload nie niesie danych.
3. Zareaguj na zmianę w UIAktualizacje na żywoZareaguj na zmianę w UIPrzerobiony przykład sprawia, że hipotetyczna strona Milestones projektu odświeża się, gdy nadejdzie zmiana milestones (typ ogłoszony w Ogłoś zmianę). — utrzymanie strony w zgodzie: useLiveChannel, changeProps.ts, closures dla leniwych propsów, wstrzymywanie przeładowań.
4. Obecność i podpowiedzi o edycjiAktualizacje na żywoObecność i podpowiedzi o edycjiObecność odpowiada na pytanie „kto jeszcze to ma otwarte?” i przenosi drobne podpowiedzi między klientami („Ada edytuje opis”). Używa kanału presence Rever… — pokazywanie, kto jest na stronie, i ostrzeżenia o równoczesnej edycji.
5. Fallback, bezpieczeństwo i diagnostykaAktualizacje na żywoFallback, bezpieczeństwo i diagnostykaJeśli Reverb nie jest skonfigurowany albo gniazdo nie działa, otwarta strona pobiera ponownie propsy, które pokazuje, w interwałach, więc aplikacja zachowu… — co się dzieje bez Reverb, model bezpieczeństwa i co sprawdzić, gdy nic nie dociera.

Co jest dziś na żywo

Zmienne środowiskowe w skrócie