Reaccionar WebSockets: Tutorial

30 de mayo de 2024 Roberto Magalhães

Cree un sistema de comunicación web en tiempo real con nuestro tutorial WebSockets para React.

React WebSockets es una herramienta increíblemente poderosa para desarrolladores web. Proporcionan una forma de crear comunicación en tiempo real entre el servidor y el cliente. Esto se puede utilizar para crear una amplia variedad de aplicaciones, desde salas de chat hasta juegos multijugador. Con React WebSockets, los desarrolladores pueden implementar una amplia gama de funciones en sus proyectos, como sistemas de notificación, actualizaciones y datos en tiempo real.

En este artículo, discutiremos los conceptos básicos de React WebSockets y cómo implementarlos en sus proyectos. Entonces, ya sea que sea parte de un equipo profesional de servicios de desarrollo de React o un emprendedor en solitario, sabrá cómo configurar el servidor y el cliente y cómo mostrar cómo funciona la transmisión de mensajes en tiempo real a través de WebSockets. También discutiremos por qué debería usar React WebSockets, cómo funcionan las conexiones y las diferencias en otras opciones de protocolos de comunicación. Con la información de este artículo, puede comenzar a crear proyectos increíbles con React WebSockets en poco tiempo.

¿Qué son los WebSockets?

Con los avances actuales en la comunicación web, es estándar introducir una comunicación bidireccional o bidireccional entre un servidor y un cliente. React WebSockets son protocolos que facilitan la comunicación full-duplex en tiempo real entre el navegador del usuario y el servidor. WebSockets actúa como una fina capa de comunicación por encima del Protocolo de control de transporte (TCP) para garantizar que no haya fricciones.

La forma en que funciona WebSockets es enviando una solicitud de protocolo de enlace, que proviene de un navegador al servidor para actualizar la comunicación. Una vez que el servidor y el cliente aceptan el protocolo de enlace, envían y reciben datos a voluntad con menos gastos generales. Las solicitudes de protocolo de enlace de React WebSockets incluyen un encabezado para garantizar que el servidor no responda a intercambios anteriores de WebSocket.

Una vez que se completa el protocolo de enlace, el servidor y el cliente establecen una conexión binaria que no se ajusta al protocolo HTTP. En cuanto al servidor que se comunica con múltiples conexiones WebSocket, puede comunicarse individualmente con cada una de ellas hasta que el otro lado cierre la sesión. React WebSockets llena el vacío de su típico sistema de solicitud-respuesta HTTP al proporcionar una comunicación web rápida y en tiempo real.

WebSockets, sondeo HTTP, transmisión HTTP y eventos enviados por el servidor: ¿cuál es la diferencia?

Cuando piensa en React WebSockets como protocolos de comunicación en tiempo real, no puede evitar preguntarse acerca de los otros métodos que ofrecen un propósito similar de crear comunicación bidireccional entre el cliente y el servidor. Aunque WebSockets y HTTP son protocolos de comunicación, la diferencia entre ellos es el día y la noche. HTTP es un protocolo unidireccional que utiliza el sistema de solicitud-respuesta, mientras que los WebSockets son protocolos bidireccionales.

Antes de WebSockets, si alguien necesitaba crear aplicaciones web, encontrar y utilizar lagunas en el protocolo HTTP era la única forma de introducir la transferencia de datos full-duplex. Aunque métodos como el sondeo HTTP, la transmisión HTTP y los eventos enviados por el servidor (SSE) cumplieron su propósito, todos tenían sus restricciones. Estas son las desventajas de utilizar otros protocolos en lugar de React WebSockets.

Búsqueda HTTP

El primer método para la comunicación en tiempo real de una aplicación web a través del protocolo HTTP es sondear el servidor periódicamente. Aquí está el ciclo de vida del sondeo HTTP y las complicaciones que puede evitar al usar React WebSockets:

Para comunicarse con el servidor, el cliente envía una solicitud. Después de eso, el cliente debe esperar la respuesta del servidor.
El servidor suspende la solicitud del cliente hasta que se agota el tiempo de espera o realiza un cambio o actualización según la solicitud. El cliente espera hasta que el servidor tenga algo que devolver por esa solicitud.
Después de cualquier actualización o cambio, el servidor finalmente envía una respuesta al cliente.
El ciclo largo continúa mientras el cliente envía una nueva solicitud de búsqueda y espera la respuesta.
A excepción de la comunicación lenta, también existen varias fallas en la búsqueda HTTP, como tiempos de espera, almacenamiento en caché, sobrecarga de encabezado incluida y latencia. React WebSockets elimina todos estos defectos.

