Pon a prueba tus reflejos (y mi aplicación)

Gracias a todos por la cálida bienvenida. Estoy muy emocionado. Me alegra que tengamos una casa bastante llena aquí hoy. Así que mi nombre es Eddie, y muchas gracias por estar aquí. Soy un defensor de desarrolladores como parte del equipo de PayPal, y hoy quiero hablar sobre datos en tiempo real. Pero primero, juguemos un juego.

Estoy muy emocionado de ver cómo va esto. Como se mencionó, el juego es Whack-A-Mole. ¿Quién conoce el juego Whack-A-Mole? ¿75%? Sí, eso es realmente bueno. Bien, genial. Les prometo que no se lastimaron topos en la creación o el juego de este juego. Pero solo para aclarar, esta charla no trata sobre desarrollo de juegos.

Se trata de datos en tiempo real con el proyecto de código abierto Superbase. El objetivo del juego es golpear al topo, si no has jugado antes, pero no voy a entrar en eso. Voy a omitir eso. Parece que todos saben cómo hacerlo. Pero la parte que no saben es que, con los topos, hay algunos logotipos de PayPal donde pueden obtener un bono de 10 puntos. Así que intenten conseguirlos, y aparecen en la segunda mitad del juego. Bien, juguemos. Así que si escanean este código QR, esta es una gran foto, solo un segundo. ¿Puedo tomar una foto de todos ustedes? Perfecto. Escaneen el código QR.

Si no quieren escanear el código QR o su teléfono no tiene cámara, pueden usar el enlace más tarde, y pueden enviarlo a sus amigos si no están aquí también. Por favor, usen el nombre en su insignia por dos razones. Una, va a estar en la pantalla, y no quiero nada grosero. Y dos, hay grandes premios por ganar. Hay regalos adicionales que obtienen por estar aquí, pero es por orden de llegada. Así que vayan al stand inmediatamente después, y digan que han estado aquí, y muéstrenles el juego en su aplicación, tal vez una foto mía en el escenario. Y también, hay un iPad Air.

Creo que es un Air para ganar a las 5pm hoy, así que necesitarán estar en el stand a las 5pm para ver quién ganó. Una última cosa, no cierren el navegador después del juego, porque necesitamos eso para el final de la charla. Así que mientras juegan, hablemos de datos en tiempo real. Entonces, ¿por qué son importantes los datos en tiempo real? Nadie quiere seguir actualizando la página. Cuando muestro la tabla de clasificación, no quiero seguir actualizándola y ver si han llegado nuevos datos. Y la encuesta no es realmente una buena solución, porque no creo que realmente resuelva nada. Podría hacerlo a corto plazo, pero cada solicitud va al servidor, y tal vez nada ha cambiado. Así que eso desperdicia computación, desperdicia ancho de banda, y realmente se complica a escala. Y para este juego, como les voy a mostrar en un minuto, necesito específicamente algunas características en tiempo real. Puedo ver cuántas personas están jugando ahora mismo. Llegaremos a cómo eso probablemente funciona en breve. Quiero decir, usas datos en tiempo real todos los días, Slack, Discord, WhatsApp, así que lo ves todo el tiempo. Así que déjame mostrar la tabla de clasificación y ver cómo van las puntuaciones. ¿Cómo le va a todos? Wow. Bien, mi computadora estaba dormida y bloqueada. Déjame empezar todo de nuevo. Wow, 160 juegos en progreso. Quiero decir, eso es realmente, realmente impresionante. Espero que alguien esté tomando una captura de pantalla de esto. Creo que necesito hacerlo. Espero que eso funcione, un pequeño atajo de teclado. Pero sí, la gente está jugando. Muchas gracias. Esto es genial. Así que déjame explicarte un poco sobre la tabla de clasificación y qué es en tiempo real. Bueno, todo es en tiempo real. Pero si miras los juegos en progreso, esas son personas jugando ahora mismo, y vamos a hablar sobre cómo podemos lograr eso. Y luego tienes el total de juegos jugados también. Eso aumentará a medida que los juegos en progreso disminuyan. Así que a medida que los resultados lleguen cuando el juego termine, entonces el total de juegos jugados aumentará. Y también la tabla de clasificación y otras secciones también se actualizarán en tiempo real.

