Usando UDP en el navegador para conexiones más rápidas Cliente/Servidor

Rate this content
Bookmark
21 min
28 Sep, 2023

Video Summary and Transcription

Esta charla presenta geckos.io, una biblioteca de comunicación cliente-servidor en tiempo real que utiliza UDP y WebRTC. El orador discute los beneficios de UDP para juegos multijugador en tiempo real y explica cómo geckos.io permite conexiones UDP entre navegadores y servidores Node.js. El proceso de implementación de geckos.io implica abrir puertos UDP y manejar la señalización a través de una solicitud HTTP. El orador demuestra cómo geckos.io funciona con Docker y muestra 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.

Available in English

1. Introducción a geckos.io y mi experiencia

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
React Advanced Conference 2021React Advanced Conference 2021
168 min
How to create editor experiences your team will love
Workshop
Content is a crucial part of what you build on the web. Modern web technologies brings a lot to the developer experience in terms of building content-driven sites, but how can we improve things for editors and content creators? In this workshop you’ll learn how use Sanity.io to approach structured content modeling, and how to build, iterate, and configure your own CMS to unify data models with efficient and delightful editor experiences. It’s intended for web developers who want to deliver better content experiences for their content teams and clients.