Ist es möglich, eine interaktive Website für mehrere Benutzer in HTML5 zu erstellen?
HTML selbst kann das nicht. Das Hauptproblem ist, dass selbst wenn Sie Dinge im Browser verschieben (was Sie möglicherweise nur mit HTML und CSS tun können, obwohl dies eine ziemlich exotische Verwendung von CSS wäre), es gibt keinen Weg um die Tatsache herum, dass Ihre Website diese Informationen irgendwie von einem Client zu den anderen übertragen muss – das heißt, wenn ich eine Box auf meinem Computer verschiebe, muss Ihr Computer dies wissen. Und HTML selbst kann das nicht alleine machen.
Kurz gesagt, Sie benötigen eine Art Server; und Sie benötigen auch ein gewisses Maß an clientseitigem Scripting, das kanonisch in JavaScript ausgeführt wird, um den Informationsaustausch auf der Clientseite der Dinge zu instrumentieren.
Es gibt viele Möglichkeiten, dies zu tun, und die Details variieren drastisch, aber kurz gesagt, was Sie tun müssen, ist Folgendes:
Auf dem Client:
-
Verwenden Sie JavaScript, um die Verschiebungsereignisse dieser Felder zu erfassen.
-
Wenn sich eine Box bewegt hat, senden Sie eine geeignete Nachricht an den Server.
-
Hören Sie gleichzeitig Nachrichten ab, die vom Server eingehen, und verschieben Sie sie entsprechend.
Die kanonische Technologie für die Kommunikation mit dem Server wären Websockets, aber wenn Sie darauf bestehen, können Sie dies auch mit einfachen AJAX-Anforderungen tun. (DH, es ist „Hast du eine Nachricht für mich? wie wär’s jetzt? wie wär’s jetzt? wie wär’s jetzt? …“ vs. „Sag mir, wenn du eine Nachricht für mich hast, werde ich warten“).
Das Nachrichtenformat sollte wahrscheinlich auf JSON basieren – es ist in Browser-JavaScript integriert, es ist bekannt, dass es keine Probleme auf dem Draht verursacht, und es ist das am häufigsten verwendete Format, so dass es eine gute Unterstützung gibt, egal welche Technologien Sie für den Rest Ihres Stacks wählen. Es ist nicht das effizienteste Serialisierungsformat, aber wir sprechen hier nicht von riesigen Datenmengen.
Für den eigentlichen „Moving Boxes around“ -Teil können Sie entweder ein Frontend-Framework wie React, Vue usw. verwenden., aber für diese Art der Sache, ich denke, es ist einfacher, nur direkte DOM-Manipulation über die integrierte Browser-DOM-API zu verwenden.
Auf dem Server:
-
Pflegen Sie eine gemeinsame Datenstruktur, die beschreibt, wo sich jeder Block befindet.
-
Warten Sie auf Websocket-Verbindungen.
-
Wenn ein neuer Client eine Verbindung herstellt, senden Sie die Positionen aller Blöcke und halten Sie die Verbindung offen.
-
Wenn ein Client eine Blockpositionsaktualisierung sendet, aktualisieren Sie Ihre freigegebene Datenstruktur und leiten Sie die Aktualisierung an alle verbundenen Clients weiter.
Es spielt keine Rolle, welche Sprache und welchen Stack Sie für den Server verwenden, solange es eine gute Websocket-Unterstützung gibt.
In der Tat ist dies im Wesentlichen ein Web-Chat, mit der Ausnahme, dass Ihre „Chat-Nachrichten“ Boxpositionen anstelle von Text sind, und mit der Wendung, dass Sie „Chat-Verlauf“ in komprimierter Form (die „aktuelle Situation“ Datenstruktur) auf unbestimmte Zeit.
Natürlich steckt der Teufel im Detail. Sie haben es mit einer gemeinsam genutzten Datenstruktur zu tun, auf die gleichzeitig zugegriffen wird., wenn ein neuer Client eine Verbindung herstellt und ein anderer Client ein Update sendet, während Sie den aktuellen Status an den neuen Client senden, aber bevor Sie mit der Übertragung von Updates an diesen neuen Client beginnen, erhält der neue Client dieses Update nicht und seine Situation ist inkonsistent mit dem Rest des Netzwerks), Sie müssen für Verbindungsabbrüche sorgen (und die Verbindung automatisch wiederherstellen), Sie benötigen Zeitüberschreitungen für Ihre Verbindungen, damit Sie keine aktiven Verbindungen verlieren (z., Sie müssen getrennte und zeitlich begrenzte Clients aus der Liste der Clients auf dem Server entfernen), Sie benötigen eine Authentifizierung, Sie benötigen HTTPS (einschließlich Websockets über HTTPS), Sie müssen das Ganze irgendwo bereitstellen usw. etc.