cambio en logica de Clientes

Author: Jm9710

frontend/src/components/Clientes.jsx

@@ -3,14 +3,15 @@ import { Link } from "react-router-dom";
 import { io } from "socket.io-client";
 import ModalCliente from "./ModalCliente";
 
-const socket = io("https://app-agenda-sdc-backend.onrender.com"); // Usa la URL correcta de tu backend
-
-
+// Establece la conexión de Socket.IO utilizando WebSocket
+const socket = io("https://app-agenda-sdc-backend.onrender.com", {
+  transports: ["websocket"], // Usa solo WebSocket
+});
 
 const Clientes = () => {
-
+  // URL del backend, configurable con una variable de entorno
   const apiUrl = process.env.BACKEND_URL || 'https://app-agenda-sdc-backend.onrender.com';
-  
+
   const [clientes, setClientes] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -39,16 +40,17 @@ const Clientes = () => {
     // Fetch inicial de los clientes
     fetchClientes();
 
-  // Configurar el socket para escuchar cambios
-  socket.on("actualizar_clientes", (data) => {
-    console.log("Clientes actualizados recibidos:", data); // Agrega esta línea para depurar
-    setClientes(data); // Actualiza la tabla con los nuevos datos
-  });
+    // Configurar el socket para escuchar cambios en la lista de clientes
+    socket.on("actualizar_clientes", (data) => {
+      console.log("Clientes actualizados recibidos:", data); // Para depurar
+      setClientes(data); // Actualiza los datos de clientes en el estado
+    });
 
-  return () => {
-    socket.off("actualizar_clientes");
-  };
-}, []);
+    // Desuscribir el evento al desmontar el componente
+    return () => {
+      socket.off("actualizar_clientes");
+    };
+  }, []); // El efecto se ejecuta solo una vez cuando el componente se monta
 
   return (
     <div className="d-flex justify-content-center align-items-center vh-100 bg-success">