transmisión HTTP

Después de utilizar el método de sondeo HTTP, cualquiera puede ver sus defectos. Sin poder elegir entre otros métodos, la única respuesta razonable es abordar algunos defectos importantes para mejorar la experiencia. Aquí es donde brilla la transmisión HTTP. Es un método de comunicación web en tiempo real que se ocupa de la latencia en la búsqueda HTTP.

La principal causa de latencia en la búsqueda HTTP es cuando el servidor cierra la solicitud después de proporcionar una respuesta. Esto hace que el cliente cree una nueva conexión cada vez que se envía una nueva solicitud. En la transmisión HTTP, la solicitud inicial enviada por el cliente permanece abierta incluso después de que el servidor responde y envía datos al cliente. El ciclo de vida de transmisión HTTP tiene los mismos tres puntos de partida que un ciclo de vida de sondeo HTTP.

Esto lleva al servidor y al cliente a una comunicación web casi completa en tiempo real cuando la solicitud está abierta indefinidamente, y el servidor envía una respuesta al cliente cada vez que hay un cambio o actualización. Sin embargo, puedes evitar estas complicaciones con React WebSockets y crear una conexión sin latencia.

Eventos enviados por el servidor.

La principal desventaja de utilizar el método SSE para crear comunicación en tiempo real entre el cliente y el servidor es su ineficiencia y complejidad. La persona que implementará estos métodos es el desarrollador del software. El método SSE no es difícil, pero aumenta el nivel de esfuerzo del desarrollador, ya que tiene que agotar todos sus esfuerzos para darle vida al código.

En este método, el servidor envía datos al cliente mediante un sistema SSE. Si bien parece que SSE es mejor que la búsqueda y transmisión HTTP, no es ideal para una aplicación de juegos o chat web. Una de las aplicaciones que hace un uso ideal de la ESS es Facebook. Cada vez que llegan nuevas cargas al servicio de noticias de Facebook, el servidor las envía a la línea de tiempo. Los eventos enviados por el servidor también imponen restricciones en la cantidad de conexiones abiertas.

Cómo funcionan las conexiones WebSocket

Las conexiones WebSocket son una manera fácil de transferir datos basados en mensajes con la eficiencia de TCP en un concepto similar a UDP. Al igual que otros protocolos de conexión, React WebSockets utiliza HTTP como módulo de transporte inicial. La principal diferencia es que la conexión TCP nunca se cierra. Esto brinda al cliente y al servidor una forma más confiable de responder a solicitudes y enviar mensajes. Con las conexiones WebSocket, puede integrar un mejor sistema de comunicación web en tiempo real para crear aplicaciones sin largas encuestas ni transmisión HTTP.

¿Por qué utilizar WebSockets para la comunicación en tiempo real?

Los siguientes puntos demostrarán por qué React WebSockets son los mejores para la comunicación en tiempo real y la creación de juegos o aplicaciones de chat.

Con WebSockets, obtienes actualizaciones en tiempo real y canales de comunicación esenciales para aplicaciones de juegos.
La mayoría de los navegadores web admiten WebSockets porque cumplen con HTML5 y pueden trabajar con contenido de versiones anteriores de HTML.
Los WebSockets son excelentes protocolos multiplataforma que ofrecen la misma eficiencia cuando se trabaja en iOS, Android, Windows, macOS y aplicaciones web.
En términos de seguridad y confiabilidad, WebSockets puede transmitir datos a través de varios firewalls y servidores proxy.
Los WebSockets son fáciles de usar y fáciles de incorporar para los desarrolladores novatos. El motivo son los recursos y tutoriales de código abierto que le enseñan cómo introducir WebSockets en aplicaciones como la biblioteca JavaScript Socket.io.
Un único servidor puede abrir muchas conexiones WebSocket simultáneamente. También permite la escalabilidad al crear múltiples conexiones con el mismo cliente.

Cómo utilizar React WebSockets

