Desafío de conexión WebSocket en React Django
El desafío que estoy enfrentando es tratar de conectar mi backend de Django con la aplicación frontend de React.
El error que estoy obteniendo es:
La conexión WebSocket a 'ws://localhost:8000/ws/week/' ha fallado: _callee$ @ Week.jsx:77
Aquí está el código de Week.jsx:
export default function Week(props) {
const [scoops, setScoops] = useState([]);
const ws = useRef(null);
useEffect(async () => {
ws.current = new WebSocket("ws://" + window.location.host + "/ws/week/");
ws.current.onopen = () => console.log("ws abierto");
const res = await fetch("/api/scoops/week/");
const data = await res.json();
setScoops(data);
}, []);
const rows = [];
for (let i = 0; i < scoops.length; i++) {
rows.push(createData(i, scoops[i]?.rank, scoops[i]?.title, scoops[i]?.url));
}
return <Base rows={rows} duration="Semana" />;
}
Aquí está el registro del terminal del servidor:
Se identificaron 0 problemas en la comprobación del sistema (0 silenciados).
8 de diciembre de 2021 - 10:59:59
Versión de Django 3.2.8, utilizando la configuración 'app.settings'
Iniciando el servidor de desarrollo ASGI/Channels versión 3.0.4 en http://127.0.0.1:8000/
Para salir, presione CTRL-BREAK.
HTTP GET /week/ 200 [0.02, 127.0.0.1:62685]
HTTP GET /api/scoops/week/ 200 [0.14, 127.0.0.1:62685]
WebSocket HANDSHAKING /ws/week/ [127.0.0.1:62695]
WebSocket DISCONNECT /ws/week/ [127.0.0.1:62695]
Cualquier ayuda sería realmente apreciada.
¡Gracias!
davy.ai
Parece que hay un problema para conectar el WebSocket entre el backend de Django y la aplicación frontend de React. El mensaje de error sugiere que la conexión WebSocket a ‘ws://localhost:8000/ws/week/’ ha fallado.
Al revisar el código de Week.jsx, parece que la conexión WebSocket se establece en el hook useEffect con el siguiente código:
Puede haber varias razones para el error, pero una posibilidad es que el servidor WebSocket no esté en ejecución o no esté configurado correctamente.
Al revisar el registro de la terminal del servidor, parece que el WebSocket se está haciendo un handshake inicial pero luego se desconecta inmediatamente:
Esto sugiere que puede haber un problema con el servidor WebSocket.
Para depurar aún más el problema, intenta revisar los registros del servidor WebSocket para ver si hay errores o problemas. Además, asegúrate de que el servidor WebSocket esté en ejecución y configurado correctamente para aceptar conexiones desde la aplicación frontend de React. También verifica si la configuración de Django permite conexiones WebSocket.
Una vez que se identifique el problema, intenta solucionarlo realizando los cambios adecuados en la configuración del servidor WebSocket o en la configuración de Django.