1. Introducción a geckos.io y Mi Fondo
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 utilizándolo. Hice mucho software y DevOps en el pasado. Ahora estoy trabajando 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 WebDev 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, entonces hola y bienvenidos a mi charla sobre geckos.io. Mi nombre es Janik y esto aquí es mi perfil de GitHub, en caso de que estén interesados. Les contaré rápidamente algunas cosas sobre mí y luego les mostraré más sobre geckos y haré una demostración utilizando geckos. Bueno, entonces hice mucho software y DevOps en el pasado. Ahora estoy trabajando 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 de código abierto y gratuito en el pasado. La 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 otro EnableJS, una biblioteca JSX muy simple. Luego tenemos Fiveserver, que es un fork del paquete Live Server 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 utilizando capacitive. En este momento, utiliza la versión 4 de capacitive. No he tenido tiempo para actualizar a la última versión. Luego ahora, como dije antes, estoy enseñando WebDev, principalmente Javascript, HTML, CSS, SQL. Luego todavía 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 ahora es Nano.jsx, pero es bastante estable, por lo 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 puedes usarla en el servidor y el cliente y mezclarla. Luego aquí está HTML2 app, que
2. Introducción a Geckos.io y UDP
Es como un servidor en vivo mejorado con más características y una mejora sobre el antiguo. Algunos de mis proyectos más grandes. Geckos.io es una comunicación en tiempo real entre cliente y servidor a través de UDP utilizando WebRTC y node.js. UDP se utiliza en juegos multijugador en tiempo real por su velocidad y fiabilidad. Construí Geckos para permitir conexiones UDP entre navegadores y servidores Node.js utilizando WebRTC. La versión inicial utilizaba la biblioteca WRTC, pero luego encontré que la biblioteca Node data channel era mucho mejor.
convierte tus objetos HTML5 en aplicaciones móviles basadas en capacidad. Aquí FiveServe. Es como un servidor en vivo mejorado 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 entraré en detalle aquí. Muy detallado aquí. Vamos a su sitio web. Tenemos eso. Vamos a su sitio web. Dice que es una comunicación en tiempo real entre cliente y servidor 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 detallados aquí. Puedes decir. Así que la mayoría de los juegos multijugador en tiempo real o todos los juegos multijugador en tiempo real que instalas en tu escritorio o tu Playstation, tu consola utilizan UDP para conexiones en tiempo real porque es poco fiable y desordenado o puedes configurarlo para que sea poco fiable y desordenado y eso lo hace perfecto para juegos multijugador. La teoría sobre eso puedes leerla tú mismo, supongo que ya lo sabes ya que 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 peer-to-peer, es decir, de cliente a cliente, pero las conexiones de cliente a servidor era algo que el navegador no podía hacer o realmente no existía o 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. Entonces, construí Geckos. Vamos al repositorio. Aquí tienes el repositorio. La versión 1 de Geckos se construyó sobre la biblioteca WRTC, que es como un enorme binario. Era lento. Las conexiones eran lentas. Y no era útil, pero funcionaba. Entonces, podrías hacer conexiones UDP de navegador a servidor
Node.js utilizando WebRTC. Entonces, el servidor mismo manejaría la señalización entre él y el cliente. Luego tenías que hacer la IP del servidor pública, para que el cliente pudiera conectarse directamente al servidor a través de los canales de datos WebRTC. Y luego descubrí que la biblioteca Node
data channel era mucho mejor. Y era
3. Geckos.io y UDP
Son enlaces de nodejs para libdata-channel. Utiliza conexiones WebRTC desde el navegador hasta el servidor. La IP del servidor debe ser pública para que el cliente se conecte directamente. Hay que abrir puertos UDP en el servidor y manejar la señalización a través de una solicitud HTTP. Los usuarios a menudo se atascan en la implementación. Aquí hay un video comparando UDP y TCP.
diseñado. Este aquí es el repositorio. Son enlaces de
nodejs para libdata-channel. Y fue construido por Murat. Y el propio libdata-channel está escrito en C, C++. Y es muy ligero y es desarrollado por Paul-Louis Agneau. Vale. Y todavía muchos commits cada semana. Y funciona bastante rápido, y es bastante ligero. Y, sí, es bastante... Nunca tuve problemas hasta ahora con él. Así que gracias a ambos por desarrollarlo. Vale, ahora. Entonces, ¿dónde estaba? ¿Cómo funciona? Vale, como dije, utiliza conexiones WebRTC, conexiones de canal de
data WebRTC desde el navegador hasta el servidor y la señalización también se realiza en el servidor y la IP del servidor tiene que ser pública para que el cliente se conecte directamente a ese servidor. La mayoría de la gente, supongo, lucha si tienen un balanceador de carga delante. Supongamos que tienes un servidor NGINX aquí y luego aquí está como servidor
Docker o enjambre
Docker y las conexiones WebRTC no pasan por los servidores NGINX, a través del balanceador de carga. Sólo los
data, HTTP y así sucesivamente van al balanceador de carga pero el cliente tiene que conectarse directamente al servidor en sí. Por eso tienes que abrir estos puertos UDP en el servidor en sí pero toda la señalización pasa por una solicitud HTTP. Mucha gente que usa Kekos se atasca allí. Y también ya que utiliza UDP, quiero decir, puedes usar TCP si quieres pero eso es un poco absurdo porque tienes cosas mejores que usan TCP, como WebSockets. Tienes que tener el tipo de conocimiento sobre cómo configurar un servidor, cómo instalar estas cosas, cómo reenviar estos puertos. No puedes simplemente alojar la aplicación gatecost.io en servicios como Heroku. Y veo a muchos usuarios que usan Geckos, se atascan en la implementación. Por lo tanto, repaso rápidamente esos pasos. Veamos. Cambiar los tiempos de registro a dock. Veamos. Sí, no hay problema ¿dónde estaba? Vale, primero, aquí hay un
video muy bonito que compara UDP y TCP. Aquí verás que demuestra la pérdida de paquetes. Con conexiones a Internet normales de línea fija no experimentarías realmente la pérdida de paquetes, pero si tienes una conexión a Internet que es muy mala, o tal vez tienes algo, una conexión a Internet por satélite con mucha pérdida de paquetes y una gran latencia, allí verías cosas como en este
video. Echa 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 TURN. Para la implementación de Geckos, necesitas abrir puertos UDP, siendo el puerto de señalización por defecto el 9208. Geckos es ideal para juegos multijugador en tiempo real, pero para juegos por turnos como el ajedrez, socket.io o simples solicitudes HTTP son suficientes. Ahora demostraré cómo funciona Geckos con Docker, utilizando un ejemplo simple con un servidor express y la inicialización de Geckos.
Este es también muy útil video, si no tienes suficientes conocimientos sobre WebRTC. Yo lo abro rápidamente aquí. Es una muy buena charla sobre cómo funciona todo, cómo funciona la señalización, y sobre los servicios STUN y TURN y así sucesivamente. Te animo a que veas este video aquí.
Quiero repasar los puertos que tienes que abrir. Veamos. Ah, aquí, implementación. Entonces, para la implementación tienes que 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 como aquí tienes que abrir el puerto UDP y servicios como Heroku u otros servicios que incluyen todo en un servicio para implementaciones de nodo, tú no puedes usarlo. Luego, rápidamente aquí, cuando debes usar o no debes usar la implementación Geckos, Geckos realmente brilla cuando tienes juegos multijugador en tiempo real con un servidor autoritativo. Un shooter en tiempo real, por ejemplo. Si sólo quieres hacer un juego de ajedrez, un juego de ajedrez por turnos, no hay necesidad de Geckos. Puedes simplemente usar socket.io o incluso simples solicitudes HTTP. Bueno, supongo que eso es todo. Ahora voy a mostrarles cómo funciona con Docker. He construido un ejemplo. Si empiezas con Geckos, deberías leer primero este ejemplo. Es muy simple. Tienes un archivo server.js. Utiliza el servidor express. Luego aquí hay alguna inicialización de Geckos y un código muy simple. Y también he publicado esa aplicación como un archivo docker en el contenedor docker y simplemente te mostraré cómo funciona. Veamos. Me conectaré a un servidor. He instalado Ubuntu y docker. Puedes ver que está funcionando en una instancia EC2 y debería funcionar directamente. 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 yo limité en esta aplicación el rango de puertos entre estos dos y luego
5. Conexión a través de WebRTC y alojamiento de múltiples servidores
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.
utiliza multiplexación, por lo que puedes usar múltiples conexiones UDP en el mismo puerto. Bien, eso está funcionando. Ahora solo tengo que obtener la IP. Bien, y veamos, en el puerto 3000 ahora estamos conectados, así que puedes escribir cualquier cosa, abrir una nueva ventana y luego hablar entre sí, como una simple aplicación de chat. Y esto ahora se hace todo a través de WebRTC y va de un cliente al servidor y luego al otro cliente. Y lo que es tan genial de este ejemplo aquí, ¿dónde está esto cliente? sí, es que te muestra cómo puedes usar múltiples servidores KCOS diferentes en el mismo servidor con diferentes rangos de puertos. Así que aquí reenvío la aplicación al 3001 y abro solo un puerto y lo establezco como puerto UDP mínimo y máximo en 1001 y así puedes alojar múltiples de estos
containers en el mismo servidor. Sí. Veamos y si necesitas configurar la ayuda o algo así, puedes simplemente preguntar. ¿Okay, para quién? Bueno, tienes que tener algún tipo de conocimiento sobre cómo configurarlo. Siempre recomiendo primero usar web sockets y si ves que algunos usuarios luchan con la pérdida de paquetes o una latencia enorme o algo así, entonces podrías actualizar a esto o simplemente podrías 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 luego estará disponible. Pero también lo implementaré en KCOS.io. Veamos... Recursos, ya hablé de eso. En Readme, encontrarás algunos videos de YouTube. Bueno, hay alternativas disponibles como WebTransport. La única diferencia con WebTransport es que creo que tienes que... Los
data canales o los canales web, no sé cómo se llaman. Veamos, ¿cómo se llaman los canales... Cerrar, y solo WebTransport... Esto pasa por el servidor proxy, por lo que tu servidor proxy también tiene que soportar HTTP3. Cuando empecé a investigar sobre WebTransport hace como dos años y quería usarlo a través de un proxy Nginx, bueno, el proxy Nginx tendría que tener soporte para HTTP3 y entre el servidor Node y el servidor Nginx tendría que haber una conexión HTTP3. Fue bastante... No fue fácil de configurar y con WebRTC es simplemente fácil. No hay tráfico que pase por el 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!
Comments