Er det Mulig Å Lage Et Interaktivt Nettsted for FLERE Brukere I HTML5?
HTML selv kan ikke gjøre det. Hovedproblemet er at selv om du drar av å flytte ting rundt i nettleseren (som du kanskje kan gjøre med BARE HTML og CSS, men hvis du klarer å gjøre det, ville det være ganske eksotisk BRUK AV CSS), er det ingen vei rundt det faktum at nettstedet ditt på en eller annen måte trenger å få den informasjonen fra en klient til de andre – det vil si hvis jeg flytter en boks på datamaskinen min, må datamaskinen din vite. OG HTML selv kan ikke gjøre det på egen hånd.
kort sagt, du trenger en slags server; og du trenger også en viss mengde klientside skripting, kanonisk gjort I JavaScript, for å instrumentere informasjonsutvekslingen på klientsiden av ting.
det er mange måter å arkitekt dette, og detaljene vil variere drastisk, men i et nøtteskall, hva du trenger å gjøre er dette:
på klienten:
-
Bruk JavaScript for å låse på flyttehendelsene i disse boksene.
-
når en boks er flyttet, send en passende melding til serveren.
-
på samme tid, lytt til meldinger som kommer inn fra serveren, og flytt bokser tilsvarende.
den kanoniske teknologien som skal brukes til å snakke med serveren, ville være websockets, men hvis du insisterer, kan du også gjøre det med vanlige AJAX-forespørsler, det er bare mindre effektivt og klumpete, fordi du ikke kan «lytte» for meldinger ved hjelp av BARE HTTP, du må fortsette å spørre serveren. (Dvs. det er » har du en melding til meg ? hva med nå? hva med nå? hva med nå? …»vs.»fortell meg når du har en melding til meg, jeg venter»).
meldingsformatet bør trolig være basert PÅ JSON – det er innebygd I nettleseren JavaScript, det er kjent for å ikke forårsake noen problemer på ledningen, og det er det mest brukte formatet, så det vil være god støtte uansett hvilken teknologi du velger for resten av stabelen din. Det er ikke det mest effektive serialiseringsformatet, men vi snakker ikke enorme mengder data her.
for den faktiske «bevegelige bokser rundt» – delen, kan du enten bruke noen frontend-rammeverk Som React, Vue, etc., men for denne typen ting regner jeg med at det er lettere å bare bruke direkte DOM-manipulasjon via den innebygde nettleseren DOM API.
på serveren:
-
Opprettholde en delt datastruktur som beskriver hvor hver blokk er.
-
Lytt etter websocket tilkoblinger.
-
når en ny klient kobler til, send posisjonene til alle blokkene, hold forbindelsen åpen.
-
når en klient sender en blokkposisjonsoppdatering, oppdaterer du den delte datastrukturen og videresender oppdateringen til alle tilkoblede klienter.
Det spiller ingen rolle hvor mye språk og stabel du bruker for serveren, så lenge det er god websocket-støtte.
faktisk er dette dette egentlig en nettprat, bortsett fra at «chatmeldingene» er boksposisjoner i stedet for tekst, og med twist at du opprettholder «chathistorikk» i komprimert form (datastrukturen» nåværende situasjon») på ubestemt tid.
selvfølgelig er djevelen i detaljene. Du har å gjøre med en delt datastruktur som er tilgjengelig samtidig, så du må beskytte det mot raseforhold (f. eks., når en ny klient kobler til, og en annen klient sender en oppdatering mens du sender den nåværende tilstanden til den nye klienten, men før du begynner å kringkaste oppdateringer til den nye klienten, vil den nye klienten ikke motta den oppdateringen, og deres situasjon vil være uforenlig med resten av nettverket), må du ta i mot frakoblinger (og automatisk koble til igjen), du trenger tidsavbrudd på tilkoblingene dine slik at du ikke lekker aktive tilkoblinger (dvs., må du fjerne frakoblede og tidsbestemte klienter fra listen over klienter på serveren), du trenger autentisering, DU trenger HTTPS (inkludert websockets over HTTPS), du må distribuere hele greia et sted, etc. osv.