A tecnologia por trás do One Million Checkboxes escalando até 650 milhões de marcações

Marcando 650.000.000 de caixas de seleção: lidando com uma popularidade inesperada

Em 26 de junho de 2024, o site One Million Checkboxes (OMCB) foi lançado

• Um site com 1 milhão de caixas de seleção globais, em que ao marcar uma caixa a mudança é refletida imediatamente para todos os usuários
• Em apenas 30 minutos após o lançamento, milhares de usuários marcaram milhões de caixas de seleção
• O tráfego veio de Hacker News, /r/InternetIsBeautiful, Mastodon, Twitter e outros
• Também foi destacado no Washington Post e no New York Times
• Mais de 50 milhões de caixas de seleção foram marcadas no primeiro dia
• Até o encerramento do site, duas semanas depois, mais de 650 milhões de caixas de seleção foram marcadas

Arquitetura original

• O estado das caixas de seleção era armazenado em 1 milhão de bits (125 KB)
• Os clientes renderizavam as caixas de seleção usando um bitset e notificavam o servidor sobre o estado das marcações
• O servidor usava Redis para atualizar os bits e fazer broadcast para todos os clientes
• Conteúdo estático era servido via nginx, enquanto um servidor Flask cuidava do estado do bitset e das conexões WebSocket
• O Redis funcionava tanto como armazenamento de estado quanto como fila de mensagens

Princípios de escalabilidade

• Limite de custos: a escalabilidade foi pensada com serverless para evitar falência, calculando os custos matematicamente
• Aceitar soluções de curto prazo: assumiu-se que a popularidade do site seria temporária, então foram escolhidas soluções rápidas
• Usar tecnologias simples e self-hosted: só foram adicionadas tecnologias que pudessem ser operadas e depuradas diretamente
• Buscar diversão: a diversão foi colocada acima do dinheiro
• Manter o estado global: todos os usuários deveriam ver as mudanças imediatamente

Primeiro dia: popularidade explosiva

• Em 30 minutos, a carga no servidor disparou
• Servidores adicionais foram colocados no ar para distribuir a carga
• Atualizações em lote foram introduzidas para resolver problemas de conexão com o Redis
• A instância gerenciada de Redis da DigitalOcean foi atualizada

Não havia plano para a noite

• Foi preciso se planejar enquanto exibia um jogo Pacman com reconhecimento facial em um acampamento da ITP
• Um iPad foi levado para subir servidores
• A convenção de nomes dos servidores foi evoluindo enquanto 8 VMs de workers eram operadas
• O número de processos Flask foi reduzido e o tamanho dos lotes de atualização foi aumentado para diminuir a carga

Problema de largura de banda

• O preço da largura de banda da DigitalOcean não havia sido considerado
• A frequência dos snapshots de estado foi reduzida e o tamanho das atualizações também
• O utilitário tc foi usado para limitar a quantidade de dados transmitidos por segundo

Segundo dia: continuou crescendo

• O site caiu por falta de validação adequada de entrada
• Réplicas do Redis foram adicionadas para distribuir a carga
• Como os processos Flask continuavam travando, foi escrito um script de reinicialização automática

Problema com atualizações antigas

• Houve um problema em que clientes aplicavam atualizações antigas e exibiam o estado incorretamente
• Timestamps foram adicionados para garantir a ordem das atualizações

Reescrita em Go

• O backend foi reescrito em Go junto com um amigo engenheiro de performance
• O desempenho melhorou bastante
• Ataques DDoS foram mitigados via Cloudflare

Encerramento do site

• O comportamento do site foi alterado para congelar se as caixas de seleção não fossem desmarcadas rapidamente
• O Redis foi usado para gerenciar o estado de congelamento
• O site foi encerrado após duas semanas

Lições aprendidas

• Foi a segunda vez que um servidor com um backend “de verdade” foi colocado na internet pública
• Escolher soluções de curto prazo acabou sendo uma boa decisão
• A força do Redis e do nginx ficou evidente mais uma vez
• Ficou clara a vontade das pessoas por sites em que possam interagir anonimamente

Resumo do GN⁺

• Este texto trata dos problemas técnicos causados pela popularidade inesperada do site e do processo para resolvê-los
• Mostra que uma arquitetura simples com Redis e nginx também pode lidar com tráfego em larga escala
• Explica como resolver rapidamente os problemas e estabilizar o site com soluções de curto prazo
• Aborda vários desafios técnicos, como a reescrita em Go e a defesa contra DDoS via Cloudflare
• Um projeto semelhante em funcionalidade é o /r/Place do Reddit, um projeto colaborativo em grande escala

[GN⁺]

Comentários no Hacker News

• Foi possível aprender muitas lições e conhecimentos históricos

  • Lida com todo tipo de interrupção e ponto de falha, mas não menciona o problema de armazenamento
  • Eu não sabia que o Redis podia usar Lua, e isso me despertou interesse em usá-lo como estado substituto
  • Um dos maiores incômodos com serviços de nuvem é a questão da largura de banda, já que não há um limite rígido para evitar cobranças excedentes

• Foi um ótimo texto! Parabéns pelo site também, mas o próprio texto é a parte da qual mais deveria se orgulhar

• Construir o site em apenas dois dias foi uma boa escolha

  • É uma lição importante que engenheiros em início de carreira deveriam aprender
  • Problemas de escalabilidade não são realmente problemas até virarem um problema de verdade
  • Nesse ponto, é um bom problema, e não é tão difícil de resolver quanto parece

• Projeto relacionado recente:

  • "One Million Checkboxes" - link - junho de 2024 (305 comentários)

• Projeto divertido

  • Há 6 anos, lancei no Android um app de edição colaborativa de pixels chamado Pixmap
  • Usava uma fila para aplicar cada evento a uma imagem PNG, e o cliente carregava o PNG inicial ao se conectar
  • Cada evento de desenho de pixel era enviado ao cliente como um pequeno objeto
  • A carga inicial aproveita compressão de imagem, e o conjunto de mudanças é muito pequeno
  • Como cada evento é salvo no log, é possível "rebobinar" a imagem
  • Link da demo

• Foi um ótimo texto - fiquei curioso sobre quanto isso custou

• Isso confirmou a crença de que as pessoas anseiam por interações anônimas limitadas

• Como iniciante em backend, fiquei curioso se existe uma arquitetura alternativa simples para esse projeto

  • Espero que haja uma maneira mais fácil de hospedar um milhão de estados e sincronizá-los com o cliente
  • Algumas soluções no texto foram difíceis de entender
  • Meus parabéns ao autor - o projeto é excelente

• Muito legal!

  • Fico curioso se o próximo texto será uma análise estatística dos checkboxes
  • Lembro de ter ficado triste porque o checkbox que escolhi foi desmarcado quase imediatamente

• Fico curioso se o jogo ainda está no ar

  • Quando acessei One Million Checkboxes, nada estava marcado, e só vi a seguinte mensagem no console JS
  • {"total":0,"totalGold":0,"totalRed":0,"totalGreen":0,"totalPurple":0,"totalOrange":0,"recentlyChecked":false}