Rompiendo el Código Detrás de la Colaboración en Tiempo Real con Websockets

Hola, estoy aquí para hablarles sobre el código detrás de los componentes colaborativos. Soy Vitor Norton. Soy brasileño. Soy 10 veces Microsoft MVP. También soy un defensor de desarrolladores aquí en SuperViz. Pero eso no dice mucho sobre mí. Prefiero decir que soy apasionado por conectar a las personas, que dependo mucho de mis herramientas de productividad, y me encanta la idea de trabajar en cualquier parte del mundo.

Así que trabajar de forma remota para mí es mi máxima prioridad. Y esto me hace estar cada vez más conectado con mis dispositivos. Y de hecho, creo que no soy solo yo. Estamos cada vez más conectados a través de nuestros dispositivos, ¿verdad? Y todos tenemos algunos objetivos. Como, no queremos más reuniones. Queremos trabajar de forma remota. Pero tampoco queremos mostrarnos solos. ¿Y cómo logramos eso? ¿Cómo resolvemos eso?

Déjame preguntar a JPT un poco para ver qué empresas han hecho esto y han resuelto este problema. Uno de los mejores ejemplos que puedo traer es Gather Town. Es una suite colaborativa en la que casi puedes jugar un juego, ¿verdad? Tienes este escritorio donde está todo tu equipo, y puedes ir al escritorio y hablar con la gente. Pero traen este modo interactivo de juego al lugar de trabajo. Y esto nos hace sentir menos solos y aún así un poco libres para llegar a otras personas que vemos que, oh, están en el escritorio, déjame hablar con ellos. Otra empresa que ha hecho esto es Miro. Que ha añadido... Estoy seguro de que has visto esto en otros productos como Figma, que puedes ver los punteros del ratón, puedes ver comentarios. Si alguien hace algo aquí, lo verás en la otra pantalla, puedes ver quién está en línea. Todos estos componentes. También tenemos aplicaciones de chat. Y seamos honestos, todos usamos mucho. También tenemos otro ejemplo es Microsoft Teams donde puedes ver qué presentaciones están usando las personas. Y si lo aceptan, si están en línea, fuera de línea, puedes ver todo de un vistazo antes de comenzar una reunión, ¿verdad? Así te sientes menos solo en esa reunión. Ves quién va a estar allí, quién ya está allí. Otro es Uber.

O si tienes, al menos en Brasil, tenemos esta gran aplicación que puedes ver a un repartidor trayendo cosas a tu puerta. En Uber, puedes ver el coche conduciendo y ves esta actualización en tiempo real ocurriendo. Así que todo esto es lo que llamamos componentes de colaboración colaborativa. Y desglosémoslo un poco más.

Veamos algunos ejemplos de estos componentes colaborativos. Tenemos elementos de formulario que permiten ver a dos personas en la misma página. Una persona está escribiendo en una computadora y la otra persona está viendo en la otra computadora que Anna está escribiendo. Tienes este componente de quién está en línea que te permite ver si alguien ha mirado el documento que adjuntaste en el correo electrónico o algo así. Y puedes ver para hacer el trabajo que se supone que debes hacer. También tienes el puntero del ratón, porque, y creo que esto es bastante asombroso porque al menos en mi trabajo, creo que todos son como, Oh, presiona este botón en esta posición.

Y si tienes la sincronización de punteros del ratón en este entorno, entonces puedes simplemente decir, Oh, este botón presiona este botón. Y comentarios contextuales que puedes añadir comentarios en cualquier lugar, en cualquier parte de la página y hacer este trabajo realmente sincrónico. Pero desglosémos uno de estos componentes. Desglosémos los punteros del ratón y veamos qué lo hace funcionar. Oh, hice algunas diapositivas aquí.

Bien. Así que el código detrás de esto, tenemos un componente de React, punteros del ratón, y un elemento div al que le doy un ID, y envío este ID al componente de React. Bien, veamos la definición de este componente, ¿verdad? Así que aquí está, es bastante simple, bastante directo.

