¿Qué es WebSocket? ¿Cómo se usa? ¿Cuáles son sus ventajas? ¿Cuáles son las diferencias con AJAX y Axios?
WebSocket es un protocolo de comunicación compatible con muchos navegadores web modernos y plataformas de servidor. Este protocolo permite la comunicación bidireccional entre un navegador web y un servidor. Mientras que el protocolo HTTP tradicional utiliza un modelo de "solicitud-respuesta" para las peticiones del cliente al servidor, con WebSocket el servidor también puede enviar datos al cliente. Esto es crucial para soportar aplicaciones en tiempo real y sitios web interactivos.
WebSocket proporciona comunicación bidireccional entre un cliente y un servidor. Por lo tanto, la tecnología WebSocket opera entre el cliente y el servidor. Sin embargo, se requiere soporte de WebSocket en el lado del servidor. Una vez establecida una conexión entre el cliente y el servidor, ambas partes pueden enviar y recibir datos. En consecuencia, para habilitar la comunicación en tiempo real utilizando WebSocket, debe existir un código de aplicación apropiado tanto en el lado del cliente como en el del servidor. Por ejemplo, un navegador web puede usar WebSocket en el lado del cliente, mientras que un servidor web puede aceptar y manejar conexiones WebSocket en el lado del servidor. De esta manera, facilita la comunicación en tiempo real utilizando WebSocket.
Las características principales de WebSocket son:
Comunicación Full-Duplex: Tanto el cliente como el servidor pueden enviarse datos mutuamente después de establecida la conexión.
Baja Latencia: WebSocket intercambia datos directamente sin datos de encabezado innecesarios como HTTP, lo que resulta en una menor latencia.
Conexión Única: Se puede utilizar una sola conexión para múltiples intercambios de datos, reduciendo la sobrecarga de establecer conexiones innecesarias.
Extensibilidad del Protocolo: WebSocket puede personalizarse y extenderse mediante extensiones de protocolo.
WebSocket se utiliza en diversos escenarios que requieren comunicación en tiempo real en aplicaciones web. Es ideal para aplicaciones como chat en vivo, juegos en línea, aplicaciones financieras y análisis en tiempo real.
Algunos casos de uso de WebSocket:
-
Aplicaciones de Chat en Vivo: WebSocket es ideal para aplicaciones de chat en vivo donde los usuarios pueden comunicarse en tiempo real. El envío y recepción rápida de mensajes mejora la experiencia del usuario.
-
Juegos en Tiempo Real: Los juegos multijugador en línea requieren un intercambio de datos rápido y continuo entre jugadores. WebSocket es ideal para procesar interacciones de usuario en tiempo real en este tipo de juegos.
-
Aplicaciones Financieras: Los precios de acciones, criptomonedas y otros activos financieros cambian rápidamente. Las aplicaciones financieras pueden usar WebSocket para monitorear datos de mercado en tiempo real y enviar notificaciones instantáneas a los usuarios.
-
Análisis en Tiempo Real: WebSocket puede utilizarse para el procesamiento de big data y análisis en tiempo real. Por ejemplo, una aplicación de análisis de flujo de datos puede procesar datos entrantes al instante y mostrar los resultados a los usuarios.
-
Control y Monitoreo Remoto: En aplicaciones como dispositivos IoT y sistemas de control industrial, WebSocket puede usarse para comunicación continua con dispositivos y monitoreo de estado.
-
Carga de Archivos por Arrastrar y Soltar: WebSocket puede usarse para monitorear en tiempo real la carga de archivos por arrastrar y soltar y mostrar el progreso a los usuarios.
Estos escenarios son solo algunos ejemplos de WebSocket, y esta tecnología es una solución adecuada para muchas aplicaciones diferentes que requieren comunicación en tiempo real en diversos campos.
Comparación de WebSocket con AJAX y Axios
WebSocket es un protocolo de comunicación diferente a otros métodos basados en HTTP como AJAX y Axios, y tiene casos de uso distintos. Aquí hay una comparación entre WebSocket, AJAX y Axios:
Proximidad y Comunicación en Tiempo Real:
-
WebSocket: Ideal para comunicación en tiempo real. Proporciona comunicación bidireccional y continua entre el servidor y el cliente. Esto puede usarse en escenarios como aplicaciones de chat en vivo y juegos en tiempo real.
-
AJAX y Axios: Las tecnologías basadas en HTTP como AJAX y Axios proporcionan comunicación unidireccional con el servidor. El cliente envía una solicitud al servidor y recibe una respuesta. Esto es útil para intercambiar datos sin recargar la página, pero no es tan adecuado para comunicación en tiempo real como WebSocket.
Tráfico de Datos:
-
WebSocket: Después de establecer la conexión, envía y recibe datos sin datos de encabezado innecesarios. Esto resulta en menor tráfico de datos y menor latencia.
-
AJAX y Axios: La comunicación basada en HTTP agrega datos de encabezado por cada solicitud, lo que puede aumentar el tráfico de datos y la latencia.
Gestión de Conexiones:
-
WebSocket: Proporciona comunicación continua a través de una sola conexión. Una vez establecida la conexión, no es necesario reconectar repetidamente para intercambiar datos entre cliente y servidor.
-
AJAX y Axios: Cada solicitud requiere una solicitud HTTP separada, lo que hace que la gestión de conexiones sea más compleja. Esto puede generar una sobrecarga innecesaria.
Plataformas Soportadas:
-
WebSocket: Soportado por navegadores web modernos y plataformas de servidor. Sin embargo, algunos navegadores y plataformas antiguas no soportan WebSocket.
-
AJAX y Axios: Soportados por casi todos los navegadores web y plataformas de servidor, ofreciendo una compatibilidad más amplia.
En conclusión, WebSocket es ideal para aplicaciones que requieren comunicación en tiempo real, pero tiene un caso de uso más específico en comparación con las tecnologías basadas en HTTP. Las tecnologías basadas en HTTP como AJAX y Axios se utilizan más ampliamente para el intercambio de datos de propósito general.
Ejemplo de Uso
Este ejemplo demuestra cómo conectar desde un cliente JavaScript a un servidor WebSocket y enviar y recibir mensajes. En este ejemplo, crearemos un servidor WebSocket simple usando Node.js y luego nos conectaremos a este servidor usando JavaScript en un archivo HTML.
Servidor WebSocket (Node.js):
const WebSocket = require('ws');
// WebSocket sunucusunu oluştur
const wss = new WebSocket.Server({ port: 8080 });
// Yeni bir bağlantı geldiğinde
wss.on('connection', function connection(ws) {
console.log('Yeni bir bağlantı oluşturuldu.');
// İstemciden gelen mesajları dinle
ws.on('message', function incoming(message) {
console.log('İstemciden mesaj alındı:', message);
// Gelen mesajı geri gönder
ws.send('Sunucudan alındı: ' + message);
});
});
Cliente WebSocket (HTML y JavaScript):
const socket = new WebSocket('ws://localhost:8080');
// Sunucudan gelen mesajları dinle
socket.onmessage = function(event) {
const outputDiv = document.getElementById('output');
outputDiv.innerHTML += ' ' + event.data + ' ';
};
// Mesaj gönderme işlevi
function sendMessage() {
const inputField = document.getElementById('messageInput');
const message = inputField.value;
socket.send(message);
inputField.value = ''; // input alanını temizle
}
El ejemplo anterior crea un servidor WebSocket y se conecta a él usando JavaScript dentro de un archivo HTML en el lado del cliente. Cuando el usuario ingresa sus mensajes en un cuadro de entrada de texto y hace clic en el botón "Enviar mensaje", el cliente envía este mensaje al servidor y muestra la respuesta del servidor en la pantalla.
Mini Servidor Socket que transmite datos de Paribu BTC
"use strict";
process.title = 'btc paribu';
var webSocketsServerPort = 1337;
var webSocketServer = require('websocket').server;
var http = require('http');
var axios = require('axios');
var uuid = require('uuid');
axios.defaults.timeout = 180000;
var clients = [];
/**
* HTTP server
*/
var server = null;
function createServer() {
server = http.createServer(function (request, response) { });
server.listen(webSocketsServerPort, function () {
console.log((new Date()) + " Server is listening on port " + webSocketsServerPort);
});
var wsServer;
wsServer = new webSocketServer({
httpServer: server
});
wsServer.on('request', function (request) {
var connection = request.accept(null, request.origin);
var _cnnuuid = add_connection(connection);
connection.on('message', function (message) {
if (message.type === 'utf8') { // accept only text
}
});
connection.on('close', function (connection) {
clean_disconnect_cnn();
});
});
} // createserver
function add_connection(_cnn) {
let _cnnuuid = null;
try {
_cnnuuid = uuid.v4();
clients.push({ uuid: _cnnuuid, cnn: _cnn });
if (clients.length > 60){
serverreset();
}
} catch (error) {
console.error(error);
}
return _cnnuuid;
}
function getData() {
if (clients.length > 0 || clients.length == 0) {
axios.get('https://paribu.com/ticker')
.then(function (response) {
console.log((new Date()) + " Sended Data (Client : " + clients.length + ")");
sendData(response);
})
.catch(function (error) {
console.log("error https://paribu.com/ticker ");
setTimeout(() => {
getData();
}, 3000);
const fs = require('fs');
let tar = new Date().toISOString();
fs.appendFile("log/log.txt", tar + "\n\r" + JSON.stringify(error) + "\n\r\n\r", function(err) {
if(err) {
return console.log(err);
}
});
});
} else {
setTimeout(() => { getData(); }, 2000);
}
}
function clean_disconnect_cnn() {
if (clients.length == 0) return;
let disconnected = clients.filter(function (e) {
return !e.cnn.connected;
});
if (disconnected.length > 0) {
clients = clients.filter(function (e) { return e.cnn.connected; });
}
}
function sendData(_senddata) {
try {
if (_senddata != null && _senddata.data != undefined && _senddata.data != null) {
let jsondata = JSON.stringify(_senddata.data);
if (clients.length > 0) {
for (let i = 0; i < clients.length; i++) {
try {
if (clients[i].cnn.connected) {
clients[i].cnn.send(jsondata);
}
} catch (error) {
console.error(error);
}
}
}
} else {
console.log("not data received");
}
} catch (error) {
console.log(error);
}
setTimeout(() => { getData(); }, 5000);
}
createServer();
getData();
setInterval(() => {
serverreset();
}, 1000 * 60 * 2); // 2dk da bir restart
function serverreset(){
try {
clients.forEach(element => {
element.cnn.close();
});
} catch (error) {}
server.close();
clients = [];
console.log("server closed");
server = null;
createServer();
}
- Web Yazılım
- Yazılım
Tepkini Göster
- 5
- 2
- 0
- 0
- 0
- 0
- 0
- 1
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
Yorumlar
Sende Yorumunu Ekle