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
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ę:
VariableTablez wykorzystaniem protokołu binarnego (zamiast tekstowego JSON).ArrayBufferlubBlob) na natywne typy i struktury zrozumiałe dla TypeScriptu.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