Bien. Creo que alguien escribió mal su nombre. Podría haber un error tipográfico en primer lugar. ¿Cuántos juegos has jugado? ¿Solo uno, dos? ¿Dos? Bien. Perfecto. Listo para continuar. ¿Alguien logró obtener el logo de PayPal? Algunas personas. ¿Uno de ellos, dos de ellos, o tres de ellos? ¿Dos? ¿Alguien consiguió tres? Oh, hay un tres y un tres. Oh, hay algunos de ustedes. El juego es demasiado fácil. Necesito hacerlo más difícil la próxima vez. Bien. Increíble. Quiero darte una breve historia de fondo, no sobre mis 15 años, cómo llegué aquí, sino cómo llegué aquí hoy con PayPal. Así que recientemente me uní a PayPal, y dijeron, ¿puedes hacer una charla divertida en JS Nation? Y pensé, bueno, hablo sobre código abierto, desarrollo full-stack, pruebas automatizadas. Creo que eso es divertido, pero tal vez eso no cuente como divertido. Así que pensé en hacer algo un poco diferente. Y vi a Nikki de nuestro equipo hace un momento, y ella me dio la idea de construir un juego. Y nunca había construido un juego antes, así que pensé que sería divertido para mí también.

Así que comencé a pensar en qué juegos funcionarían bien en el navegador y en nuestros teléfonos. ¿Y qué hacemos todos en 2026? Preguntamos a la IA. Curiosamente, no le pedí a la IA ideas de juegos. Mirando hacia atrás, probablemente eso habría sido una buena idea. Lo hice manualmente, fui a la vieja escuela con eso. Pero cuando encontré Whac-A-Mole, pensé, bien, haré que la IA haga un MVP de una solución del lado del cliente con la que pudiera jugar. Así que este era yo. Estaba realmente, realmente feliz. Pero desafortunadamente, no salió como planeaba. Así que le pedí a la IA que construyera el MVP, y surgieron resultados, pero no era el resultado que esperaba. Inicialmente, el topo estaba aplastado, y el botón de inicio no tenía un puntero sobre él.

Así que en mi computadora, no pensé que pudiera hacer clic en él, pero podía. Y ese no era el mayor problema que tenía. El mayor problema que tenía, el botón de inicio no hacía nada. No funcionaba. Había probablemente mil líneas de código en este proyecto que la IA había generado, pero no funcionaba. El botón de inicio no funcionaba. Así que iba y venía con la IA tratando de que arreglara el problema. Pero desafortunadamente, solo estaba sobre-ingeniando esto. Quiero decir, ¿alguien ha tenido un desafío similar, algunas manos levantándose? Sí, decía, tomaré una captura de pantalla. Yo estaba como, está bien, adelante, aprobado. Tomaré un video.

No hay video. Hay un botón y nada sucede, y estaba cambiando cientos de líneas de código. Pero sí, no fue un buen comienzo para el MVP. No pensé que eso iría tan bien. Así que lo que hice, pensé, comenzaré de nuevo. Esta vez, no dejaría el modelo en automático. Elegiría un modelo específico. Así que elegí un modelo por tres, y creó un juego. Y funcionó. Y necesitaba algunos ajustes, un poco tosco en los bordes, pero funcionó. Y estaba bastante contento con eso como punto de partida.

tosco en los bordes, pero funcionó. Y estaba bastante contento con eso como punto de partida. ¿Sabes qué me di cuenta ese día? Que un modelo por tres es mejor. Quema tokens mucho más rápido.

Curiosamente, los quema tres veces más rápido. Cuando me di cuenta de que Whack-A-Mole era el juego con el que quería continuar, comencé a agregar super base y características en tiempo real. Hablemos brevemente sobre la historia de cómo llegamos al tiempo real. No sé si alguien recuerda en el pasado, solíamos presionar F5 mucho en el desarrollo local o en internet, solo para ver si había llegado un nuevo mensaje. Así que caminando por el camino de la memoria, todo comenzó siendo una solicitud y una respuesta.

