Phenquestions
El protocolo WebSocket permite que se produzca una comunicación bidireccional entre un cliente y un servidor. Este proceso es similar a la forma en que se realizan las llamadas en su teléfono: primero, establece una conexión y luego puede comenzar a comunicarse entre sí. El protocolo WebSocket se utiliza en casi todas partes, desde juegos de navegador multijugador hasta aplicaciones de chat.
Este artículo le muestra cómo crear un protocolo WebSocket y usarlo para comunicarse con múltiples usuarios.
Prerrequisitos
Antes de pasar al proceso de creación y uso de un protocolo WebSocket, primero debe instalar algunas cosas que son necesarias para este proceso. Lo primero que necesita instalar es Node.js, una plataforma del lado del servidor que convierte el lenguaje de programación JavaScript en código de máquina que le permite ejecutar JavaScript directamente en su computadora. Para instalar Node.js, los usuarios de Windows pueden simplemente ir al nodo oficial.js y haga clic en el botón verde LTS que se encuentra en el centro de la pantalla.
Para usuarios de Linux y macOS, haga clic en el Descargas sección en el subtítulo del sitio web.
Después de abrir el Descargas sección, verá los archivos de instalación para las tres plataformas principales. Seleccione un paquete que sea compatible con su sistema.
Ejecute el instalador que viene con los archivos descargados y Node.js se instalará en su computadora. Para comprobar si el programa se ha instalado, abra el terminal y emita el siguiente comando:
$ nodo -v
Después de instalar Node.js, ahora tiene acceso a varios módulos de JavaScript, lo que hará que su trabajo sea más eficiente a largo plazo. Abra el directorio en el que desea crear su arquitectura de cliente y servidor, luego abra la terminal dentro de ese directorio y ejecute el siguiente comando:
$ npm init -y
Este comando se usa para crear el paquete.json archivo que le permite configurar e instalar diferentes Node.paquetes js. Instale el paquete de protocolo WebSocket emitiendo el siguiente comando en la terminal:
$ npm install ws
Cree tres archivos, llamados índice.html, cliente.js y servidor.js. Como lo indican los nombres, estos archivos JavaScript son la arquitectura de cliente y servidor de nuestro protocolo WebSocket. Ahora, finalmente podemos comenzar a escribir el código de nuestras aplicaciones cliente y servidor.
Crear un servidor WebSocket
Para crear un servidor WebSocket, comenzaremos escribiendo el código para el servidor. Abre el servidor.js archivo que creó dentro de su editor de texto o IDE en la sección anterior e ingrese las siguientes líneas dentro del archivo.
const WebSocket = require ('ws');const ws = nuevo WebSocket.Servidor (puerto: 8080);
consola.log ("Servidor iniciado");
ws.on ('conexión', (wss) =>
consola.log ("Un nuevo cliente conectado")
wss.send ('Bienvenido al servidor!');
wss.on ('mensaje', (mensaje) =>
consola.log ('Servidor recibido: $ mensaje');
wss.enviar ('Recibí su mensaje:' + mensaje);
);
);
Ahora, explicaremos con mayor detalle qué hace cada línea.
Explicación del código
Como se mencionó anteriormente, hay algunos módulos integrados disponibles en Node.js que facilitan mucho tu trabajo. Para importar estos módulos, usaremos el exigir palabra clave.
const WebSocket = require ('ws');const ws = nuevo WebSocket.Servidor (puerto: 8080);
consola.log ("Servidor iniciado");
La primera línea se usa para importar el nodo.módulo js WebSocket. Usando este módulo, en la siguiente línea, creamos nuestro servidor WebSocket, que está escuchando en el puerto 8080. La consola.Iniciar sesión() La línea simplemente está ahí para informarnos que el servidor se ha iniciado. Verá que esto aparece dentro de su terminal cuando ejecute el siguiente comando en el terminal:
$ servidor de nodo
En la siguiente línea, estamos estableciendo una conexión entre el servidor y el cliente.
ws.on ('conexión', (wss) =>consola.log ("Un nuevo cliente conectado")
);
Una vez establecida la conexión, el wss.La línea send () envía un mensaje al cliente. En este caso, el mensaje es "Bienvenido al servidor."
wss.send ('Bienvenido al servidor!');Finalmente, el wss.on ('mensaje') es para que el servidor reciba el mensaje del cliente. Para confirmación, el servidor envía este mensaje al cliente en la última línea.
wss.on ('mensaje', (mensaje) =>consola.log ('Servidor recibido: $ mensaje');
wss.enviar ('Recibí su mensaje:' + mensaje);
);
Creación de un cliente WebSocket
Para el lado del cliente, necesitamos tanto el índice.archivo html y el cliente.archivo js. Por supuesto, simplemente puede agregar el contenido del cliente.js archivo en su índice.html, pero prefiero mantenerlos separados. Veamos primero al cliente.código js. Abra el archivo e ingrese las siguientes líneas dentro del archivo:
const socket = new WebSocket ('ws: // localhost: 8080');enchufe.addEventListener ('abrir', () =>
consola.log ('Conectado al servidor!');
);
enchufe.addEventListener ('mensaje', (msg) =>
consola.log ('Cliente recibido: $ msg.datos');
);
const sendMsg = () =>
enchufe.enviar ('¿Cómo va amigo!');
Explicación del código
Como con el servidor.js, crearemos un nuevo WebSocket que esté escuchando el puerto 8080, que se puede ver en la localhost: 8080 sección del código.
const socket = new WebSocket ('ws: // localhost: 8080');En la siguiente línea, addEventListener hace que su cliente escuche cualquier evento que esté sucediendo actualmente. En este caso, sería crear e iniciar el servidor. Una vez que se establece la conexión, el cliente envía un mensaje al terminal.
enchufe.addEventListener ('abrir', () =>consola.log ('Conectado al servidor!');
);
Una vez más, el cliente escucha cualquier evento que esté sucediendo actualmente. Cuando el servidor envía un mensaje, el cliente lo recibe y luego muestra el mensaje en la terminal.
enchufe.addEventListener ('mensaje', (msg) =>consola.log ('Cliente recibido: $ msg.datos');
);
Las últimas líneas son simplemente una función en la que el cliente envía un mensaje al servidor. Conectaremos esto a un botón en nuestro archivo html para comprender mejor cómo está funcionando.
const sendMsg = () =>enchufe.enviar ('¿Cómo va amigo!');
Preparar un archivo HTML
Finalmente, abra el índice.html y agregue una referencia a su cliente.js archivo dentro de él. En mi caso, simplemente agregaré las siguientes líneas de código:
Como puede ver en las líneas siguientes, src (dentro de la etiqueta del script) se refiere al archivo javascript del cliente. La función sendMsg, que se creó en el cliente.js, también se ha conectado a la función onClick del botón.
Poniendo todo junto
Ahora puede comenzar a probar su arquitectura de cliente y servidor. Primero, abra la terminal y ejecute el siguiente comando para iniciar su servidor:
$ servidor de nodo
Después de iniciar su servidor, abra el directorio en el que su índice.html está presente y haga doble clic en él para abrirlo en su navegador. Verá aparecer el siguiente mensaje en la terminal indicando que un cliente se ha conectado:
También puede verificar los mensajes enviados desde el servidor al cliente presionando el botón derecho y luego abriendo el Inspeccionar ventana. En esta ventana, haga clic en el Consola sección, y podrá ver los mensajes enviados desde el servidor.
Una vez que haga clic en el botón, tanto el servidor como el cliente podrán enviarse y recibir mensajes entre sí.
Servidor:
Cliente:
Voilà, se ha establecido su conexión WebSocket!
Conclusión
El protocolo WebSocket es una forma excelente de establecer la comunicación entre un cliente y un servidor. Este protocolo se utiliza en varios campos, incluidos los juegos de navegador multijugador, los sistemas de chat de varias plataformas de redes sociales e incluso los procesos de colaboración entre codificadores.
