czy możliwe jest stworzenie interaktywnej strony internetowej dla wielu użytkowników w HTML5?
sam HTML tego nie potrafi. Głównym problemem jest to, że nawet jeśli uda Ci się przenieść rzeczy w przeglądarce (co możesz zrobić tylko za pomocą HTML i CSS, chociaż jeśli uda ci się to zrobić, byłoby to dość egzotyczne użycie CSS), nie ma sposobu na obejście faktu, że Twoja strona internetowa w jakiś sposób musi uzyskać te informacje od jednego klienta do innych – to znaczy, jeśli przeniosę pudełko na moim komputerze, Twój komputer musi wiedzieć. A sam HTML nie może tego zrobić sam.
krótko mówiąc, potrzebujesz jakiegoś serwera; i potrzebujesz również trochę skryptów po stronie klienta, kanonicznie wykonanych w JavaScript, aby instrument wymiany informacji po stronie klienta rzeczy.
istnieje wiele sposobów na architekturę tego, a szczegóły będą się drastycznie różnić, ale w skrócie, co musisz zrobić, to:
na kliencie:
-
użyj JavaScript, aby zatrzasnąć zdarzenia przenoszenia tych pól.
-
gdy pole zostanie przeniesione, wyślij odpowiednią wiadomość na serwer.
-
jednocześnie Słuchaj wiadomości przychodzących z serwera i odpowiednio przesuwaj pola.
kanoniczną technologią do rozmowy z serwerem byłyby websockety, ale jeśli nalegasz, możesz to zrobić również z prostymi żądaniami AJAX, jest to po prostu mniej wydajne i niezgrabne, ponieważ nie można „słuchać” wiadomości za pomocą tylko HTTP, musisz ciągle sondować serwer. (Tj. ” czy masz dla mnie wiadomość? a teraz? a teraz? a teraz? …”vs”powiedz mi, kiedy będziesz miał dla mnie wiadomość, poczekam”).
format wiadomości powinien być prawdopodobnie oparty na JSON-jest wbudowany w JavaScript przeglądarki, wiadomo, że nie powoduje żadnych problemów na drucie i jest to najczęściej używany format, więc będzie dobre wsparcie bez względu na to, które technologie wybierzesz dla reszty stosu. Nie jest to najskuteczniejszy format serializacji, ale nie mówimy tu o ogromnych ilościach danych.
dla rzeczywistej części „przesuwania pudełek” możesz użyć jakiegoś frameworka frontendowego, takiego jak React, Vue itp., ale dla tego rodzaju rzeczy, myślę, że łatwiej jest po prostu użyć bezpośredniej manipulacji DOM poprzez wbudowaną przeglądarkę DOM API.
na serwerze:
-
Zachowaj współdzieloną strukturę danych, która opisuje, gdzie znajduje się każdy blok.
-
słuchaj połączeń websocket.
-
gdy nowy klient połączy się, wyślij pozycje wszystkich bloków, zachowaj połączenie Otwarte.
-
gdy klient wyśle aktualizację pozycji blokowej, zaktualizuj udostępnioną strukturę danych i przekaż aktualizację wszystkim połączonym klientom.
nie ma znaczenia, jakiego języka i stosu używasz na serwerze, o ile istnieje dobra obsługa websocket.
w rzeczywistości jest to zasadniczo czat internetowy, z wyjątkiem tego, że Twoje „wiadomości czatu” są pozycjami pudełkowymi zamiast tekstowymi, a z kolei utrzymujesz „historię czatu” w skompresowanej formie (struktura danych „bieżąca sytuacja”) w nieskończoność.
oczywiście diabeł tkwi w szczegółach. Masz do czynienia ze współdzieloną strukturą danych, do której dostęp jest jednoczesny, więc musisz ją chronić przed warunkami wyścigowymi (np., gdy nowy klient połączy się, a inny klient wyśle aktualizację podczas wysyłania aktualnego stanu do nowego klienta, ale przed rozpoczęciem nadawania aktualizacji do tego nowego klienta, nowy klient nie otrzyma tej aktualizacji, a ich sytuacja będzie niespójna z resztą sieci), musisz zaspokoić rozłączenia (i automatycznie połączyć się ponownie), potrzebujesz limitu czasu na połączeniach, aby nie wyciekać aktywnych połączeń (tj., musisz usunąć rozłączonych i wyłączonych klientów z listy klientów na serwerze), potrzebujesz uwierzytelnienia, potrzebujesz HTTPS (w tym websockets przez HTTPS), musisz gdzieś wdrożyć całość itp. itd.