Jak korzystać z zdarzeń serwera HTML5

Pierwszą rzeczą, na którą należy zauważyć, jest to, że zadzwoniliśmy nagłówek Funkcja w wierszach 2-3: Jest to funkcja używana do wysyłania Surowe nagłówki HTTP. W tym przypadku nazywamy to dwa razy: pierwszy w wierszach 2, aby skonfigurować Kontrola pamięci podręcznej Pole nagłówka i określają dyrektywy buforowania (bez buforowania strony), drugi w wierszach 3, aby ustawić Typ zawartości Do tekst/strumień zdarzeń. Te konfiguracja nagłówków jest niezbędna, aby nasz skrypt działał poprawnie. Należy również zauważyć, że aby poprawnie pracować, nagłówek Funkcja musi być zawsze wywoływana przed utworzeniem jakiegokolwiek innego wyjścia.

Po skonfigurowaniu nagłówków HTML po prostu użyliśmy wymagają raz stwierdzenie w wierszach 6, aby wymagać treści Zwierząt.php Plik, który zawiera tablicę, którą napisaliśmy wcześniej. W prawdziwym scenariuszu zostałby zastąpiony przez Zapytanie SQL Aby odzyskać takie informacje z bazy danych.

Wreszcie w wierszach 9-11 wysłaliśmy naszą odpowiedź do klienta: kodowany JSON Tablica „zwierząt”. Bardzo ważna rzecz do zauważenia: format zdarzeń po stronie serwera wymaga, aby każda odpowiedź wysłana przez serwer była prefiksowana przez dane: sznur, a następnie dwa NOWOŚĆ LINE. W tym przypadku użyliśmy \N nowa postać, ponieważ działamy na platformie podobnej do Unix; Aby zapewnić kompatybilność międzyplatformową Php_eol stały.

Możliwe jest nawet przełamanie komunikatu odpowiedzi na wielu wierszach: w tym przypadku każda linia, jak powiedziano wcześniej, musi zacząć od „Data:”, a następnie musi nastąpić jedna nowa postać. Dodatkowa nowa linia jest wymagana tylko na ostatniej linii.

Serwer może również kontrolować, jak często klient powinien spróbować ponownie się połączyć (domyślnie jest 3 sekundy) i nazwa wydarzenie (domyślnie to „wiadomość”) wysłane do klienta. Aby dostosować ten pierwszy, musimy użyć spróbować ponownie Dyrektywa, a następnie pożądany przedział czasu, wyrażony w milisekundach. Na przykład, aby skonfigurować interwał 1 sekundy:

echo „Postrudź: 1000 \ n”;

Zauważ, że nawet tutaj wymagana jest nowa linia. Aby zmienić nazwę zdarzenia, musimy użyć wydarzenie dyrektywa:

echo „wydarzenie: Customevent \ n”;

Domyślne zdarzenie to „wiadomość”: jest to ważne, ponieważ zdarzenie musi być określone w kodzie JavaScript klienta podczas dodawania słuchacza zdarzenia, jak zobaczymy za chwilę.

Po wysłaniu naszej odpowiedzi zadzwoniliśmy spłukać Funkcja: jest to potrzebne do pomiaru danych do klienta.

Kod boczny klienta

Pierwszą rzeczą, którą zamierzamy zrobić po stronie klienta, jest przygotowanie naszego pliku HTML z listą dostępnych zwierząt:

To naprawdę podstawowy HTML z odrobiną php, aby wyświetlić listę zwierząt w momencie ładowania strony i dołączyć nasze .plik JS (skrypt.JS), ale będzie serwować nasz cel. Teraz zobaczmy, w jaki sposób możemy korzystać z zdarzeń po stronie serwera. Pierwszą rzeczą, którą musimy zrobić, jest instancja Obiekt źródła zdarzenia. W naszym pliku JavaScript napisz:

Niech Eventource = new Eventource („Skrypt.php '); 

Jak widać, przekazaliśmy ścieżkę do naszego skryptu serwera jako argument w Wydarzenia Konstruktor obiektu. Ten obiekt otworzy połączenie z serwerem. Teraz musimy dodać Słuchacz wydarzenia, abyśmy mogli wykonywać niektóre działania, gdy wiadomość jest odbierana z serwera:

Niech Eventource = new Eventource („Skrypt.php '); wydarzenia.addEventListener („Message”, funkcja (event) let data = json.Parse (wydarzenie.dane); Let ListElements = Dokument.getElementsBaTagname („li”); dla (niech i = 0; i < listElements.length; i++)  let animal = listElements[i].textContent; if (!data.includes(animal))  listElements[i].style.color = "red";   ); 

Po otrzymaniu wiadomości używamy JSON.analizować Metoda w wierszu 4 w celu przekształcenia danych wysyłanych przez serwer (ciąg, zawarty w dane właściwość obiektu zdarzenia), do tablicy JavaScript.

Następnie zapętlimy się w wierszach 7-11 przez wszystkie elementy z

wydarzenia.zamknąć()