je možné vytvořit interaktivní web pro více uživatelů v HTML5?
HTML samo o sobě to nemůže udělat. Hlavním problémem je, že i když si vytáhnout pohybující se věci kolem v prohlížeči (které byste mohli být schopni dělat jen s HTML a CSS, i když pokud se vám podaří udělat, že by to bylo docela exotické použití CSS), neexistuje žádný způsob, jak obejít skutečnost, že vaše webové stránky nějak potřebuje získat tyto informace od jednoho klienta k ostatním – to je, když jsem se přesunout pole na mém počítači, váš počítač potřebuje vědět. A to samo o sobě neumí.
Stručně řečeno, potřebujete nějaký server; a také potřebujete určité množství skriptování na straně klienta, kanonicky provedeno v JavaScriptu, instrumentovat výměnu informací na straně klienta věcí.
existuje mnoho způsobů, jak to architektovat, a podrobnosti se budou drasticky lišit, ale ve zkratce, co musíte udělat, je toto:
na klientovi:
-
pomocí JavaScriptu se můžete připojit k událostem přesunu těchto polí.
-
po přesunutí pole odešlete na server vhodnou zprávu.
-
současně poslouchejte zprávy přicházející ze serveru a podle toho přesuňte políčka.
kanonická technologie, která se používá pro rozhovor se serverem, by byla websockets, ale pokud trváte na tom, můžete to udělat také s prostými požadavky AJAX, je to jen méně efektivní a nemotornější, protože nemůžete „poslouchat“ zprávy pouze pomocí HTTP, musíte udržovat dotazování serveru. (Tj., je to „máte pro mě zprávu? a co teď? a co teď? a co teď? …“vs.“ řekni mi, až pro mě budeš mít zprávu, počkám“).
formát zprávy by měl být pravděpodobně založen na JSON-je zabudován do JavaScriptu prohlížeče , je známo, že nezpůsobuje žádné potíže na drátu a je to nejčastěji používaný formát, takže bude dobrá podpora bez ohledu na to, které technologie si vyberete pro zbytek zásobníku. Není to nejúčinnější formát serializace, ale nemluvíme zde o obrovském množství dat.
pro skutečnou část „pohybující se boxy kolem“ můžete použít nějaký frontendový rámec, jako je React, Vue atd., ale pro tento druh věcí, myslím, že je jednodušší použít přímou manipulaci DOM prostřednictvím vestavěného prohlížeče DOM API.
na serveru:
-
Udržujte sdílenou datovou strukturu, která popisuje, kde je každý blok.
-
poslouchejte připojení websocket.
-
když se nový klient připojí, odešlete pozice všech bloků, udržujte připojení otevřené.
-
když klient odešle aktualizaci pozice bloku, aktualizujte sdílenou datovou strukturu a přepošlete aktualizaci všem připojeným klientům.
nezáleží na tom, jaký jazyk a zásobník používáte pro server, pokud existuje dobrá podpora websocket.
ve skutečnosti se jedná v podstatě o webový chat, kromě toho, že vaše „chatové zprávy“ jsou místo textu pozicemi pole a s kroucením, že udržujete „historii chatu“ v komprimované podobě (datová struktura“ aktuální situace“) na neurčito.
samozřejmě ďábel je v detailech. Máte co do činění se sdílenou datovou strukturou, která je přístupná souběžně ,takže ji musíte chránit před rasovými podmínkami (např., když se nový klient připojí a jiný klient odešle aktualizaci při odesílání aktuálního stavu novému klientovi, ale než začnete vysílat aktualizace tohoto nového klienta, nový klient tuto aktualizaci neobdrží a jeho situace bude v rozporu se zbytkem sítě), musíte se postarat o odpojení (a automaticky se znovu připojit), potřebujete časové limity na vašich připojeních, aby nedošlo k úniku aktivních připojení (tj., musíte odstranit odpojené a načasované klienty ze seznamu klientů na serveru), potřebujete autentizaci, potřebujete HTTPS (včetně websocketů přes HTTPS), musíte někde nasadit celou věc atd. atd.