La tecnología detrás de escalar One Million Checkboxes hasta 650 millones de checks

Marcar 650,000,000 casillas: cómo lidiar con una popularidad inesperada

El 26 de junio de 2024 se lanzó el sitio web One Million Checkboxes (OMCB)

• Un sitio con 1 millón de casillas globales, donde al marcar una casilla el cambio se refleja de inmediato para todos los usuarios
• En solo 30 minutos después del lanzamiento, miles de usuarios marcaron millones de casillas
• Llegó tráfico desde Hacker News, /r/InternetIsBeautiful, Mastodon, Twitter y otros sitios
• También apareció en The Washington Post y The New York Times
• El primer día se marcaron más de 50 millones de casillas
• Hasta el cierre del sitio, dos semanas después, se marcaron más de 650 millones de casillas

Arquitectura original

• El estado de las casillas se almacenaba en 1 millón de bits (125 KB)
• El cliente renderizaba las casillas usando un bitset y notificaba al servidor sobre los cambios de estado
• El servidor usaba Redis para actualizar los bits y hacer broadcast a todos los clientes
• nginx servía el contenido estático, y un servidor Flask manejaba el estado del bitset y las conexiones WebSocket
• Redis cumplía el papel de almacenamiento de estado y cola de mensajes

Principios de escalamiento

• Límite de costos: calculó matemáticamente los costos para escalar con serverless sin terminar en bancarrota
• Aceptar soluciones de corto plazo: asumió que la popularidad del sitio sería temporal y eligió soluciones rápidas
• Usar tecnología simple y autohospedada: solo agregó tecnologías que pudiera operar y depurar directamente
• Priorizar la diversión: puso la diversión por encima del dinero
• Mantenerlo global: conservó un estado global para que todos los usuarios vieran los cambios de inmediato

El primer día: popularidad explosiva

• En 30 minutos la carga del servidor se disparó
• Levantó servidores adicionales para distribuir la carga
• Introdujo actualizaciones por lotes para resolver problemas de conexión con Redis
• Actualizó la instancia administrada de Redis en DigitalOcean

No había plan para pasar la noche

• Hizo planes para exhibir un juego de Pacman con reconocimiento facial en un campamento de ITP
• Llevó un iPad para levantar servidores
• Fue evolucionando su convención de nombres para servidores mientras operaba 8 VM worker
• Redujo la cantidad de procesos Flask y aumentó el tamaño de los lotes de actualización para bajar la carga

Problemas de ancho de banda

• No había considerado el precio del ancho de banda en DigitalOcean
• Redujo la frecuencia de los snapshots de estado y el tamaño de las actualizaciones
• Usó la utilidad tc para limitar la cantidad de datos transmitidos por segundo

Segundo día: seguía creciendo

• El sitio se cayó por no validar correctamente las entradas
• Agregó una réplica de Redis para distribuir la carga
• Los procesos de Flask seguían fallando, así que escribió un script de reinicio automático

Problema de actualizaciones antiguas

• Los clientes aplicaban actualizaciones antiguas y mostraban un estado incorrecto
• Agregó marcas de tiempo para garantizar el orden de las actualizaciones

Reescritura en Go

• Reescribió el backend en Go junto con un amigo ingeniero de rendimiento
• El rendimiento mejoró de forma importante
• Defendió ataques DDoS a través de Cloudflare

Cierre del sitio

• Lo cambió para que las casillas se congelaran si no se desmarcaban con suficiente rapidez
• Usó Redis para gestionar el estado de congelamiento
• Cerró el sitio después de 2 semanas

Lo aprendido

• Fue la segunda vez que desplegaba en el internet público un servidor con un backend “real”
• Elegir soluciones de corto plazo fue una buena decisión
• Volvió a confirmar lo potentes que son Redis y nginx
• Confirmó que existe un deseo real por sitios donde la gente interactúa de forma anónima

Resumen de GN⁺

• Este artículo trata los problemas técnicos provocados por la popularidad inesperada del sitio web y cómo se resolvieron
• Muestra que incluso una arquitectura simple con Redis y nginx puede manejar tráfico a gran escala
• Explica cómo resolver problemas con rapidez y estabilizar el sitio mediante soluciones de corto plazo
• Aborda varios desafíos técnicos, como la reescritura a Go y la defensa contra DDoS mediante Cloudflare
• Un proyecto similar en espíritu es /r/Place de Reddit y otros proyectos colaborativos a gran escala

[GN⁺]

Opiniones en Hacker News

• Se pudieron aprender muchas lecciones y conocimientos históricos

  • Se abordaron todo tipo de interrupciones y puntos de falla, pero no se mencionó el problema del espacio de almacenamiento
  • No sabía que Redis podía usar Lua, y me interesó usarlo como estado de reemplazo
  • Uno de los mayores problemas con los servicios en la nube es el tema del ancho de banda, ya que no hay un límite duro para evitar cargos excesivos

• ¡Fue un gran artículo! Felicidades también por el sitio web, pero la parte de la que más debería enorgullecerse es del propio texto

• Haber construido el sitio en solo dos días fue una buena decisión

  • Es una lección importante que los ingenieros al inicio de su carrera deberían aprender
  • Los problemas de escalado no son realmente un problema hasta que de verdad lo son
  • En ese momento, es un buen problema, y no es tan difícil de resolver como uno pensaría

• Proyecto relacionado reciente:

  • "One Million Checkboxes" - enlace - junio de 2024 (305 comentarios)

• Es un proyecto interesante

  • Hace 6 años lancé en Android una app colaborativa de edición de píxeles llamada Pixmap
  • Usaba una cola para aplicar cada evento a una imagen PNG, y el cliente cargaba el PNG inicial al conectarse
  • Cada evento de dibujo de píxeles se enviaba al cliente como un objeto pequeño
  • Se aprovecha la compresión de imágenes en la carga inicial y el conjunto de cambios es muy pequeño
  • Como cada evento se guarda en un log, se puede "rebobinar" la imagen
  • Enlace al demo

• Fue un gran artículo; tengo curiosidad por saber cuánto costó

• Se confirmó mi creencia de que la gente anhela interacciones anónimas limitadas

• Como principiante en backend, me pregunto si existe una arquitectura alternativa simple para este proyecto

  • Ojalá hubiera una forma más fácil de alojar un millón de estados y sincronizarlos con los clientes
  • Algunas de las soluciones del artículo fueron difíciles de entender
  • Mis felicitaciones al autor: el proyecto es excelente

• ¡Qué bueno!

  • Me pregunto si el siguiente artículo será un análisis estadístico de las casillas
  • Recuerdo que me dio tristeza que la casilla que elegí se desmarcara casi de inmediato

• Me pregunto si el juego sigue activo

  • Cuando entré a One Million Checkboxes, no había nada marcado y en la consola de JS solo aparecía el siguiente mensaje
  • {"total":0,"totalGold":0,"totalRed":0,"totalGreen":0,"totalPurple":0,"totalOrange":0,"recentlyChecked":false}