Bueno, todavía lo es. Pero tenías que seguir preguntando, ¿había algún dato nuevo o algún mensaje nuevo, nueva información allí? Quiero detener eso porque eso me está haciendo un poco, me está mareando un poco. Estoy seguro de que también te está mareando. Era casi como, ¿hay algún dato nuevo ya? ¿Hay algún dato nuevo ya? ¿Ya llegamos? No, espera un segundo. Eso es cuando estás en el coche con tus padres en un viaje largo. Pero se sentía un poco así una y otra vez.

Y era muy manual. Y si tenías mil personas o 10,000 personas haciendo eso en alguna, ya sabes, venta que está sucediendo en línea, no es muy bueno. Lo bueno de mirar, supongo que era una prueba de carga gratuita. Luego, después de eso vino lo que me gusta llamar la era del hack, donde teníamos AJAX. ¿Quién recuerda AJAX? Sí. Así que la web se estaba convirtiendo más en una plataforma de aplicaciones. Y los ingenieros siempre encontrarán una manera. Creo que eso es cierto. Así que había AJAX. Reemplazaba partes de tu página detrás de escena.

También estaba Comet. ¿Alguien usó Comet? ¿No? Algunas personas. Sí, un Comet haría esta conexión colgante. Haría una solicitud. Y si no había datos, simplemente esperaría. Y cuando obtenía datos, cerraría y abriría una nueva. Así que eran conexiones colgantes. Y tampoco me gustaba eso. Recuerdo cuando salió eso. Y estaba usando AJAX. Y un amigo dijo, estoy usando Comet. Deberías probarlo. Ambos suenan no muy bien. Pero era lo que teníamos en ese momento. Y había otras soluciones. Y no me hagas empezar con diferentes navegadores. ¿Quién recuerda, como, los desafíos de los navegadores, diferentes versiones de navegadores? Y funcionaba en este navegador, pero no en ese navegador. Creo que la mayoría de nosotros, ¿verdad? Como, eso era difícil.

Así que afortunadamente, personas mucho más inteligentes que yo se dieron cuenta de que necesitábamos un estándar para datos bidireccionales. Y fue entonces cuando los WebSockets se convirtieron en un estándar. Así que podíamos tener comunicación abierta entre el navegador y el servidor. Todo esto es genial, ¿verdad? Esto es perfecto. Estamos en un lugar feliz. Desafortunadamente no. La especificación estaba cambiando, como esperábamos. Pero la adopción por parte de los navegadores fue bastante lenta. Y algunas adopciones de navegadores fueron más lentas que otras. No mencionaremos nombres. Así que definitivamente fue un desafío.

Y una última cosa. No sé si alguien está al tanto. Pero también recuerdo que diferentes navegadores adoptando el estándar lo interpretarían de manera muy diferente también. Así que fue muy difícil en ese momento. Pero luego Socket.IO, el proyecto de código abierto, Socket.IO vino al rescate. Así que sentí que había luz al final del túnel. ¿Quién ha usado esto antes? Sí, es un gran proyecto, ¿verdad? Realmente impresionante. Realmente se convirtió en el estándar. Recuerdo muchos proyectos en los que trabajé, usaban Socket.IO porque les daba esa abstracción de todas esas complejidades. Se sentía realmente, realmente agradable de usar. E incluso recurriría a long polling si los WebSockets no eran soportados en ese navegador. Así que realmente cubría todas las bases. En ese momento, los Sockets como un servicio se hicieron bastante populares.

Muchas empresas comenzaron a surgir tratando de mejorar la experiencia del desarrollador nuevamente. Luego estaban los WebSockets nativos en los navegadores. Finalmente nos dimos cuenta de que lo necesitábamos de forma nativa, y entonces Socket.IO ya no era necesario. Lo siento, Socket.IO. Fue un gran proyecto, pero tenía mucho overhead. Se hizo más y más grande con el tiempo tratando de cubrir todas las bases. Así que nos alejamos de hacerlo funcionar a cómo podemos hacerlo eficiente y cómo podemos mejorar la DX, la experiencia del desarrollador.

Así que voy a reproducir este GIF mientras digo unas últimas palabras sobre qué es un WebSocket. Lo he mencionado bastantes veces. Así que HTTP era la solicitud y respuesta. Terminaba ahí y eso era todo. Pero con WebSockets quería abrir un flujo de datos bidireccional persistente que era completamente dúplex. Y puedes tener seguro e inseguro, al igual que con HTTP y HTTPS. Todavía es iniciado por el cliente como una solicitud HTTP y se actualiza a un WebSocket.

