Una API de WebSocket es una tecnología avanzada diseñada para la comunicación bidireccional entre un servidor web y el navegador de un cliente. Es una alternativa a la comunicación HTTP en la web, lo que le permite enviar mensajes al servidor y recibir respuestas basadas en eventos sin tener que esperar a que el servidor responda. Proporciona una comunicación de dos datos de dúplex completo y persistente con una tasa de latencia baja.
En términos sencillos, el zócalo web establece una conexión persistente entre el cliente y el servidor y ambas partes pueden comenzar a transmitir datos en cualquier momento.
Dónde usar WebSockets
Los WebSockets son útiles para aplicaciones web en tiempo real donde los datos del lado del cliente cambian con frecuencia. Algunos de los ejemplos en los que se utilizan WebSockets son las aplicaciones de chat, las aplicaciones del mercado de valores y los juegos para varios jugadores, etc.
Pero, ¿por qué los desarrolladores deberían usar sockets web si ya tenemos varios métodos para manejar la comunicación de datos en tiempo real? Para comprender las razones detrás del uso de WebSockets como alternativa a la comunicación HTTP tradicional, primero debemos comprender qué tecnologías se usaban anteriormente para manejar la comunicación en tiempo real y cuáles son los problemas asociados con ellas.
¿Cuáles son las alternativas a WebSockets?
A continuación se muestra una lista de algunas de las alternativas a WebSockets cuando se trata de manejar la comunicación en tiempo real en el proceso de desarrollo de software.
Votación
El sondeo es un método síncrono en el que el cliente envía una solicitud al servidor mediante una solicitud AJAX para verificar si hay datos disponibles. Luego, el cliente recibe una respuesta del servidor con los datos requeridos. Recibe la respuesta del servidor incluso si no hay datos disponibles. El sondeo es adecuado para escenarios en los que los desarrolladores conocen la frecuencia de los mensajes. Sin embargo, en la mayoría de las aplicaciones en tiempo real, la disponibilidad de mensajes suele ser impredecible. Por lo tanto, el sondeo no es una solución ideal para aplicaciones en tiempo real.
Encuesta grande
El sondeo grande también se conoce como cometa . Es un método en el que el cliente abre una conexión con el servidor durante un período de tiempo específico. Si el servidor no tiene ninguna información en ese momento, el cliente sigue abriendo la conexión hasta que haya algunos datos disponibles o hasta que alcance el límite de tiempo designado. El cliente debe conectarse al servidor constantemente para recibir nuevos datos. Comet retrasa la respuesta HTTP hasta que el servidor tiene algo que enviar de vuelta al cliente, esta técnica también se llama colgar –GET o pendiente-POST . Debido a esto, el sondeo grande, o el sondeo largo, tampoco es una buena opción para aplicaciones en tiempo real.
Las conexiones de socket web brindan una solución para satisfacer las necesidades de la comunicación de datos bidireccional persistente. Proporciona baja latencia y conexión persistente para la transacción, que puede ser manejada por un servidor o un cliente. La siguiente sección muestra cómo funcionan los sockets web y establecen una conexión persistente utilizando diferentes eventos y métodos.
¿Cómo funcionan los WebSockets?
Un objeto de socket web proporciona una API para administrar una conexión de socket web entre un cliente y un servidor. Mostramos cómo crear web sockets en la siguiente sección.
Crear una conexión WebSocket
Abra una conexión de socket web llamando al constructor de socket web, como se muestra en el siguiente ejemplo de código:
var connection = new WebSocket ('ws: // localhost: 4545, [' soap ',' xmpp ']);
Observe que la ‘ conexión ‘ aquí es un objeto de socket web. ‘ ws ‘ denota el esquema de URL para la conexión WebSocket. También existe una versión segura de conexiones de socket web llamada ‘ wss ‘, que funciona de la misma manera que se usa https para conexiones HTTP seguras.
El segundo argumento del constructor representa los subprotocolos. Este es un parámetro opcional. Estos subprotocolos pueden ser una cadena o una matriz de cadenas y deben ser uno de los subprotocolos registrados en el registro de IANA .
Eventos de WebSocket
Puede adjuntar controladores de eventos mientras establece la conexión con el servidor para saber cuándo se abre la conexión, si hay algún error o si hay mensajes entrantes.
Evento WebSocket: abierto
Una vez que se abre la conexión, puede enviar los datos al servidor utilizando la función de devolución de llamada onOpen , como se muestra en el siguiente fragmento de código:
connection.onopen = function () {
connection.send ('La conexión se abrió correctamente'); // Envía el mensaje al servidor
};
mensaje Evento WebSocket
La devolución de llamada para el evento de mensaje es ‘ onmessage ‘. Los eventos de mensajes de Websocket reciben los datos del servidor.
// Registrar mensajes del servidor
connection.onmessage = function (e) {
console.log ('El servidor dice:' + e.data);
};
Evento de error WebSocket
En caso de que ocurra un error, hay una devolución de llamada ‘ onerror ‘ para el evento de error. A continuación, se muestra un ejemplo de cómo codificar el evento de error WebSocket:
// Registrar errores
connection.onerror = function (error) {
console.log ('Errores:' + error);
};
Cerrar evento WebSocket
Puede cerrar la conexión establecida por el zócalo web usando cerrar . El evento ‘ close ‘ tiene una devolución de llamada llamada ‘ onclose ‘ para cerrar las conexiones de socket. Aquí hay un ejemplo:
connection.onclose = function (message) {
console.log ('Conexión cerrada', e);
};
Métodos WebSocket
A continuación se muestra una lista de métodos de WebSocket y un código de muestra que muestra cómo usarlos.
Usando el método send () WebSocket
El método send () se utiliza para transmitir datos mediante la conexión. Lanzará una excepción si ocurre un error o si la conexión ya no existe:
connection.send ('Este es un mensaje para el servidor que usa WebSockets.');
Usando el método close () WebSocket
El método close () se usa para terminar una conexión existente. La función de cierre necesita dos argumentos: el primero es un código ( código de estado) y el segundo es una razón (un formato de cadena de texto) para el cierre:
connection.close (500, 'Cerrando conexión ...');
Casos de uso de WebSocket
Puede utilizar WebSockets cuando se necesita una latencia baja y una conexión en tiempo real entre un servidor y un cliente. Si su aplicación necesita un WebSocket, no olvide considerar las tecnologías, como las colas de eventos , mientras crea sus aplicaciones del lado del servidor. WebSockets se puede utilizar ampliamente en diferentes aplicaciones como:
- Transmisión de redes sociales
- Aplicaciones de chat
- Juegos online multijugador
- Actualización de datos de ubicación sobre la marcha
- Aplicaciones del mercado de valores
Implementando WebSockets en Node.js
‘ ws ‘ es una biblioteca popular para usar WebSockets en aplicaciones Node.js. Para integrar WebSockets en su aplicación, primero debe instalar la biblioteca ‘ ws ‘ de npm usando el siguiente comando:
npm init npm install ws
Ahora cree un archivo server.js y escriba en él el siguiente código:
const WebSocket = require ('ws')
conexión constante = nuevo WebSocket.Server ({puerto: 8080})
connection.on ('conexión', ws => {
connection.on ('mensaje', mensaje => {
console.log (`Mensaje recibido => $ {mensaje}`)
})
connection.send ('Mensaje del servidor')
})
Este código crea un nuevo servidor en el puerto 8080, que es el puerto predeterminado para WebSockets. Agrega una función de devolución de llamada que envía el mensaje ‘ Mensaje del servidor ‘ al cliente y registra el mensaje que recibe del cliente.
Abra el símbolo del sistema y ejecute el servidor con este comando:
node server.js
En el siguiente paso, cree una aplicación cliente creando un archivo llamado client.js y agregue el siguiente código en él:
const WebSocket = require ('ws')
const url = 'ws: // localhost: 8080'
conexión constante = nuevo WebSocket (url)
connection.onopen = () => {
connection.send ('Mensaje del cliente')
}
connection.onerror = (error) => {
console.log (`Errores: $ {error}`)
}
connection.onmessage = (e) => {
console.log (e.data)
}
Ahora, ejecute el servidor del lado del cliente con el siguiente comando:
nodo client.js
Debería ver el siguiente resultado:
Cuando ejecuta la aplicación cliente, puede ver un mensaje transmitido por el servidor como se muestra en la captura de pantalla anterior.