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

Rate this content
Bookmark
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.

Available in English

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

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.
Building Fun Experiments with WebXR & Babylon.js
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. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
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

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
Steven Yau
Steven Yau
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.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
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.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
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.
How to create editor experiences your team will love
React Advanced Conference 2021React Advanced Conference 2021
168 min
How to create editor experiences your team will love
Workshop
Lauren Etheridge
Knut Melvær
2 authors
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.