Y ahora al proyecto Superbase que he usado para el back end de este juego. Realmente me gusta Superbase. Quiero centrarme en las características en tiempo real. Tienen muchas otras características. Tienen autenticación de base de datos, almacenamiento, muchas cosas geniales. Pero lo que realmente me gusta de las características en tiempo real, es que lo hizo aún más fácil de usar, lo cual pensé que era brillante. Tienes eventos de base de datos. No tienes que pensar en enviar el evento. Ya se va a enviar por ti. Solo estás pensando en recibir el evento. Y luego tienes presencia, en la que vamos a entrar en más detalle también, y difusión.

Y has visto estos en mi juego. De hecho, miento. Has visto dos. Has visto presencia, que era cuántas personas están jugando ahora mismo. {{^}}Y has visto los eventos de la base de datos cuando cuántos juegos totales jugados. Cada vez que se hacía una inserción, se incrementaba ese. Hay uno más para mostrarte, la difusión. Y por eso te pedí que mantuvieras el navegador abierto después. Si tu teléfono está bloqueado, está bien. Debería, con suerte, seguir funcionando.

Así que de estas tres características en tiempo real, en realidad creo que los cambios de Postgres son los más fáciles de entender. Quiero decir, ¿quién ha trabajado con datos en tiempo real antes regularmente? ¿Como un 20%? Sí, no se usa tanto. Y creo que mostrarle a la gente cómo en realidad no es tan difícil, podemos mejorar mucho la experiencia del usuario. Así que sí, con los cambios de Postgres es el total de juegos jugados. Así que 41. Y cada vez que se ingresaba un nuevo juego, eso incrementaba. Así que solo tenemos que suscribirnos a eso. No necesitamos enviar el evento.

Vamos a echar un vistazo al código. Este es todo el código que necesito para eso, con un 5% de mentira. Llegaré a la mentira en un minuto. Así que especificamos el canal. Y lo haremos siempre. Ese será un tema común. En este caso, puede ser cualquier cadena que desees. Pero por favor usa una constante y ponla en una configuración. De lo contrario, te meterás en un lío. Y luego tenemos la función on. Toma tres parámetros. Así que el primero es el tiempo real al que queremos escuchar. Así que en este caso, cambios de Postgres. Pero podría ser presencia o difusión, que cubriremos a continuación.

caso, cambios de Postgres. Pero podría ser presencia o difusión, que cubriremos a continuación. Y luego el siguiente parámetro es a qué queremos que nuestro manejador de eventos escuche. Así que en esta situación, queremos el esquema público. Y este es un campo requerido. La mayoría de las veces, será público, creo, para la mayoría de las personas. El evento no es opcional. Pero podrías tenerlo como un comodín. Solo me interesan las inserciones. No me interesan las actualizaciones. Así que especifiqué inserciones. Pero podrías tener un comodín. Y la tabla, solo me interesan los resultados del juego.

Pero eso podría ser omitido si quisieras todo de tu base de datos. Y hay filtros adicionales que puedes agregar también. Y el tercer parámetro es mi callback. Solo quiero incrementar cada vez que hay una inserción. Eso es todo. Y luego nos suscribimos. Así que registra nuestro cliente con el servidor. Realmente simple, ¿verdad? ¿Quién piensa que eso es bastante simple? Unos pocos más. Bien. Genial. ¿Alguien ve algo mal con esto, sin embargo? Y no es que falte un punto y coma o una coma. Esto funciona y se ejecuta. Pero hay un escenario en el que esto no funcionaría. Sí, dilo. Lo siento. Mucho tráfico. Sí, ese es un desafío con el tiempo real con la base de datos. Eso es correcto. Especialmente con la seguridad.

¿Algo más? Así que el problema es, si pierdo internet, si estoy en un tren y pierdo la conexión, entonces si retrocedo uno, verás que tengo 41 juegos jugados. Así que digamos que estoy en el tren, pierdo internet, y se completan cuatro juegos más. Eso no incrementará. Es disparar y olvidar. Así que cuando vuelva a tener internet, y un quinto juego llega, irá a 42. Pero eso es realmente incorrecto. Debería ser 46. Así que podrías refrescar la página para solucionarlo. Pero eso no es realmente una buena solución. Porque la conexión WebSocket permanece abierta indefinidamente a menos que se cierre, o haya una interrupción en la conexión a internet, como mencioné. Y es, sí, disparar y olvidar. Y creo que eso ayuda con el rendimiento y la escalabilidad.

