Skip to content

[Task] Obsługa Strumieniowania Binarnego (Real-time Updates) #39

Description

@PEXEL2002

Opis zadania i szczegółowe wymagania

Należy zaimplementować odbiornik danych diagnostycznych na frontendzie, który wykorzysta zoptymalizowany system streamingu zmiennych z backendu. W tym zadaniu musi zawierać się:

  • Napisanie dedykowanego handlera dla wiadomości przychodzących z VariableTable z wykorzystaniem protokołu binarnego (zamiast tekstowego JSON).
  • Logika dekodująca przychodzące strumienie danych (np. obróbka ArrayBuffer lub Blob) na natywne typy i struktury zrozumiałe dla TypeScriptu.
  • Implementacja wysokowydajnego mechanizmu aktualizacji stanu – aplikacja musi aktualizować wyłącznie te komponenty i zmienne, których adresy znalazły się w odebranej "paczce" (Delta Tracking).
  • Wykorzystanie zaktualizowanych danych do wizualizacji aktywnego przepływu prądu (power flow) na poszczególnych szczeblach i elementach drabinki w czasie rzeczywistym.

Dodatkowy kontekst i źrodła pomocnicze

Użycie protokołu binarnego do ciągłego odświeżania tysięcy zmiennych pozwala uniknąć narzutu na parsowanie ciągów znaków i redukuje obciążenie sieci. Jest to jednak wyzwanie dla frameworków takich jak React. Należy uważać, aby zbyt częste wywołania aktualizacji stanu globalnego (np. co 10-20 ms) nie doprowadziły do zjawiska re-renderowania całej aplikacji, co spowoduje zacinanie się interfejsu (UI freeze). Dobrą praktyką przy animacji przepływu prądu jest modyfikowanie klas CSS poprzez bezpośredni dostęp do referencji (Refs) elementów, omijając cykl wirtualnego DOM tam, gdzie to tylko możliwe, bądź zastosowanie funkcji requestAnimationFrame.

Definicja wykonania zadania

  • Dane binarne przychodzące z backendu są poprawnie odbierane i dekodowane po stronie przeglądarki.
  • Zaimplementowano handler, który wydajnie przetwarza i integruje otrzymaną paczkę (Deltę) z widokiem.
  • Zmiana wartości zmiennej lub stanu w silniku C++ jest widoczna natychmiastowo jako zmiana koloru/wyglądu elementu w Reactcie.
  • Strumieniowanie danych i aktualizacje wizualne nie powodują pełnego przeładowania strony ani zauważalnych spadków wydajności.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Fields

    No fields configured for Task.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions