er det muligt at oprette en interaktiv hjemmeside for flere brugere i HTML5?
HTML selv kan ikke gøre det. Det største problem er, at selv hvis du trækker ud at flytte tingene rundt i bro.ser (som du kan være i stand til at gøre med bare HTML og CSS, men hvis du formår at gøre det, det ville være en ganske eksotisk brug af CSS), der er ingen vej rundt det faktum, at din hjemmeside eller anden måde har brug for at få disse oplysninger fra en klient til de andre – det vil sige, hvis jeg flytter en boks på min computer, din computer har brug for at vide. Og HTML selv kan ikke gøre det alene.
kort sagt, du har brug for en slags server; og du har også brug for en vis mængde scripting på klientsiden, kanonisk udført i JavaScript, for at instrumentere informationsudvekslingen på klientsiden af tingene.
der er mange måder at arkitekt dette på, og detaljerne vil variere drastisk, men i en nøddeskal, hvad du skal gøre er dette:
på klienten:
-
brug JavaScript til at låse fast på flyttehændelserne i disse kasser.
-
når en boks er flyttet, skal du sende en passende besked til serveren.
-
på samme tid skal du lytte til meddelelser, der kommer ind fra serveren, og flytte kasser i overensstemmelse hermed.
det er bare mindre effektivt og klodset, fordi du ikke kan “lytte” til meddelelser ved hjælp af bare HTTP, du skal fortsætte med at afstemme serveren. (Dvs., det er “har du en besked til mig? hvad med nu? hvad med nu? hvad med nu? …”vs.” fortæl mig, når du har en besked til mig, jeg venter”).
meddelelsesformatet skal sandsynligvis være baseret på JSON – det er indbygget i JavaScript, det vides ikke at forårsage problemer på ledningen, og det er det mest anvendte format, så der vil være god support, uanset hvilke teknologier du vælger til resten af din stak. Det er ikke det mest effektive serialiseringsformat, men vi taler ikke massive mængder data her.
for den faktiske “flyttekasser rundt” – del kan du enten bruge nogle frontend-rammer som React, Vue osv., men for denne slags ting regner jeg med, at det er lettere at bare bruge direkte DOM-manipulation via den indbyggede DOM API.
på serveren:
-
Oprethold en delt datastruktur, der beskriver, hvor hver blok er.
-
lyt efter internetforbindelser.
-
når en ny klient opretter forbindelse, skal du sende positionerne for alle blokke, holde forbindelsen åben.
-
når en klient sender en opdatering af blokposition, skal du opdatere din delte datastruktur og videresende opdateringen til alle tilsluttede klienter.
det betyder ikke noget forfærdeligt, hvilket sprog og stak du bruger til serveren, så længe der er god support.
faktisk er dette Dette er i det væsentlige en internetchat, bortset fra at dine “chatbeskeder” er bokspositioner i stedet for tekst, og med den drejning, at du opretholder “chathistorik” i komprimeret form (datastrukturen “nuværende situation”) på ubestemt tid.
selvfølgelig er djævelen i detaljerne. Du har at gøre med en delt datastruktur, der er tilgængelig samtidigt, så du er nødt til at beskytte det mod raceforhold (f. eks., når en ny klient opretter forbindelse, og en anden klient sender en opdatering, mens du sender den aktuelle tilstand til den nye klient, men før du begynder at sende opdateringer til den nye klient, modtager den nye klient ikke denne opdatering, og deres situation vil være uforenelig med resten af netværket), skal du tage højde for afbrydelser (og automatisk genoprette forbindelse), du har brug for timeouts på dine forbindelser, så du ikke lækker aktive forbindelser (dvs., du skal fjerne frakoblede og timeout-klienter fra listen over klienter på serveren), du har brug for godkendelse, du har brug for HTTPS (inklusive netstik over HTTPS), du skal implementere det hele et eller andet sted osv. osv.