1. Introducción a geckos.io y mi experiencia
Hola y bienvenidos a mi charla sobre geckos.io. Les contaré rápidamente sobre mí y luego les mostraré más sobre geckos y haré una demostración usando esta herramienta. He trabajado mucho en desarrollo de software y DevOps en el pasado. Actualmente trabajo como profesor de desarrollo web en una escuela. He publicado varias bibliotecas, incluyendo geckos.io, Enable3D, EnableJS, Fiveserver y html2app.dev. Actualmente, estoy enseñando desarrollo web y manteniendo algunos productos comerciales. La única biblioteca que uso mucho es Nano.jsx. Permítanme mostrarles rápidamente Enable2D, Nano.jsx y HTML2 app.
Bueno, hola y bienvenidos a mi charla sobre geckos.io. Mi nombre es Janik y este es mi perfil de GitHub, por si están interesados. Les contaré rápidamente algunas cosas sobre mí y luego les mostraré más sobre geckos y haré una demostración usando geckos. Bueno, he trabajado mucho en desarrollo de software y DevOps en el pasado. Actualmente trabajo como profesor de desarrollo web en una escuela muy cerca de donde vivo. Es muy divertido, muchos estudiantes. Tengo alrededor de 80 estudiantes. Toma mucho tiempo pero es realmente divertido. Hice mucho trabajo gratuito y de código abierto en el pasado. Mi primera gran biblioteca que publiqué fue geckos.io, de la cual hablaré hoy. Luego tenemos Enable3D, que es un envoltorio alrededor de 3js y AmmoJS. Luego EnableJS, una biblioteca JSX muy simple. Luego tenemos Fiveserver, que es un fork del paquete Live Server de NPM, que luego también publiqué en el multiplicador de vscode. Luego tenemos html2app.dev, que es un servicio gratuito por ahora, que convierte tus aplicaciones html en aplicaciones nativas usando Capacitive. En este momento, utiliza la versión 4 de Capacitive. No he tenido tiempo de actualizar a la última versión. Luego, como dije antes, estoy enseñando desarrollo web, principalmente Javascript, HTML, CSS, SQL. Aún mantengo algunos productos comerciales. Y debido a todo eso, no tengo mucho tiempo para trabajar en código abierto. Intento mantenerlos actualizados, mantenerlos, pero no es tan fácil si no tienes mucho tiempo. La única biblioteca que uso mucho en este momento es Nano.jsx, pero es bastante estable, así que no tengo que hacer muchas actualizaciones a menos que haya nuevas características que quiera agregar. Supongo que les mostraré rápidamente esas cosas. Veamos. Aquí está Enable2D. Se ve así. Solo tenemos three.js y algo de física. Luego Nano.jsx, una biblioteca JSX simple. Es isomórfica, por lo que se puede usar en el servidor y en el cliente y mezclarla. Luego aquí está HTML2 app, que
2. Introducción a Geckos.io y UDP
Es como un mejor servidor en vivo con más características y una mejora sobre el antiguo. Algunos de mis proyectos más grandes. Geckos.io es una comunicación cliente-servidor en tiempo real a través de UDP utilizando WebRTC y node.js. UDP se utiliza en juegos multijugador en tiempo real por su velocidad y confiabilidad. Construí Geckos para habilitar conexiones UDP entre navegadores y servidores Node.js utilizando WebRTC. La versión inicial utilizaba la biblioteca WRTC, pero luego encontré que la biblioteca de canal de datos de Node era mucho mejor.
HTML2app.dev convierte tus objetos HTML5 en aplicaciones móviles basadas en Capacitive. Aquí tenemos FiveServe. Es como un mejor servidor en vivo con más características y una mejora sobre el antiguo. Supongo que eso es todo. Algunos de mis proyectos más grandes. Luego vamos a geckos.io, del cual hablaré en detalle aquí. Muy detallado aquí. Vamos a su sitio web. Tenemos eso. Vamos a su sitio web. Dice que es una comunicación cliente-servidor en tiempo real a través de UDP utilizando WebRTC y
node.js. ¿Qué significa eso? Primero tenemos que saber qué es UDP, qué es TCP. No entraré en detalles muy técnicos aquí. Puedes decirlo así. La mayoría de los juegos multijugador en tiempo real que instalas en tu computadora o consola utilizan UDP para conexiones en tiempo real porque es no confiable y desordenado, o puedes configurarlo para que sea no confiable y desordenado, lo que lo hace perfecto para juegos multijugador. La teoría al respecto puedes leerla tú mismo, supongo que ya lo sabes porque estás viendo este
video y omití por qué lo hice. Bueno, estaba haciendo juegos multijugador, estaba leyendo mucho y descubrí que UDP era mucho más rápido, pero UDP no estaba disponible en el navegador, al menos no para conexiones cliente-servidor. Si conoces WebRTC, allí puedes usar UDP para conexiones de igual a igual, es decir, de cliente a cliente, pero las conexiones de cliente a servidor eran algo que el navegador no podía hacer o no era realmente una opción, algunas personas lo hacían con otras bibliotecas. Pero en
Node.js, al menos hasta donde yo sé, no era posible, así que intenté construirlo. Así que construí Geckos. Vamos al repositorio. Aquí tienes el repositorio. La versión 1 de Geckos se construyó con la biblioteca WRTC, que es como un binario enorme. Era lento. Las conexiones eran lentas. Y no era útil, pero funcionaba. Así que podías hacer conexiones UDP de un navegador a un servidor
Node.js utilizando WebRTC. El propio servidor se encargaba de la señalización entre él y el cliente. Luego tenías que hacer pública la IP del servidor para que el cliente pudiera conectarse directamente al servidor a través de los canales de datos de WebRTC. Y luego más tarde descubrí que la biblioteca de canal de datos de Node era mucho mejor. Y era
3. Geckos.io y UDP
Es una biblioteca de comunicación cliente-servidor en tiempo real utilizando UDP y WebRTC. Permite conexiones UDP entre navegadores y servidores Node.js. El proceso de implementación implica abrir puertos UDP y manejar la señalización a través de una solicitud HTTP. El hablante también muestra cómo funciona geckos.io con Docker y la capacidad de alojar múltiples servidores en la misma máquina. En general, esta charla proporciona una visión general de geckos.io y sus aplicaciones en la comunicación en tiempo real.
Aquí tenemos el repositorio. Es una biblioteca de comunicación cliente-servidor en tiempo real utilizando UDP y WebRTC. Fue construida por Murat. La biblioteca libdata-channel en sí está escrita en C, C++ y es muy liviana. Fue desarrollada por Paul-Louis Agneau y todavía recibe muchos commits cada semana. Funciona bastante rápido y es muy liviana. Nunca he tenido problemas con ella hasta ahora. Así que gracias a ambos por desarrollarla. ¿Cómo funciona? Utiliza conexiones WebRTC desde el navegador al servidor, y la señalización también se realiza en el servidor. La IP del servidor debe ser pública para que el cliente pueda conectarse directamente a él. La mayoría de las personas tienen dificultades si tienen un equilibrador de carga en frente. Supongamos que tienes un servidor NGINX aquí y luego aquí tienes un servidor
Docker o un conjunto de servidores
Docker, y las conexiones WebRTC no pasan por los servidores NGINX, a través del equilibrador de carga. Solo los datos HTTP y demás pasan por el equilibrador de carga, pero el cliente debe conectarse directamente al servidor en sí. Por eso tienes que abrir estos puertos UDP en el propio servidor, pero toda la señalización se realiza a través de una solicitud HTTP. Muchas personas que usan geckos.io se atascan en ese punto. Y también, dado que utiliza UDP, puedes usar TCP si quieres, pero eso no tiene mucho sentido porque hay mejores opciones que utilizan TCP, como WebSockets. Debes tener conocimientos sobre cómo configurar un servidor, cómo instalar estas cosas, cómo reenviar estos puertos. No puedes simplemente alojar una aplicación de geckos.io en servicios como Heroku. Y veo a muchos usuarios de Geckos que se atascan en la implementación. Por lo tanto, repasaré rápidamente esos pasos. Aquí hay un
video muy interesante que compara UDP y TCP. Aquí verás que se demuestra la pérdida de paquetes. Con conexiones normales a Internet, no experimentarías realmente pérdida de paquetes, pero si tienes una conexión a Internet muy mala, o tal vez tienes una conexión a Internet vía satélite con mucha pérdida de paquetes y una gran latencia, verías cosas como en este
video. Échale un vistazo si estás interesado. Y otro
video rápidamente.
4. Geckos.io, Implementación y Docker
Este video proporciona una buena visión general de cómo funciona WebRTC, incluyendo la señalización, STUN y los servicios de TURN. Para la implementación de Geckos, es necesario abrir puertos UDP, siendo el puerto de señalización predeterminado el 9208. Geckos es ideal para juegos multijugador en tiempo real, pero para juegos por turnos como el ajedrez, socket.io o solicitudes HTTP simples son suficientes. Ahora demostraré cómo funciona Geckos con Docker, utilizando un ejemplo sencillo con un servidor express e inicialización de Geckos.
Este también es muy útil video, si no tienes suficiente conocimiento sobre WebRTC. Voy a abrirlo rápidamente aquí. Es una charla muy buena sobre cómo funciona todo, cómo funciona la señalización, y sobre STUN y los servicios de TURN, y así sucesivamente. Te animo a ver este video aquí.
Quiero repasar los puertos que debes abrir. Veamos. Ah, aquí, implementación. Entonces, para la implementación debes abrir estos puertos UDP, porque utiliza uno de estos puertos. Y por defecto, utiliza el 9208 para la señalización, pero puedes definir eso en tu aplicación. Lo encontrarás en la documentación. Pero dado que aquí debes abrir un puerto UDP y servicios como Heroku u otros servicios que incluyen un servicio todo en uno para implementaciones de Node, no puedes usarlo. Luego, rápidamente aquí, cuándo debes usar o no usar la implementación de Geckos, Geckos brilla realmente cuando tienes juegos multijugador en tiempo real con un servidor autoritario. Un shooter en tiempo real, por ejemplo. Si solo quieres hacer un juego de ajedrez por turnos, no necesitas Geckos. Simplemente puedes usar socket.io o incluso solicitudes HTTP simples. De acuerdo, eso es todo. Ahora voy a mostrarte cómo funciona con Docker. He construido un ejemplo. Si comienzas con Geckos, primero debes leer este ejemplo. Es muy sencillo. Tienes un archivo server.js. Utiliza un servidor express. Luego aquí está la inicialización de Geckos y un código muy simple. Y también he publicado esa aplicación como un archivo docker en un contenedor de docker y simplemente te mostraré cómo funciona. Veamos. Me conectaré a un servidor. He instalado Ubuntu y docker. Puedes ver que se está ejecutando en una instancia EC2 y debería funcionar sin problemas. Veamos. Si instalo eso, puedes ver que abro, reenvío el puerto 3000 TCP donde se realiza el servidor y la señalización en caso de esta aplicación aquí y reenvío el rango de puertos UDP entre 10,000 y 10,007 porque lo he limitado en esta aplicación he limitado el rango de puertos entre estos dos y luego
5. Connecting via WebRTC and Hosting Multiple Servers
Ahora estamos conectados en el puerto 3000 a través de WebRTC, lo que permite la comunicación entre clientes a través del servidor. Este ejemplo demuestra el uso de múltiples servidores KCOS en el mismo servidor con diferentes rangos de puertos. Al reenviar la aplicación al puerto 3001 y establecer los puertos UDP mínimos y máximos en 1001, se pueden alojar múltiples contenedores en el mismo servidor.
Geckos.io utiliza multiplexación, por lo que puedes usar múltiples conexiones UDP en el mismo puerto. Bien, eso es lo que se está ejecutando. Ahora solo tengo que obtener la IP. Bien, y veamos en el puerto 3000, ahora estamos conectados, por lo que puedes escribir cualquier cosa, abrir una nueva ventana y luego hablar entre ustedes como una simple aplicación de chat. Y todo esto se hace ahora a través de WebRTC, va desde un cliente al servidor y luego al otro cliente. Y lo interesante de este ejemplo aquí, donde está este cliente, es que muestra cómo puedes usar múltiples servidores KCOS en el mismo servidor con diferentes rangos de puertos. Aquí reenvío la aplicación al puerto 3001 y abro solo un puerto y establezco el rango de puertos UDP mínimo y máximo en 1001, por lo que puedes alojar múltiples de estos contenedores en el mismo servidor. Sí. Veamos y si necesitas configurar la ayuda o algo así, solo tienes que preguntar. ¿Para quién? Bueno, debes tener algún tipo de conocimiento sobre cómo configurarlo. Siempre recomiendo usar primero websockets y si ves que algunos usuarios tienen problemas con la pérdida de paquetes o una gran latencia o algo así, entonces puedes actualizar a esto o simplemente esperar a que HTTP 3 se vuelva estable en
Node.js y luego intentar usar, ¿cómo se llama? WebTransport, esa es la API de WebTransport que estará disponible. Pero también la implementaré en Geckos.io. Veamos... Recursos, ya hablé de eso. En el Readme, encontrarás algunos videos de YouTube. Bueno, hay alternativas como WebTransport disponibles. La única diferencia con WebTransport es que, creo que tienes que... Los canales de datos o los canales web, no sé cómo se llaman. Veamos, cómo se llaman los canales... Cerrar, y solo WebTransport... Esto pasa a través del servidor proxy, por lo que tu servidor proxy también debe admitir HTTP3. Cuando estaba investigando por primera vez WebTransport hace dos años y quería usarlo a través de un proxy Nginx, bueno, el proxy Nginx también tendría que tener soporte HTTP3 y entre el servidor Node y el servidor Nginx debe haber una conexión HTTP3 también. Fue bastante... No fue fácil de configurar y con WebRTC es muy fácil. Ningún tráfico pasa a través del balanceador de carga, el tráfico va directamente al servidor, por lo que nunca tenemos que preocuparnos por abrir puertos en el balanceador de carga. Bueno, esta fue una charla realmente improvisada. Lamento mucho eso. No soy un YouTuber profesional. Espero que hayas aprendido algo y siempre puedes hacer preguntas en la sesión de preguntas y respuestas más tarde o escribir algunos comentarios en GitHub. Bueno, gracias y que tengas un buen día!
