Uso de UDP en el navegador para conexiones más rápidas entre cliente/servidor

Rate this content
Bookmark

FAQ

Geckos.io es una biblioteca que facilita la comunicación en tiempo real entre cliente y servidor a través de UDP utilizando WebRTC y Node.js. Es ideal para juegos multijugador en tiempo real que requieren un servidor autoritativo y conexiones rápidas y eficientes.

Para implementar geckos.io, es esencial tener conocimientos sobre configuración de servidores, instalación de software y reenvío de puertos UDP. También es útil comprender los fundamentos de WebRTC y cómo gestionar la señalización y las conexiones en un entorno de servidor.

Geckos.io utiliza UDP porque es más rápido y adecuado para aplicaciones que pueden manejar la pérdida de paquetes, como los juegos multijugador en tiempo real. UDP permite una comunicación más eficiente y rápida que es crucial para mantener la fluidez y respuesta en juegos en línea.

Los principales desafíos incluyen la configuración de los puertos UDP necesarios para la comunicación y la gestión de la señalización entre el cliente y el servidor. Muchos usuarios encuentran dificultades en la implementación debido a la necesidad de configuraciones específicas del servidor y la incompatibilidad con plataformas de alojamiento que no permiten la configuración de puertos UDP.

Janik ha desarrollado varias tecnologías y proyectos, incluyendo Enable3D, un envoltorio alrededor de 3js y AmmoJS; EnableJS, una biblioteca JSX simple; Fiveserver, un fork del paquete Live Server NPM; y html2app.dev, un servicio que convierte aplicaciones HTML en aplicaciones nativas.

Para juegos que no necesitan comunicación en tiempo real, como juegos de ajedrez por turnos, se pueden utilizar tecnologías más simples como socket.io o incluso solicitudes HTTP regulares, que son suficientes para gestionar la comunicación entre cliente y servidor.

Yannick
Yannick
21 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla presenta geckos.io, una biblioteca de comunicación en tiempo real entre cliente y servidor 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.

1. Introducción a geckos.io y Mi Fondo

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 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

Short description:

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

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

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Creando juegos increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Creando juegos increíbles con LittleJS
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
¡Mejora el rendimiento de tus juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el rendimiento de tus juegos WebGL Unity!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.
Managers Are From Mars, Devs Are From Venus
TechLead Conference 2024TechLead Conference 2024
111 min
Managers Are From Mars, Devs Are From Venus
Workshop
Mo Khazali
Mo Khazali
Una Guía para Desarrolladores sobre Cómo Comunicar, Convencer y Colaborar Efectivamente con los Stakeholders
Es una historia tan antigua como el tiempo: la colaboración entre desarrolladores y stakeholders de negocios ha sido durante mucho tiempo un desafío, con una falta de comunicación clara que a menudo deja a ambas partes frustradas. Los mejores desarrolladores pueden comprender profundamente las necesidades de sus contrapartes de negocios, comunicar efectivamente la estrategia técnica sin perder a la audiencia no técnica y convencer al negocio de tomar las decisiones correctas. Trabajando en una consultoría, he fallado y tenido éxito en arquitectar y “vender” visiones técnicas, aprendiendo muchas lecciones en el camino.Ya sea que trabajes en una empresa de productos, seas consultor/freelancer, o quieras aventurarte más allá de ser solo un desarrollador, la capacidad de convencer y comunicar claramente con los stakeholders puede diferenciarte en la industria tecnológica. Esto se vuelve aún más importante con el auge de GenAI y el mercado de desarrolladores cada vez más competitivo, ya que la resolución de problemas y la comunicación efectiva son clave para posicionarte.En esta masterclass, compartiré ejemplos del mundo real, tanto buenos como malos, y te guiaré a través de poner la teoría en práctica mediante dojos.