È possibile creare un sito Web interattivo per più utenti in HTML5?
HTML stesso non può farlo. Il problema principale è che anche se si tira fuori cose in movimento nel browser (che si potrebbe essere in grado di fare con HTML e CSS, ma se si riesce a farlo, sarebbe un po ‘ esotico uso di CSS), non vi è alcun modo per aggirare il fatto che il tuo sito web deve in qualche modo per ottenere le informazioni da un client all’altro – che è, se mi sposto di un box sul mio computer, il computer ha bisogno di sapere. E HTML stesso non può farlo da solo.
In breve, hai bisogno di una sorta di server; e hai anche bisogno di una certa quantità di scripting lato client, canonicamente fatto in JavaScript, per instrumentare lo scambio di informazioni sul lato client delle cose.
Ci sono molti modi per progettare questo, e i dettagli varieranno drasticamente, ma in poche parole, quello che devi fare è questo:
Sul client:
-
Usa JavaScript per agganciare gli eventi di spostamento di quelle caselle.
-
Quando una casella è stata spostata, inviare un messaggio adatto al server.
-
Allo stesso tempo, ascoltare i messaggi provenienti dal server, e spostare le caselle di conseguenza.
La tecnologia canonica da utilizzare per parlare con il server sarebbe websockets, ma se insisti, potresti anche farlo con semplici richieste AJAX, è solo meno efficiente e più maldestra, perché non puoi “ascoltare” i messaggi usando solo HTTP, devi continuare a interrogare il server. (Cioè, è “hai un messaggio per me? che ne dici di adesso? che ne dici di adesso? che ne dici di adesso? …”vs.” dimmi quando hai un messaggio per me, aspetterò”).
Il formato del messaggio dovrebbe probabilmente essere basato su JSON – è integrato nel JavaScript del browser, è noto per non causare alcun problema sul filo, ed è il formato più comunemente usato, quindi ci sarà un buon supporto indipendentemente dalle tecnologie che scegli per il resto del tuo stack. Non è il formato di serializzazione più efficiente, ma non stiamo parlando di enormi quantità di dati qui.
Per la parte “spostare le caselle”, è possibile utilizzare un framework frontend come React, Vue, ecc., ma per questo genere di cose, penso che sia più facile usare la manipolazione diretta del DOM tramite l’API DOM del browser integrata.
Sul server:
-
Mantenere una struttura di dati condivisa che descriva dove si trova ogni blocco.
-
Ascolta le connessioni websocket.
-
Quando un nuovo client si connette, invia le posizioni di tutti i blocchi, mantieni aperta la connessione.
-
Quando un client invia un aggiornamento della posizione del blocco, aggiorna la struttura dati condivisa e inoltra l’aggiornamento a tutti i client connessi.
Non importa molto quale lingua e stack usi per il server, purché ci sia un buon supporto websocket.
In realtà, questa è essenzialmente una chat web, tranne che i tuoi ” messaggi di chat “sono posizioni di dialogo invece del testo e con la torsione che mantieni la” cronologia chat “in forma compressa (la struttura dei dati” situazione attuale”) indefinitamente.
Naturalmente il diavolo è nei dettagli. Hai a che fare con una struttura di dati condivisa a cui si accede contemporaneamente, quindi è necessario salvaguardarlo dalle condizioni di gara (ad esempio quando si connette un nuovo client, e un altro client invia un aggiornamento mentre stai inviando l’attuale stato il nuovo client, ma prima di iniziare a trasmettere gli aggiornamenti al nuovo cliente, il nuovo client non riceveranno l’aggiornamento, e la loro situazione sarà incoerente con il resto della rete), che è necessario per soddisfare disconnette (e riconnettersi automaticamente), è necessario un temporizzatore per le connessioni in modo che non la perdita di connessioni attive (es., è necessario rimuovere i client disconnessi e timeout dall’elenco dei client sul server), è necessaria l’autenticazione, è necessario HTTPS (inclusi websockets su HTTPS), è necessario distribuire l’intera cosa da qualche parte, ecc. ecc.