El desarrollo web ha avanzado mucho en comparación con los primeros días. Ahora, tenemos múltiples opciones para establecer comunicación web bidireccional o full-duplex entre el servidor y el cliente. Sin embargo, entre los métodos que tenemos disponibles, el más eficiente y confiable es el uso de React WebSockets. WebSockets se introdujo con el único propósito de permitir al usuario y al servidor crear un sistema de comunicación web impecable en tiempo real utilizando una conexión de socket TCP. Al utilizar WebSockets, debes tener dos objetivos en mente:

Establezca un protocolo de enlace entre el cliente y el servidor.
Facilite el flujo de datos con menos gastos generales.

Una vez que complete estos dos objetivos, podrá crear una aplicación web con un sistema de comunicaciones en tiempo real incorporado que transfiera datos con poca sobrecarga. Vea cómo puede utilizar WebSockets.

Protocolo de enlace a nivel de servidor

PASO 1: Solo necesita un puerto para iniciar el servidor HTTP y el servidor WebSockets.

 constante HTTP = requerido('http');

 const webSocketServerPort = 8000;

 const webSocketServerPort = require('websocket').servidor;

 // Configurando el servidor websocket http

 servidor constante = http.createServer;

 servidor.listen(webSocketServerPort);

 const wsServer = nuevo webSockerServer({

 httpServidor:servidor

 })

PASO 2: Una vez completada la configuración del servidor HTTP y del servidor WebSocket, el siguiente paso es aceptar la solicitud de protocolo de enlace. Al aceptar el protocolo de enlace de su servidor, debe crear un objeto para cada cliente conectado que envíe una solicitud utilizando una identificación de usuario.

 // Todas las conexiones activas en este objeto

 clientes constantes = {};

 // Crea una identificación de usuario específica para cada usuario.

 const generarIDUnico = => {

 const s4 = => Math.floor((1+ Math.random) * 0x1000).toString(16).substring(1);

 devolver s4 + '-' + s4 + '-' + s4 ;

 };

 wsServer.on('solicitud', función(solicitud) {
 
var ID de usuario = generar ID único;

 console.log((new Date + 'Recibió una nueva conexión desde origen' + request.origin + '.');

 });

 conexión constante = request.accept(nulo, request.origin);

 clientes(ID de usuario) = conexión;

 console.log('conectado: ' + ID de usuario)

Cuando los clientes envían una solicitud, también pasan una clave de seguridad a WebSockets en el encabezado de la solicitud. Esto establece una conexión que evita que se mezclen solicitudes del mismo origen. El servidor codifica la clave de seguridad y se denomina GUID predefinido. El campo del encabezado de la solicitud indica a los usuarios si el servidor aceptó la solicitud. Las solicitudes aceptadas tienen campos de encabezado actualizados, mientras que las solicitudes rechazadas no.

Transmisión de mensajes en tiempo real

Para mostrar cómo funciona la transmisión de mensajes en tiempo real a través de WebSockets, crear una aplicación básica le dará una mejor idea. Aquí está el código de una aplicación que permite a los usuarios unirse y editar un solo documento. Existen las dos actividades principales de esta aplicación.

Del usuario

Un usuario puede iniciar y cerrar sesión en cualquier momento mientras edita el documento. Cada vez que un usuario inicia sesión, cada cliente conectado recibe una notificación. Lo mismo ocurre cuando un usuario se marcha.

Cambios de contenido

Cuando un usuario modifica el contenido de los documentos, cada cliente recibe una notificación sobre los cambios.

El siguiente código de aplicación fue tomado de GitHub por Avanthika Meenakshi .

Conclusión

React WebSockets es una herramienta poderosa para crear comunicación en tiempo real entre el servidor y el cliente. Se pueden utilizar para crear una variedad de aplicaciones, incluidos juegos multijugador y actualizaciones en vivo. Estas aplicaciones funcionan con WebSockets, que son un protocolo de comunicación confiable y más rápido en comparación con otras opciones como la transmisión HTTP o SSE. Son fáciles de implementar y se pueden utilizar para crear funciones sorprendentes como mensajería en tiempo real. Si está interesado en crear aplicaciones de comunicaciones en tiempo real de alta calidad, React WebSockets es para usted.

Si te gustó este artículo sobre React, consulta estos temas;