Y podemos resolverlo bastante fácilmente, realmente. En el subscribe, así que cuando se reconecta, simplemente vamos y recopilamos los últimos datos nuevamente. Así que solo sucede cuando la página se carga, o si nos reconectamos. Y lo genial de esto es que no tienes que escribir mucho más código, porque esa función ya existía en mi código cuando la página se cargó por primera vez. Así que es realmente, realmente sencillo porque no queremos refrescar la página. Y luego simplemente continuará recibiendo eventos futuros.

Así que hablemos de presencia. Esta es mi característica favorita en tiempo real de Super Base porque esto solía ser realmente, realmente difícil de hacer. Así que los juegos en progreso que viste en la tabla de clasificación, eso se hizo con las características de presencia, cuántas personas están realmente jugando el juego ahora mismo. Has visto esto en Google Docs con, en la parte superior derecha, ves cuántas personas están viendo este documento con su foto de perfil. Y lo pasas por encima, y obtienes su nombre. Aquí solo estoy enviando el nombre del jugador, y solo lo estoy contando. Pero puedes personalizarlo como quieras. Así que la presencia nos permite rastrear el estado entre usuarios. Y tiene dos partes.

Así que antes, el ejemplo anterior, tenía una parte. Esto tiene dos partes. Así que esto es en el jugador, así que las personas que están jugando el juego. Así que tenemos el canal, y esto puede ser cualquier cosa. Podemos especificarlo nosotros mismos. Y luego en la función subscribe, enviamos el rastreador de presencia cuando nos suscribimos. Y eso es todo. Y nuevamente, esto no es ideal para un alto volumen de datos. Y por alto volumen, me refiero al seguimiento del ratón. No me refiero a muchas personas, sino al jugador tratando de enviar muchos y muchos datos. Hay otra solución para eso.

Pero eso es bastante sencillo. Y luego en mi leaderboard, de nuevo, es bastante sencillo también. Así que esta es la parte dos. Nos conectamos al mismo canal, así que es la misma constante. Y luego tenemos tres parámetros de nuevo. Así que el primer parámetro no es postgres changes. Es presence. Eso es lo que queremos escuchar. Y luego el segundo, queremos escuchar el evento sync. Hay tres eventos para presence. Sync es si alguien se conecta y desconecta. Hay join y leave. No quería incrementar y decrementar a medida que las personas se unían. Quería que simplemente siempre fueran todos los eventos, y solo los contaría cada vez porque el número no va a ser tan grande. Pero puedes tener algunas mejoras de rendimiento si lo necesitas. Hay formas de hacerlo, y es altamente personalizable. Y el tercero es el callback donde cuento a todos los que están jugando en este momento, y lo configuro para la UI. Broadcast. Así que broadcast es el que usarás más. Es el más escalable. Es el más flexible. Usarlo para notificaciones, eventos personalizados, datos de alta frecuencia como el seguimiento del ratón, si eso es lo que querías hacer. Y esto viene en dos partes de nuevo, pero voy a darle la vuelta, y vamos a empezar en la parte del leaderboard porque eso es lo que va a enviar el evento, y recibir el evento es tu página de juego. Así que especificamos el canal. De nuevo, he elegido el canal aquí, y luego te voy a enviar, el tipo es el broadcast, y luego hay un evento, y esta vez estoy especificando el evento. Puedes escuchar todos los eventos o escuchar solo este, y obviamente he configurado tu juego para escuchar solo este. Y luego configuro el payload, y el payload podría ser lo que quieras, pero solo estoy diciendo que la tienda de swag sea verdadera. Una forma de ver el canal y el evento es, el canal podría ser las conferencias, como podría haber múltiples conferencias sucediendo alrededor del mundo. Eso podría ser el canal, y el evento serían las pistas dentro del canal. Así es como trataría de desglosarlo. Y Superbase tiene algunas características realmente buenas sobre, incluso puedes enviar un evento en tiempo real a través de una solicitud HTTP. Si no quieres que tu cliente se conecte a través de WebSocket, puedes simplemente hacer una solicitud HTTP, y Superbase hará toda la transmisión por ti. Y en el lado del jugador, es bastante sencillo. El mismo canal, el mismo primer parámetro en la función on, y el mismo evento podría poner un comodín allí si quisiera. Y luego solo verifico si está configurado en verdadero, y luego lo configuro en la UI. Creo que eso es bastante sencillo. Creo que eso es bastante bueno. Deberíamos usarlo más, ¿verdad? Deberíamos usarlo para todo. No, estoy bromeando. No lo uses para todo. Usemoslo donde tenga sentido. Creo que es hora de mostrarte el broadcast. Así que si todos miran sus teléfonos, y deberían ver un botón de inicio o un botón de play. ¿Es correcto? Sí. Bien. Genial. Así que si vuelvo a esto, la gente ya ha comenzado a hacer clic en el check out. Bien. Interesante. Correcto.

