Protocolos de Comunicación

HTTP, WebSockets, Hooks personalizados y Recharts

Contenido

• HTTP básico para desarrollo web
• Métodos GET, POST, PUT, DELETE, HEAD
• WebSockets
• Hook personalizado para conexión en tiempo real
• Gráficas con Recharts

HTTP

¿Qué es HTTP?

HTTP (HyperText Transfer Protocol) es el protocolo fundamental de la web.

Define cómo:

• El cliente (navegador o app)
• Solicita recursos
• A un servidor

Modelo conceptual:

Cliente → Solicitud HTTP → Servidor
Cliente ← Respuesta HTTP ← Servidor

HTTP es sin estado (stateless).

Cada petición es independiente.

Componentes de una petición

Una petición HTTP contiene:

• Método
• URL
• Cabeceras (headers)
• Cuerpo (body, opcional)

Ejemplo conceptual:

GET /users HTTP/1.1
Host: api.example.com
Authorization: Bearer token

Métodos HTTP principales

GET

• Solicita datos
• No modifica el servidor
• Debe ser idempotente

Ejemplo:

GET /users

Uso típico en React:

fetch("/api/users")

POST

• Envía datos al servidor
• Crea recursos nuevos
• Tiene cuerpo

Ejemplo:

fetch("/api/users", {
  method: "POST",
  body: JSON.stringify({ name: "Ana" }),
  headers: { "Content-Type": "application/json" }
});

PUT

• Actualiza completamente un recurso existente
• Idempotente

PUT /users/3

DELETE

• Elimina un recurso

DELETE /users/3

HEAD

• Igual que GET
• No devuelve cuerpo
• Solo cabeceras

Se utiliza para:

• Comprobar existencia
• Tamaño
• Metadatos

HTTP vs Comunicación en tiempo real

HTTP funciona bajo el modelo:

Petición → Respuesta → Fin

Si queremos datos continuamente:

• Debemos repetir peticiones
• Introduce latencia
• Ineficiente

Solución: WebSockets

WebSockets

WebSockets permiten comunicación bidireccional persistente.

Características:

• Conexión permanente
• Cliente y servidor pueden enviar datos
• Baja latencia
• Ideal para tiempo real

Ejemplos:

• Chats
• Juegos online
• Telemetría
• Trading
• Sistemas IoT

Flujo conceptual

Cliente ↔ Servidor
     conexión abierta

No se crea una nueva conexión por mensaje.

Creación de un WebSocket en JavaScript

const socket = new WebSocket("ws://localhost:8080");

Eventos principales:

• onopen
• onmessage
• onclose
• onerror

Recepción de mensajes

socket.onmessage = (event) => {
  console.log("Mensaje:", event.data);
};

Envío de mensajes

socket.send("Hola servidor");

Hook Personalizado

Si usamos WebSockets directamente dentro del componente:

• Mezclamos lógica de conexión con renderizado
• Código difícil de reutilizar
• Problemas de ciclo de vida

Solución: Hook personalizado

Hook personalizado

Un hook personalizado es:

Una función que utiliza hooks internos para encapsular lógica reutilizable

Convención:

useNombre()

Hook useWebSocket

import { useEffect, useState } from "react";

export function useWebSocket(url) {

  const [data, setData] = useState(null);

  useEffect(() => {

    const socket = new WebSocket(url);

    socket.onmessage = (event) => {
      setData(event.data);
    };

    return () => socket.close();

  }, [url]);

  return data;
}

Análisis conceptual

• Se crea la conexión al montar
• Se actualiza el estado al recibir datos
• Se cierra al desmontar
• El componente solo consume datos

Uso del hook

function Monitor() {

  const data = useWebSocket("ws://localhost:8080");

  return (
    <div>
      <h2>Datos en tiempo real</h2>
      <p>{data}</p>
    </div>
  );
}

Flujo:

1. Componente se renderiza
   
2. Hook abre conexión
   
3. Llegan datos
   
4. Estado cambia
   
5. Nuevo render

Visualización de datos

En aplicaciones reales no basta con mostrar texto.

Necesitamos:

• Gráficas
• Paneles de control
• Visualización clara

Una librería popular para React es Recharts.

Recharts

Recharts es una librería basada en:

• Componentes React
• SVG
• Composición declarativa

Instalación:

npm install recharts

Ejemplo básico

import {
  LineChart, Line, XAxis, YAxis,
  CartesianGrid, Tooltip
} from "recharts";

const data = [
  { t: 1, v: 10 },
  { t: 2, v: 15 },
  { t: 3, v: 8 }
];

function Grafica() {
  return (
    <LineChart width={400} height={300} data={data}>
      <CartesianGrid stroke="#ccc" />
      <XAxis dataKey="t" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="v" stroke="#8884d8" />
    </LineChart>
  );
}

Interpretación

Cada objeto representa un punto.

{ t: 1, v: 10 }

• t → eje X
• v → eje Y

Integración completa

WebSocket + Hook + Recharts

Objetivo:

Visualizar datos en tiempo real

Ejemplo conceptual

function Dashboard() {

  const data = useWebSocket("ws://localhost:8080");

  const chartData = data
    ? JSON.parse(data)
    : [];

  return (
    <LineChart width={500} height={300} data={chartData}>
      <XAxis dataKey="time" />
      <YAxis />
      <Tooltip />
      <Line dataKey="value" stroke="#82ca9d" />
    </LineChart>
  );
}

Flujo completo de una app moderna

Servidor → WebSocket → Hook → Estado → React → Gráfica

Arquitectura típica de sistemas en tiempo real.

Material

Servidor de testing de Python: Enlace.

Instalar websockets con pip install websockets

Tester de prueba: Enlace (click derecho guardar enlace como)

https://recharts.github.io/