¿Qué es una sala? Una sala es el lugar al que entras en una reunión de Google, en Microsoft Teams, o en un archivo en Figma, por ejemplo, tienes la idea de la sala que todos los que están en esta sala estarán sincronizados juntos todo el contenido, luego tienes al participante, el ID que usualmente es el correo electrónico o algún UID, y el nombre. Luego simplemente creas un nuevo puntero del ratón, pasando el elemento, lo añades a la sala, y se sincroniza y hace toda la magia.

Pero vamos aún más allá. Y veamos qué es este puntero del ratón. ¿Y cómo funciona esto entre todos estos dispositivos? Bueno, el puntero del ratón tiene tres funcionalidades principales. Tú ves cuando alguien mueve su ratón, así que obtienes la información sobre la posición de los punteros de otros participantes. Actualizas tu posición para todos, así que dejas que todos sepan dónde está tu ratón. Y luego tienes que hacerlo realmente rápido y fluido, para que no parezca lento, ¿verdad? Así que veamos cómo hacemos cada uno de estos.

El primero tenemos este estado aquí. Esto es una cosa de React, pero puede ser un simple objeto de JavaScript con una posición X y Y. Y tenemos este canal. Hablaré más sobre esto más tarde, al que me suscribo, que estoy escuchando. También voy a hablar más sobre esto más tarde. Un evento llamado movimiento del ratón. Cuando escucho algo de este evento, entonces uso esta función de callback en movimiento del ratón. Cuando se activa esta función de callback, recibo un mensaje. El mensaje contiene un dato, y el dato contiene una X y una Y, y establezco la posición del ratón a esta posición. Y luego tienes que, por supuesto, hacer todos los estilos y toda la posición superior, saludo, o algo así. Pero este es el mecanismo detrás de esto.

Por el otro lado, tenemos que actualizar nuestra posición para todos. Así que escuchamos el documento en movimiento del ratón, lo mismo, mismo callback, que recibimos un evento. Tomamos el cliente X, el cliente Y a una variable de posición, y luego lo publicamos. Así que publicamos al mismo evento que hemos visto antes, el ratón se movió, así que todos lo escuchan. Bien, ahora el corazón. Hazlo realmente rápido y fluido. Bien, así que este es el mismo código que hemos visto antes, pero con algo más añadido, una API nativa de JavaScript que es requestAnimationFrame, que nos aseguramos de actualizar a 30 FPS. Pero ese no es el punto aquí. Bien, sigamos.

¿Qué es este canal? ¿De dónde viene esto? Así que el canal, tenemos esta regla, creamos un nuevo tiempo real. Bien, así que este tiempo real es un componente que sincronizamos datos entre dispositivos y entre usuarios. En este tiempo real, podemos conectarnos a un canal.

Podemos conectarnos al canal del manejador de mouse. Así que este canal es todo lo relacionado con los punteros del ratón. Podemos tener un canal para ver qué línea, podemos tener un canal para ver la red de la otra persona para ver si tienen mala conexión o no. Y luego añadimos este tiempo real a nuestra sala. Así que se sincroniza entre todos.

Bien, ¿qué es este canal? El canal tiene un subscribe, tiene un publish, y eso es todo. Bien, así que vamos a preguntar a JPT. Espera, no, no necesito preguntar a JPT esto. Sé lo que es esto. Sabes lo que es esto, ¿verdad? Esto es un PubSub. Este es el patrón PubSub. El publicador-suscriptor es uno de los patrones de diseño y es exactamente esto. Así que veamos el código detrás de este patrón y veamos cómo funciona.

Así que en el método subscribe, vemos, déjame volver aquí solo un poco para mostrar este objeto estático llamado event. Este será un objeto gráfico, ¿de acuerdo? Y esto será relevante para nosotros cuando veas lo que está pasando, en el subscribe y en el publish. Así que cuando me suscribo a algo, tengo un nombre del evento, luego tengo un callback, y hago muchas cosas. Para hacerlo más fácil de entender, marcaré el nombre del evento aquí para que lo entendamos mejor, ¿de acuerdo? Así que estoy recibiendo un movimiento del ratón y un callback.

