é possível criar um site interativo para vários usuários em HTML5?
HTML em si não pode fazer isso. O principal problema é que mesmo se você retirar a mover as coisas ao redor do navegador (que você pode ser capaz de fazer apenas com HTML e CSS, mas se você conseguir fazer isso, seria bastante exótica uso de CSS), não há nenhuma maneira em torno do fato de que seu website, de alguma forma, precisa obter informações de um cliente para os outros – isto é, se eu mover uma caixa no meu computador, seu computador precisa saber. E o próprio HTML não pode fazer isso sozinho.
em suma, você precisa de algum tipo de servidor; e você também precisa de alguma quantidade de script do lado do cliente, canonicamente feito em JavaScript, para instrumentalizar o intercâmbio de informações no lado do cliente das coisas.
Há muitas formas de arquitetar isso, e os detalhes irão variar drasticamente, mas em poucas palavras, o que você precisa fazer é esta:
No cliente:
-
o Uso de JavaScript para trancar a eventos de movimentação dessas caixas.
-
quando uma caixa for movida, envie uma mensagem adequada para o servidor.
-
ao mesmo tempo, ouça as mensagens que chegam do servidor e mova as caixas de acordo.
A canonical tecnologia para usar para falar com o servidor seria o websockets, mas se você insistir, você também pode fazê-lo com a simples requisições AJAX, é um pouco menos eficiente e mais desajeitado, porque não é possível “ouvir” para mensagens usando apenas o HTTP, você tem que manter a consulta o servidor. (Ou seja, é “você tem uma mensagem para mim? e agora? e agora? e agora? …”vs.” diga-me quando você tiver uma mensagem para mim, Vou esperar”).
o formato da mensagem provavelmente deve ser baseado em JSON-ele está embutido no JavaScript do navegador, é conhecido por não causar nenhum problema no fio e é o formato mais usado, Portanto, haverá um bom suporte, independentemente das tecnologias que você escolher para o resto da sua pilha. Não é o formato de serialização mais eficiente, mas não estamos falando de grandes quantidades de dados aqui.
para a parte Real “moving boxes around”, você pode usar alguma estrutura de frontend como React, Vue, etc., mas para esse tipo de coisa, acho que é mais fácil usar a manipulação direta do DOM por meio da API DOM do navegador integrada.
no servidor:
-
mantenha uma estrutura de dados compartilhada que descreva onde cada bloco está.
-
ouça as conexões do websocket.
-
quando um novo cliente se conectar, envie as posições de todos os blocos, mantenha a conexão aberta.
-
quando um cliente envia uma atualização de posição de bloco, atualize sua estrutura de dados compartilhada e encaminhe a atualização para todos os clientes conectados.
não importa muito qual idioma e pilha você usa para o servidor, desde que haja um bom suporte ao websocket.
na verdade, este é essencialmente um bate-papo na web, exceto que suas “mensagens de bate-papo” são posições de caixa em vez de texto, e com a torção que você mantém “histórico de bate-papo” em forma compactada (a estrutura de dados “situação atual”) indefinidamente.É claro que o diabo está nos detalhes. Você está lidando com uma estrutura de dados compartilhada que é acessada simultaneamente, então você precisa proteger isso contra as condições de corrida (por exemplo, quando um novo cliente se conecta, e outro cliente envia uma atualização, enquanto você está enviando o estado atual para o novo cliente, mas antes de iniciar a transmissão de atualizações para que o novo cliente, o novo cliente não vai receber a atualização, e a sua situação vai ser inconsistente com o resto da rede), você precisa atender para se desconecta (e reconectar automaticamente), você precisa de tempos de espera em suas conexões para que você não vazamento de conexões ativas (por exemplo,, você precisa remover clientes desconectados e com tempo limite da lista de clientes no servidor), você precisa de autenticação, você precisa de HTTPS (incluindo websockets sobre HTTPS), você precisa implantar tudo em algum lugar, etc. etc.