Bien. ¿Dónde está mi ratón? Lo perdí. Aquí vamos. Bien. Así que tu botón debería cambiar ahora. Si viste un botón de inicio, ahora debería decir ¿qué dice ahora? Iniciar o jugar de nuevo. Debería decir swag. Sí. Así que si haces clic en eso, irás a la tienda de swag. Pero antes de hacer cualquier otra cosa en la tienda de swag, déjame decir algo. Hay una tarjeta de prueba en la parte superior, y todo esto está sucediendo dentro del sandbox. Así que por favor no ingreses ninguna información real. Eso es uno. Dos, si desplazas hacia abajo en tus teléfonos, ¿ves un botón de PayPal? Sí. ¿Todos ven un botón de PayPal? Bueno, puedo desactivar el botón de PayPal, así que ahora no puedes pedir ningún swag gratis. Eso es cruel. Todos han sido buenos deportistas, así que lo volveré a habilitar. Bien. Perfecto. Así que sí, veo a la gente haciendo clic en el check out. Y está cubriendo mi último botón, pero está bien. Bien. Déjame hacer una celebración. ¿Alguien recibió confeti en su pantalla? Sí. Bien. Brillante. Así que el broadcast está funcionando, y solo se los estoy enviando a ustedes, así que eso es genial. Déjame mostrar mis diapositivas rápidamente. Ve al check out de invitados y usa la tarjeta de prueba que está en la parte superior de la página, por favor. Todo está sucediendo en el sandbox. Y luego desactiva, no crees una cuenta de PayPal. Todo es un sandbox, como dije, mi sandbox. Hay muchos usuarios allí. Y cómo hice esto fue con el React SDK. Es realmente sencillo, npm install, importa el SDK, agrega el proveedor de PayPal, y luego agregué un botón. Y luego con create order, viste en la parte superior derecha del leaderboard a la gente haciendo clic en el check out. Así que en la función para create order, puse un mensaje de toast, y también tengo un mensaje de toast cuando la gente aprueba y paga la orden. Y eso es todo. Muchas gracias a todos por su tiempo hoy y por jugar mi juego. Realmente, realmente lo aprecio. Si quieren conectarse con nosotros, nuestras redes sociales para desarrolladores de PayPal están en la parte superior, y las mías también. No olviden venir y recoger su swag de la tienda de swag en el stand. Si tienen algún problema, vengan al stand, muéstrenles una foto de mí que estuvieron aquí, y les darán el swag extra que tienen además del stand. Es por orden de llegada, así que me dirigiría allí justo después de esto. Y definitivamente vengan y hablen con nosotros sobre PayPal o sobre tiempo real o sobre cualquier otra cosa. Gracias a todos por su tiempo. Realmente lo aprecio. Espero sus preguntas. Gracias. La primera es, ¿cómo depuras errores en tiempo real cuando solo ocurren en vivo? Oh, esa es una pregunta interesante, de hecho.

Creo que esa, ven a verme al stand, porque he estado jugando con algunas herramientas. Y esa todavía estoy tratando de resolverla, así que también me encantaría escuchar las opiniones de la gente sobre eso. Esa es difícil. Y probablemente una de las razones por las que la usamos menos, creo, es porque es difícil depurarlas. Así que creo que es una conversación más amplia, y estoy realmente interesado en eso. Así que por favor ven y encuéntrame en el stand de PayPal.

