Programa de ejemplo de WebSocket
El protocolo WebSocket permite que ocurra una comunicación bidireccional entre un cliente y un servidor. Este proceso es similar a la forma en que tienen lugar las llamadas en su teléfono: primero, establece una conexión y luego puede comenzar a comunicarse entre sí. El protocolo WebSocket se usa 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.
Requisitos previos
Antes de pasar al proceso de creación y uso de un protocolo WebSocket, primero debe instalar algunas cosas que se requieren para este proceso. Lo primero que debe instalar es nodo.JS, una plataforma del lado del servidor que convierte el lenguaje de programación de JavaScript en código de máquina que le permite ejecutar JavaScript directamente en su computadora. Para instalar nodo.JS, los usuarios de Windows simplemente pueden ir al nodo oficial.Sitio web de JS y haga clic en el botón Green LTS que se encuentra en el centro de la pantalla.
Para los usuarios de Linux y MacOS, haga clic en el Descargas Sección en el subtarrente del sitio web.
Después de abrir el Descargas Sección, verá archivos de instalación para las tres plataformas principales. Seleccione un paquete compatible con su sistema.
Ejecute el instalador que viene con los archivos descargados y el nodo.JS se instalará en su computadora. Para verificar si el programa ha sido instalado, abra el terminal y emita el siguiente comando:
$ nodo -v
Después de instalar nodo.JS, ahora tiene acceso a varios módulos JavaScript, lo que hará que su trabajo sea más eficiente a largo plazo. Abra el directorio en el que desea crear la arquitectura de su cliente y servidor, luego abra el terminal dentro de ese directorio y ejecute el siguiente comando:
$ npm init -y
Este comando se usa para crear el paquete.archivo json que le permite configurar e instalar diferentes nodos.Paquetes JS. Instale el paquete de protocolo WebSocket emitiendo el siguiente comando en el terminal:
$ npm instalación ws
Crear tres archivos, llamado índice.HTML, cliente.js y servidor.js. Como lo indican los nombres, estos archivos JavaScript son la arquitectura del cliente y el servidor de nuestro protocolo WebSocket. Ahora, finalmente podemos comenzar a escribir el código de nuestras aplicaciones de cliente y servidor.
Creación de 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 ('Connection', (WSS) =>
consola.Log ("Un nuevo cliente conectado")
WSS.Enviar ('Bienvenido al servidor!');
WSS.en ('Mensaje', (Mensaje) =>
consola.log ('servidor recibido: $ mensaje');
WSS.Enviar ('Recibí tu mensaje:' + Mensaje);
);
);
Ahora, explicaremos lo que cada línea está haciendo con mayor detalle.
Explicación del código
Como se mencionó anteriormente, hay algunos módulos incorporados disponibles en el nodo.JS que hace que tu trabajo sea mucho más fácil. Para importar estos módulos, utilizaremos el requerir 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. El consola.registro() La línea simplemente está ahí para informarnos que el servidor ha comenzado. 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 ('Connection', (WSS) =>consola.Log ("Un nuevo cliente conectado")
);
Después de que se haya establecido una conexión, el WSS.la línea enviar () envía un mensaje al cliente. En este caso, el mensaje es "Bienvenido al servidor."
WSS.Enviar ('Bienvenido al servidor!');Finalmente, el WSS.ON ('Mensaje') es 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.en ('Mensaje', (Mensaje) =>consola.log ('servidor recibido: $ mensaje');
WSS.Enviar ('Recibí tu mensaje:' + Mensaje);
);
Creación de un cliente de 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.archivo html, pero prefiero mantenerlos separados. Primero miremos 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 ('Open', () =>
consola.registrar ('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 el 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, estaría creando e iniciando el servidor. Una vez que se establece la conexión, el cliente emite un mensaje al terminal.
enchufe.addEventListener ('Open', () =>consola.registrar ('conectado al servidor!');
);
Una vez más, el cliente escucha cualquier evento que ocurra actualmente. Cuando el servidor envía un mensaje, el cliente recibe esto y luego muestra el mensaje en el 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 está enviando un mensaje al servidor. Conectaremos esto a un botón en nuestro archivo HTML para una mejor comprensión de cómo funciona esto.
const sendmsg = () =>enchufe.Enviar ('¿Cómo va Amigo!');
Preparación de un archivo HTML
Finalmente, abra el índice.archivo html y agregar una referencia a su cliente.archivo js dentro de él. En mi caso, simplemente agregaré las siguientes líneas de código:
Como puede ver en las líneas a continuación, SRC (dentro de la etiqueta de script) se refiere al archivo JavaScript del cliente. La función sendmsg, que se creó en el cliente.El archivo JS también se ha conectado a la función OnClick del botón.
Poniendo todo junto
Ahora puede comenzar a probar la arquitectura de su cliente y servidor. Primero, abra el terminal y ejecute el siguiente comando para iniciar su servidor:
Servidor de nodo $
Después de comenzar su servidor, abra el directorio en el que su índice.El archivo HTML está presente y haga doble clic en él para abrirlo en su navegador. Verá que el siguiente mensaje aparece en el terminal que indica que un cliente ha conectado:
También puede verificar los mensajes enviados desde el servidor al cliente presionando el botón de clic 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 enviar y recibir mensajes a y entre sí.
Servidor:
Cliente:
Voilà, se ha establecido su conexión WebSocket!
Conclusión
El protocolo WebSocket es una excelente manera 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 procesos de colaboración entre codificadores.