Así que si este objeto gráfico event tiene un movimiento del ratón, entonces seguiré con mi código. Si no lo tiene, crearé un array vacío, ¿de acuerdo? Así que tenemos un evento con movimiento del ratón con un array vacío. Y luego, una vez que verifico esto, puedo empujar el callback a este array. Así que cada vez que alguien se suscribe a movimiento del ratón, entonces va a este array. Y luego veamos de qué se trata el publish. El publish, recibes el nombre del evento y luego los datos que quieres publicar. Nuevamente, marcaré esto un poco para hacerlo más fácil de entender. Así que cuando empujas movimiento del ratón, recibes tus datos, y luego vas al evento, y ves el evento movimiento del ratón allí y para cada elemento de este array, llamas a la función callback que tiene allí, que has empujado con los datos. Eso es todo. Así es como se hace. Bueno, es esto, pero tiene algo más. Tiene una cosa más aquí. Porque todo esto funciona en un entorno local en la misma instancia.

Si haces esto con otro navegador, este pubsub, no se sincronizará entre las dos instancias de ese navegador. Tienes que tener algo para comunicarte entre las instancias. Algo más, y eso son los WebSockets.

¿Qué son los WebSockets? Bueno, WebSockets proporciona un protocolo que permite la comunicación continua bidireccional entre el cliente y el servicio, permitiendo la comunicación en tiempo real. ¿Cómo funciona esto? El cliente inicia una llamada. El cliente inicia un WebSocket handshake con el servidor, y una vez establecido, el mensaje puede ser enviado en ambas direcciones sin necesidad de restablecer la conexión.

Es diferente de la solicitud HTTP en la que llamas a algo, obtienes algo, pones algo, publicas algo, y hace todo el handshake. Cierra la conexión, cosas así. Esto se mantiene abierto. La conexión no se cierra. Tiene una conexión persistente. Debido a eso, tiene baja latencia. Es ideal para chat, juegos y actualizaciones en vivo, y también es bidireccional. Tanto el cliente como el servidor pueden enviar un mensaje sin necesidad de que el otro haga algo. Pero esto nos lleva a un problema.

Digamos que en el servidor tengo este contador igual a cero, y ambos dispositivos que están conectados dicen que el contador ahora es uno, y lo dicen exactamente al mismo tiempo. ¿Cómo manejamos esto? ¿Es solo contador uno? No lo creo, porque uno está diciendo uno, el otro está diciendo otro. Este contador en total debería ser igual a cero. Usamos CR-DTS. Es un tipo de datos relacionado sin conflictos. Es un tipo especial de estructura de datos que te permite sincronizar cosas entre dispositivos.

Esta es una de las cosas más importantes que necesitamos aprender en estos tiempos, porque creo que va a ser mucho trabajo. Va a ser una cosa realmente estándar en el futuro en el desarrollo de software. Por un lado, tengo este contador, y no es solo un número simple. Es un objeto que contiene un URID con el valor uno, y en el otro lado, otro URID con el mismo valor uno. Este ID es diferente, y eso te permite ver ambos números sin conflicto cuando quieres contarlo. Cuando quieres contarlo, simplemente cuentas estos valores.

Es un objeto un poco más complejo, pero lo resuelve todo. Hay más, por supuesto, pero entiendes la idea. Tiene sus propios criterios, sus propias reglas, pero esto es un vistazo realmente a WebSockets y estos tipos de datos relacionados sin conflictos. Te mostraré algunos recursos. Este CRDT-R Collaborative Protocol of the Future, escrito por Piyush Pourwell. Espero estar leyendo bien su nombre. Este artículo está disponible en Medium, y creo que es un gran artículo. Hablando de recursos, también estoy haciendo referencia al Learning JavaScript Design Patterns de Addy Oslanyi. Este libro es realmente increíble, realmente simple de entender. También hago referencia a este How to Use WebSockets with Flutter, que es un artículo en DevTool. Hago referencia a esto aunque esta es una conferencia de JavaScript, pero porque la explicación de WebSockets para mí fue una de las mejores, esta simple y directa y con algunas ilustraciones increíbles, incluidas las que uso aquí. Otro artículo es el Understanding and Implementing Event-Driven Communication and Development, un artículo mío, también disponible en DevTool.

Bien, creo que esto es todo. Muchas gracias por ver. ¡Nos vemos! Microsoft Mechanics www.microsoft.