Bien, la siguiente aquí. ¿Has probado Convex? ¿Cómo se compara con Superbase? ¿Convex? Sí, Convex. Hacen sincronización en tiempo real. Es algo similar. Tienen su propia API, pero deberías echarle un vistazo. He probado bastantes, pero no he oído hablar de ellos. He probado, ya sabes, Firebase es otro popular, Apri, y algunos otros. No puedo recordar sus nombres. Pero no he probado esos, así que tendré que buscarlo y ver qué características tienen.

Sería realmente interesante. Sí. Mi pregunta para la persona que hizo esa pregunta es, ¿es de código abierto? Porque realmente me gusta cómo con Superbase, puedo temporalmente o alojarlo yo mismo para una aplicación de producción no lo haría, pero al menos tal vez solo con un prototipo comenzando, podría alojarlo yo mismo y luego pasar a su solución alojada. Así que sí, estaría nervioso, si Convex es de código abierto o no. Sí. Bien. La siguiente aquí. ¿Cómo manejas el tiempo real en una configuración de múltiples contenedores? Sí, eso es interesante porque tienes el mismo problema con algo basado en sesiones, ya sabes, tienes un balanceo de carga sticky o algo así. Y eso es muy, muy cierto.

De nuevo, ven a verme después o envíame un DM. Eso es algo que debería estar en mi lista de cosas por hacer. Así que sí, estas son grandes preguntas. Me encantan estas. Sí. Recuerdo cuando Meteor era realmente popular. No sé si usaste Meteor alguna vez. Pero Meteor, eso era como lo más grande de lo que la gente solía hablar, la escalabilidad de estos sistemas en tiempo real por defecto, ¿verdad?

Bien. El siguiente aquí. ¿Puede la presencia, limitar o agregar métricas para que los datos sean menos frecuentes o ruidosos? Lo siento, repite eso. Entonces, ¿puede la presencia limitar o agregar métricas para que los datos no sean tan ruidosos? Podrías pensar en mucho de, tal vez, el desorden de diseño por los datos que llegan o cosas así. Bueno, tengo que ver cuál sería el caso de uso.

Me gustaría pensar en cuál sería el caso de uso y luego intentar ver cuál sería la solución. Así que, de nuevo, ¿quién preguntó eso? Me encanta esa pregunta. Ven a verme después de mi próxima sesión de preguntas y respuestas en el stand. Porque ese es un buen escenario. Y habrá una manera. Pero es solo, ¿usamos presencia? ¿Usamos otra cosa? Así que, ese es un tema interesante. Sí, hicimos algo con Durable Objects, hicimos algunas cosas en vivo en el evento Syntax anoche. Y la gente simplemente uniéndose y saliendo, uniéndose y saliendo. Podías ver los números fluctuando en tiempo real. Puede ser un poco agitado, ¿verdad? Sí.

Bien, el siguiente. ¿Por qué no añades el total del leaderboard a la carga útil del web socket? ¿Por qué añadí el... El total del leaderboard en la demo. Total del leaderboard. Sí. ¿Por qué lo añadí o por qué no lo añadí? Lo hiciste. Necesito mirar mi código. Sí. No lo sé. Ven a verme después. No puedo recordar. Sí, no estoy seguro sobre eso. Así que, el siguiente aquí. Ven a verme, sin embargo. Quiero responder eso.

¿Necesitas desuscribirte para evitar fugas de memoria? Sí. Sí, definitivamente. Mantuve el código muy, muy pequeño. Vamos a hacer open source el juego después. Así que, sé que había una pregunta allí. Así que, muchas gracias. Recoge tu swag porque realmente aprecio esa pregunta. Lo siento por arruinarlo. Vamos a hacer open source el código porque la gente quiere hacer mejoras. Sí, verás en el código del juego que hay un unsubscribe. Necesitas desuscribirte. De lo contrario, puede volverse un poco pesado en memoria, digamos, y un poco desordenado. Así que, sí.

