är det möjligt att skapa en interaktiv webbplats för flera användare i HTML5?
HTML själv kan inte göra det. Det största problemet är att även om du drar av att flytta saker runt i webbläsaren (som du kanske kan göra med bara HTML och CSS, men om du lyckas göra det, skulle det vara en ganska exotisk användning av CSS), det finns ingen väg runt det faktum att din webbplats på något sätt behöver få den informationen från en klient till de andra – det vill säga om jag flyttar en ruta på min dator behöver din dator veta. Och HTML själv kan inte göra det på egen hand.
kort sagt, du behöver någon form av server; och du behöver också en viss mängd skript på klientsidan, kanoniskt gjort i JavaScript, för att instrumentera informationsutbytet på klientsidan av saker.
det finns många sätt att arkitekt detta, och detaljerna kommer att variera drastiskt, men i ett nötskal, vad du behöver göra är detta:
på klienten:
-
använd JavaScript för att låsa på flytthändelserna i dessa rutor.
-
när en ruta har flyttat, skicka ett lämpligt meddelande till servern.
-
lyssna samtidigt på meddelanden som kommer in från servern och flytta rutorna i enlighet därmed.
den kanoniska tekniken att använda för att prata med servern skulle vara websockets, men om du insisterar kan du också göra det med vanliga Ajax-förfrågningar, det är bara mindre effektivt och klumpigare, eftersom du inte kan ”lyssna” på meddelanden med bara HTTP, du måste fortsätta polling servern. (Dvs, det är ”har du ett meddelande till mig? vad sägs om nu? vad sägs om nu? vad sägs om nu? …”vs.” berätta för mig när du har ett meddelande till mig, Jag väntar”).
meddelandeformatet borde antagligen baseras på JSON – det är inbyggt i webbläsarens JavaScript, det är känt att det inte orsakar några problem på tråden, och det är det vanligaste formatet, så det kommer att finnas bra stöd oavsett vilken teknik du väljer för resten av din stack. Det är inte det mest effektiva serialiseringsformatet, men vi pratar inte om stora mängder data här.
för den faktiska ”rörliga rutorna runt” – delen kan du antingen använda någon frontend-ram som React, Vue, etc., men för den här typen av saker tror jag att det är lättare att bara använda direkt DOM-manipulation via den inbyggda webbläsaren DOM API.
på servern:
-
underhålla en delad datastruktur som beskriver var varje block är.
-
lyssna efter websocket-anslutningar.
-
när en ny klient ansluter, skicka positionerna för alla block, håll anslutningen öppen.
-
när en klient skickar en blockpositionsuppdatering uppdaterar du din delade datastruktur och vidarebefordrar uppdateringen till alla anslutna klienter.
det spelar ingen roll väldigt mycket vilket språk och stack du använder för servern, så länge det finns bra websocket-stöd.
i själva verket är detta i huvudsak en webbchatt, förutom att dina” chattmeddelanden ”är boxpositioner istället för text och med den vridning som du behåller” chatthistorik ”i komprimerad form (datastrukturen” nuvarande situation”) på obestämd tid.
naturligtvis är djävulen i detaljerna. Du har att göra med en delad datastruktur som nås samtidigt, så du måste skydda det mot rasförhållanden (t. ex., när en ny klient ansluter och en annan klient skickar en uppdatering medan du skickar det aktuella tillståndet till den nya klienten, men innan du börjar sända uppdateringar till den nya klienten, kommer den nya klienten inte att få den uppdateringen och deras situation kommer att vara inkonsekvent med resten av nätverket), du måste tillgodose frånkopplingar (och automatiskt återansluta), du behöver timeouts på dina anslutningar så att du inte läcker aktiva anslutningar (dvs., du måste ta bort frånkopplade och tidsbestämda klienter från listan över klienter på servern), du behöver autentisering, du behöver HTTPS (inklusive websockets över HTTPS), du måste distribuera hela saken någonstans, etc. osv.