is het mogelijk om een interactieve Website te maken voor meerdere gebruikers in HTML5?
HTML zelf kan dat niet doen. Het grootste probleem is dat zelfs als je trekt uit het verplaatsen van dingen in de browser (die je zou kunnen doen met alleen HTML en CSS, maar als je erin slaagt om dat te doen, zou het nogal een exotisch gebruik van CSS), er is geen manier rond het feit dat uw website een of andere manier nodig heeft om die informatie van de ene client naar de anderen – dat wil zeggen, als ik een doos op mijn computer te verplaatsen, uw computer moet weten. En HTML zelf kan dat niet alleen.
kortom, U hebt een soort server nodig; en je hebt ook enige hoeveelheid client-side scripting nodig, canoniek gedaan in JavaScript, om de informatie-uitwisseling aan de client-kant van de dingen te instrumenteren.
er zijn vele manieren om dit te architecteren, en de details zullen drastisch variëren, maar in een notendop, wat je moet doen is dit:
op de client:
-
gebruik JavaScript te vergrendelen op de beweging gebeurtenissen van die dozen.
-
wanneer een box is verplaatst, stuur dan een passend bericht naar de server.
-
tegelijkertijd, luister naar berichten die binnenkomen van de server, en verplaats de vakken dienovereenkomstig.
de canonieke technologie om te gebruiken voor het praten met de server zou websockets zijn, maar als je erop staat, je zou het ook kunnen doen met gewone Ajax verzoeken, het is gewoon minder efficiënt en onhandig, omdat je niet kunt “luisteren” voor berichten met behulp van alleen HTTP, je moet blijven polling de server. (I. e., het is ” heb je een boodschap voor mij? wat dacht je van nu? wat dacht je van nu? wat dacht je van nu? …”vs.” tell me when you have a message for me, I ‘ll wait”).
het bericht formaat zou waarschijnlijk gebaseerd moeten zijn op JSON – het is ingebouwd in browser JavaScript, het is bekend dat het geen problemen veroorzaakt op de wire, en het is het meest gebruikte formaat, dus er zal goede ondersteuning zijn, ongeacht welke technologieën je kiest voor de rest van je stack. Het is niet het meest efficiënte serialisatieformaat, maar we hebben het hier niet over enorme hoeveelheden data.
voor het eigenlijke “moving boxes around” deel, kunt u een frontend framework gebruiken zoals React, Vue, etc., maar voor dit soort dingen, Ik denk dat het makkelijker is om gewoon gebruik maken van directe Dom manipulatie via de ingebouwde browser DOM API.
op de server:
-
zorg voor een gedeelde gegevensstructuur die beschrijft waar elk blok zich bevindt.
-
Luister naar websocket verbindingen.
-
wanneer een nieuwe client verbinding maakt, stuur de posities van alle blokken, Houd de verbinding open.
-
wanneer een client een update van de blokpositie verzendt, werkt u uw gedeelde gegevensstructuur bij en stuurt u de update door naar alle verbonden clients.
het maakt niet veel uit welke taal en stack je gebruikt voor de server, zolang er goede websocket ondersteuning.
in feite is dit in wezen een webchat, behalve dat uw “chatberichten” boxposities zijn in plaats van tekst, en met de twist dat u “chatgeschiedenis” in gecomprimeerde vorm (de “huidige situatie” gegevensstructuur) voor onbepaalde tijd behoudt.
natuurlijk zit de duivel in de details. Je hebt te maken met een gedeelde datastructuur die gelijktijdig wordt geopend, dus je moet die beschermen tegen race-omstandigheden (bijv. wanneer een nieuwe client verbinding maakt en een andere client een update verzendt terwijl u de huidige status naar de nieuwe client verzendt, maar voordat u updates voor die nieuwe client uitzendt, ontvangt de nieuwe client die update niet en zal hun situatie niet in overeenstemming zijn met de rest van het netwerk) , moet u rekening houden met verbroken verbindingen( en automatisch opnieuw verbinden), moet u timeouts op uw verbindingen zodat u geen actieve verbindingen lekt (d.w.z., moet u losgekoppelde en time-out clients verwijderen uit de lijst van clients op de server), U hebt authenticatie nodig, u hebt https nodig (inclusief websockets via HTTPS), u moet het hele ding ergens implementeren, enz. etc.