Protocolos de Comunicación

HTTP, WebSockets, Hooks personalizados y Recharts

Javier Ribal del Río

2026-03-13

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
  • 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/