HN Show: Testemunhei um experimento incrível e criei uma versão simples

 (github.com/Momciloo)
2 pontos por GN⁺ 2023-11-26 | 1 comentários | Compartilhar no WhatsApp
  • Este repositório é um experimento simples de código criado com inspiração no trabalho de Björn Staal e inclui um link com mais informações sobre a ideia original
  • A execução local consiste em rodar npm i e depois abrir 2 terminais: um para o servidor e outro para o servidor estático do cliente
  • O servidor é executado com node server/server.js, e o cliente com cd client && http-server
  • Para conferir o experimento, abra 2 abas do navegador, respectivamente em localhost:8080?b=1 e localhost:8080?b=2
  • Os planos futuros incluem um modo exclusivo com localStorage, suporte a um número infinito de janelas com remoção das queries na URL e migração para WebRTC

Visão geral do projeto

  • Momciloo/fun-with-sockets é um projeto de exploração simples de código inspirado no trabalho de Björn Staal
  • Mais informações sobre a ideia original estão disponíveis neste post no LinkedIn
  • O README inclui uma imagem de gravação da tela do experimento

Como executar localmente

  • Primeiro, instale as dependências
    • npm i
  • Abra mais um terminal para usar 2 terminais no total
  • No primeiro terminal, execute o servidor
    • node server/server.js
  • No segundo terminal, vá para o diretório do cliente e execute o servidor estático
    • cd client && http-server
  • No navegador, abra duas abas usando valores de query diferentes
    • localhost:8080?b=1
    • localhost:8080?b=2

Ideias futuras

  • Planeja adicionar uma flag para executar apenas o modo localStorage
  • Planeja uma opção para dar suporte a um número infinito de janelas e eliminar a necessidade de queries na URL
  • Há um plano de migrar a implementação para WebRTC

Leituras relacionadas

1 comentários

 
GN⁺ 2023-11-26
Comentários do Hacker News

  • Demo incrível. Fico curioso para saber como funcionaria com vários monitores
    Também gostei do fato de a pessoa ter dito espontaneamente que se inspirou diretamente em outra e ter dado o devido crédito. Gostaria que houvesse mais gente assim na indústria de software

  • Acho que esse método, ou algo parecido, seria útil para gerenciar camadas em programas de pintura como Krita, Inkscape e Gimp
    Poderia ser implementado de forma simples como um painel de abas dentro da janela inteira do aplicativo, fazendo com que a camada da aba selecionada se tornasse a camada ativa para edição

  • Lembro que antigamente havia várias demos que usavam a posição e o tamanho das janelas. Também havia uma demo de simulação física; não lembro se era com líquido ou com vários sólidos, mas dava para soltar objetos de uma janela para outra
    Acho que nem seria preciso usar sockets; apenas um canal de mensagens entre janelas já bastaria. Quando uma janela abre uma janela filha, normalmente há permissões especiais de acesso entre elas, ao contrário de abas/janelas que ficam isoladas entre si, então parece fácil criar uma versão apenas local

  • Se você gosta desse tipo de coisa, WindowKill também pode ser divertido. É um videogame parecido com Asteroids que usa de forma inteligente várias janelas sobrepostas e interativas
    Você também precisa atirar nas bordas da janela; se não fizer isso, a janela encolhe. Mais adiante no jogo, aparecem janelas adicionais contendo chefes inimigos
    Vídeo de gameplay: https://youtu.be/7iP68FZWVxM

  • O link do tweet original de Bjorn Staal desapareceu; fico curioso se há algum link onde dê para ver o que era

  • Lembrei de uma demo legal de Pong jogado com janelas do navegador: http://stewd.io/pong/

  • Fico curioso se alguém pode explicar o que isso significa. Também não sei se entendi direito o GIF da página do GitHub; para mim parece apenas que as janelas estão compartilhando dados

    • O ponto principal não é tanto as janelas se comunicarem entre si, mas o uso das coordenadas das janelas expostas pela API do navegador
    • Parece uma arquitetura com vários clientes e um único servidor. Cada janela é um cliente separado; ela envia informações de geometria da tela ao servidor, e o servidor devolve um layout diferente para cada cliente, fazendo o conteúdo parecer um único objeto espalhado por várias janelas

  • Legal. Acho que ficaria mais natural se o retângulo da janela em foco fosse desenhado por cima

    • Talvez tenham feito assim para mostrar que não estão simplesmente usando transparência

  • Mas não entendo por que há atraso. Algo desse nível não deveria ser simples o bastante para ser processado instantaneamente?

    • Porque roda dentro do navegador. Mesmo entre um simples movimento do mouse e uma simples mudança nas coordenadas de um objeto, há muitas camadas de sistema e aplicação envolvidas, repassando eventos para código interpretado ou compilado e enviando as mudanças de estado até a tela
      Mesmo em código nativo, fazer duas janelas diferentes se moverem exatamente em sincronia, de forma instantânea, nem sempre é trivial. Por exemplo, havia um texto dizendo que alguns toolkits de GUI tornam impossível redimensionar janelas de forma suave. Mesmo que você implemente tudo por conta própria, ainda precisa esperar que o sistema seja rápido o suficiente para avisar a janela depressa e empurrar bitmaps para a tela. Uma abordagem melhor seria usar o compositor de software/hardware do sistema inteiro, adicionar uma camada por objeto e então alterar apenas as coordenadas; ainda assim, o compositor precisa ser bom o bastante para lidar com atualizações a 60/120/144 vezes por segundo ou mais quando necessário
    • Consultar a posição da janela infelizmente é lento. É uma característica dos recursos do navegador
    • Fico curioso se usar a API postMessage, sem passar pela rede, deixaria tudo mais imediato
    • O fato de janelas ou abas em segundo plano terem prioridade reduzida também pode ser um fator
    • Provavelmente é por causa da latência de rede do WebSocket, e pessoalmente também já vi a atualização da posição de janelas dar umas engasgadas estranhas de vez em quando

  • É um uso interessante do LocalStorage
    Já usei a mesma técnica de compartilhamento via LocalStorage para atualizar uma janela de destino quando uma configuração era alterada em outra janela do navegador. Para atualizar, basta escutar o evento storage.onChanged

    • Isso não parece usar armazenamento local. A estrutura parece ser a de um servidor baseado em WebSocket que envia aos clientes a posição das outras caixas sempre que elas se movem