Sí. ¿Cómo manejas a los usuarios maliciosos que envían 500 juegos jugados después de haberse desconectado? ¿500 juegos jugados? No estoy muy seguro sobre esa parte. Supongo que una mejor pregunta podría ser ¿cómo manejas a los usuarios maliciosos en escenarios en tiempo real como este? Así que, aún puedes bloquearlo. Aún puedes asegurarlo. Tuve que mantener, porque nadie estaba iniciando sesión, tuve que mantener todo abierto. Así que, trato de hacer ciertas codificaciones, supongo, técnicas, trucos, para limitar la forma en que la gente podría hacer trampa. Pero obviamente, siempre hay una manera cuando está de cara al público. Así que, en retrospectiva, hacer que la gente inicie sesión y luego puedo bloquearlo. Superbase puedes enviarlo para usuarios autenticados, usuarios específicos. Puedes ser bastante granular con cuánto lo bloqueas en términos de seguridad. De nuevo, para hoy, ¿todos querrían iniciar sesión y registrarse? Probablemente no. Así que, por eso lo dejé abierto. Así que, sí. Puedes estar seguro de que si tienes una demo en tiempo real de cualquier cosa, la gente va a estar haciendo su mejor esfuerzo para saturarla o cualquier cosa. Es parte de la diversión. Está bien. Estamos en una conferencia de tecnología. Todavía me hace reír.

Todavía me hace reír. Exactamente, ¿verdad? ¿Cómo abordarías el monitoreo del manejo de eventos en una aplicación así? Cierto. Entonces, podrías usar los comodines si quisieras hacer algo tú mismo, pero Superbase ya tiene herramientas. Así que, de hecho, estaba mirando el panel de control. Puedes ver desde las 9 de la mañana, los eventos en tiempo real realmente comenzaron a aumentar. Así que, tiene algunas herramientas, pero podrías querer algo personalizable. Y luego, en lugar de ser realmente específico con lo que escuchas, podrías mantenerlo más general y tener, tal vez, no sé, un panel de control que tenga todos los eventos que pasan por el sistema y verlos. Así que, sí, definitivamente es posible. Esa página sería interesante. Creo que tendrías que tener algo como con los registros de Vercel, donde puedes decir en tiempo real, pero luego puedes pausarlo, y luego puedes reproducirlo de nuevo. Creo que tendrías algo así porque sería rápido. Eso podría ser algo que podría simular esta noche porque sería bastante interesante ver cómo resulta mañana. Sí. Sí. En tiempo real, solo mucha diversión en general, ¿verdad?

Y, de igual manera, ¿cómo usa PayPal el tiempo real en el producto principal de PayPal? Esa es una pregunta difícil. ¿Quién hizo esa pregunta? Te diré por qué es una pregunta difícil porque comencé mi charla diciendo que acabo de empezar en PayPal. Así que, no puedo responder eso, pero hay personas en el stand que pueden. Así que, sí, ve y habla con ellos. Pero intentaré averiguarlo para la próxima vez. Bien. ¿Cómo Superbase u otras alternativas o Superbase u otras alternativas tienen algo como la lista de Redis donde los eventos de la lista persisten hasta que se eliminan explícitamente después del proceso en lugar de enviar y olvidar? Así que, sí. Ah, bien. Así que, Superbase tiene reproducción. Así que, hay cosas que puedes hacer. Afectan tu almacenamiento, afectan tu rendimiento. No lo incluí en esto porque habría sido una charla mucho más larga. Pero, sí, puedes tenerlo. Así que, por ejemplo, si te unes a un chat, no querrás entonces... no tendrás los mensajes históricos, lo cual estaba pensando que algunas herramientas tienen eso. Estoy tratando de pensar como... Creo que con WhatsApp cuando te unes, no ves los mensajes históricos. Pero con Slack, cuando te unes a un chat grupal o un canal, ves los mensajes históricos. Y ahí es donde entraría la función de reproducción. Y obtendrías esos mensajes que te perdiste porque no estabas allí. Así que, es posible. Genial. Bueno, muchas gracias, Eddie. Y de nuevo, si tienes más preguntas para Eddie, puedes hacerlas en el lugar de preguntas y respuestas del orador ahora mismo después de la charla. Así que, gracias, Eddie. Genial. Sí. Espero con ansias. Muchas gracias a todos.