HTML5で複数のユーザーのためのインタラクティブなウェブサイトを作成することは可能ですか？
HTML自体はそれを行うことはできません。 主な問題は、ブラウザで物事を動かすのをやめても（HTMLとCSSだけでできるかもしれませんが、それを行うことができれば、CSSの非常にエキゾチックな使用になるでしょう）、あなたのウェブサイトが何らかの形であるクライアントから他のクライアントにその情報を取得する必要があるという事実を回避する方法はありません。 そして、HTML自体はそれを単独で行うことはできません。
要するに、ある種のサーバーが必要です; また、クライアント側での情報交換を調整するために、JavaScriptで正規に行われるクライアント側のスクリプトも必要です。
これを設計するには多くの方法があり、詳細は大幅に異なりますが、一言で言えば、あなたがする必要があるのはこれです：
クライアント上:
-
JavaScriptを使用して、これらのボックスの移動イベントをラッチします。
-
ボックスが移動したら、適切なメッセージをサーバーに送信します。
-
同時に、サーバーから入ってくるメッセージをリッスンし、それに応じてボックスを移動します。
サーバーと通信するために使用する標準的な技術はwebsocketですが、主張する場合は、単純なAJAXリクエストでも実行できますが、HTTPだけを使用してメッセージを「リッスン」することができないため、効率が低く、不器用です。サーバーをポーリングし続ける必要があります。 （つまり、それは”あなたは私のためのメッセージを持っていますか？ 今はどうですか？ 今はどうですか？ 今はどうですか？ …”vs.”あなたは私のためのメッセージを持っているときに教えて、私は待っています”）。
メッセージ形式はおそらくJSONに基づいている必要があります-それはブラウザのJavaScriptに組み込まれており、ワイヤー上の問題を引き起こさないことが知 これは最も効率的なシリアル化形式ではありませんが、ここでは大量のデータについては話していません。
実際の”ボックスの周りを移動する”部分については、React、Vueなどのフロントエンドフレームワークを使用することができます。 しかし、この種のことでは、組み込みのブラウザDOM APIを介して直接DOM操作を使用する方が簡単だと思います。サーバー上の
:
-
各ブロックがどこにあるかを記述する共有データ構造を維持します。
-
websocket接続をリッスンします。
-
新しいクライアントが接続すると、すべてのブロックの位置を送信し、接続を開いたままにします。
-
クライアントがブロック位置の更新を送信すると、共有データ構造を更新し、接続されているすべてのクライアントに更新を転送します。
優れたwebsocketサポートがある限り、サーバーに使用する言語とスタックは非常に重要ではありません。
実際、これは本質的にウェブチャットですが、”チャットメッセージ”はテキストではなくボックス位置であり、”チャット履歴”を圧縮形式（”現在の状況”データ構造）で無期限に維持することを除いています。
もちろん細部には悪魔がいる。 あなたは同時にアクセスされる共有データ構造を扱っているので、競合状態からそれを保護する必要があります（例えば 新しいクライアントが接続し、新しいクライアントに現在の状態を送信している間に別のクライアントが更新を送信するが、その新しいクライ サーバー上のクライアントのリストから切断されたタイムアウトクライアントを削除する必要があります）、認証が必要、HTTPS（HTTPS経由のwebsocketを含む）が必要、どこか など。