¿Qué es WebSocket?

WebSocket es un protocolo de comunicación que establece una conexión persistente y bidireccional entre el cliente y el servidor. A diferencia de HTTP tradicional, donde el cliente debe solicitar información, WebSocket permite que tanto el cliente como el servidor envíen datos en cualquier momento una vez establecida la conexión. Esto lo hace ideal para aplicaciones que requieren comunicación en tiempo real.

¿Para qué sirve WebSocket?

WebSocket es fundamental para crear aplicaciones interactivas en tiempo real. Te permite:

• Desarrollar chats y mensajería instantánea.
• Crear notificaciones push en tiempo real.
• Implementar colaboración en vivo (como Google Docs).
• Desarrollar juegos multijugador en línea.
• Mostrar actualizaciones de datos en tiempo real (trading, dashboard, etc.).

¿Cómo funciona?

Imagina WebSocket como un teléfono tradicional entre dos personas. Una vez que se establece la llamada, ambos pueden hablar y escuchar en cualquier momento sin necesidad de colgar y volver a llamar. La conexión permanece abierta hasta que una de las partes decide terminarla, permitiendo una conversación fluida y natural.

Ejemplo: WebSocket básico en JavaScript

Aquí tienes un ejemplo básico de cómo usar WebSocket en el navegador:

// Crear conexión WebSocket
const socket = new WebSocket('ws://localhost:8080');

// Cuando se abre la conexión
socket.onopen = function(event) {
  console.log('Conectado al servidor WebSocket');
  socket.send('¡Hola servidor!');
};

// Recibir mensajes del servidor
socket.onmessage = function(event) {
  console.log('Mensaje recibido:', event.data);
  
  // Mostrar mensaje en la interfaz
  const messageDiv = document.createElement('div');
  messageDiv.textContent = event.data;
  document.getElementById('messages').appendChild(messageDiv);
};

// Manejar errores
socket.onerror = function(error) {
  console.error('Error WebSocket:', error);
};

// Cuando se cierra la conexión
socket.onclose = function(event) {
  console.log('Conexión cerrada');
};

// Enviar mensaje cuando el usuario escribe
document.getElementById('sendButton').addEventListener('click', () => {
  const input = document.getElementById('messageInput');
  socket.send(input.value);
  input.value = '';
});

---

Este ejemplo muestra cómo establecer una conexión WebSocket, enviar y recibir mensajes en tiempo real, ideal para chats o notificaciones instantáneas.

Conceptos clave de WebSocket

• Full-Duplex Communication: Comunicación bidireccional simultánea.
• Persistent Connection: Conexión que permanece abierta hasta ser cerrada explícitamente.
• Real-time Data: Intercambio de datos instantáneo sin latencia de polling.
• Handshake: Proceso inicial de establecimiento de conexión usando HTTP.
• WebSocket API: Interfaz nativa del navegador para manejar conexiones WebSocket.

¿Dónde encuentras WebSocket?

• En aplicaciones de chat como WhatsApp Web, Slack, o Discord.
• En plataformas de trading para actualizaciones de precios en tiempo real.
• En editores colaborativos como Google Docs o Figma.
• En juegos multijugador online y aplicaciones de streaming en vivo.

Conclusión

WebSocket es la tecnología clave para aplicaciones que requieren comunicación en tiempo real. Ofrece una experiencia de usuario superior al eliminar la latencia y permitir interacciones instantáneas. Es especialmente valioso para aplicaciones colaborativas, juegos, chats y cualquier escenario donde los datos deben fluir bidireccionalmente sin demoras.

---