este posibil să creați un site web interactiv pentru mai mulți utilizatori în HTML5?
HTML în sine nu poate face asta. Principala problemă este că, chiar dacă scoateți lucrurile în mișcare în browser (ceea ce s – ar putea să faceți doar cu HTML și CSS, deși dacă reușiți să faceți acest lucru, ar fi o utilizare destul de exotică a CSS), nu există nicio cale în jurul faptului că site-ul dvs. are nevoie cumva să obțină aceste informații de la un client la ceilalți-adică dacă mut o cutie pe computerul meu, computerul dvs. trebuie să știe. Și HTML în sine nu poate face asta de unul singur.
pe scurt, aveți nevoie de un fel de server; și, de asemenea, aveți nevoie de o anumită cantitate de scripting din partea clientului, realizat canonic în JavaScript, pentru a instrumentiza schimbul de informații pe partea clientului a lucrurilor.
există mai multe moduri de a arhitect acest lucru, iar detaliile vor varia drastic, dar într-un cuvânt, ceea ce trebuie să faceți este aceasta:
pe client:
-
utilizați JavaScript pentru a bloca evenimentele de mișcare ale acestor casete.
-
când o casetă s-a mutat, trimiteți un mesaj adecvat serverului.
-
în același timp, Ascultați mesajele care vin de pe server și mutați casetele în consecință.
tehnologia canonică de utilizat pentru a vorbi cu serverul ar fi websockets, dar dacă insistați, ați putea să o faceți și cu cereri AJAX simple, este doar mai puțin eficientă și mai stângace, deoarece nu puteți „asculta” mesajele folosind doar HTTP, trebuie să continuați să interogați serverul. (Adică, este „ai un mesaj pentru mine? dar acum? dar acum? dar acum? …”vs.” spune-mi când ai un mesaj pentru mine, Voi aștepta”).
formatul mesajului ar trebui să se bazeze probabil pe JSON – este încorporat în JavaScript-ul browserului, se știe că nu provoacă probleme pe fir și este formatul cel mai frecvent utilizat, deci va exista un suport bun, indiferent de tehnologiile pe care le alegeți pentru restul stivei. Nu este cel mai eficient format de serializare, dar nu vorbim de cantități masive de date aici.
pentru Real „cutii în mișcare în jurul valorii de” parte, ai putea folosi fie unele cadru frontend ca React, Vue, etc., dar pentru acest tip de lucru, cred că este mai ușor să folosiți doar manipularea directă DOM prin intermediul browserului încorporat DOM API.
pe server:
-
mențineți o structură de date partajată care descrie unde se află fiecare bloc.
-
ascultați conexiunile websocket.
-
când se conectează un nou client, trimiteți pozițiile tuturor blocurilor, mențineți conexiunea deschisă.
-
când un client trimite o actualizare a poziției blocului, actualizați structura de date partajată și redirecționați actualizarea către toți clienții conectați.
nu contează foarte mult ce limbă și stivă utilizați pentru server, atâta timp cât există un suport bun pentru websocket.
de fapt, acesta este în esență un chat web, cu excepția faptului că „mesajele de chat” sunt poziții de casetă în loc de text și cu răsucirea pe care o mențineți „istoricul chat-ului” în formă comprimată (structura de date „situația actuală”) pe termen nelimitat.
bineînțeles că diavolul este în detalii. Aveți de-a face cu o structură de date partajată care este accesată concomitent, deci trebuie să o protejați împotriva condițiilor de rasă (de ex., când un client nou se conectează și un alt client trimite o actualizare în timp ce trimiteți starea curentă către noul client, dar înainte de a începe să difuzați actualizări către acel client nou, noul client nu va primi acea actualizare, iar situația lor va fi incompatibilă cu restul rețelei), trebuie să vă ocupați de deconectări (și să vă reconectați automat), aveți nevoie de timeout-uri pentru conexiunile dvs., astfel încât să nu scurgeți conexiunile active (adică., trebuie să eliminați clienții deconectați și temporizați din lista de clienți de pe server), aveți nevoie de autentificare, aveți nevoie de HTTPS (inclusiv websockets peste HTTPS), trebuie să implementați totul undeva etc. etc.