Obtengo datos de un Websocket en un Componente:
function Data() { const [price, setPrice] = useState(""); const [date, setDate] = useState(""); const ws = new WebSocket( "wss://stream.tradingeconomics.com/?client=guest:guest" ); const subscription = { topic: "subscribe", to: "EURUSD:CUR" }; const initWebsocket = () => { ws.onopen = () => { console.log("Connection Established!"); ws.send(JSON.stringify(subscription)); }; ws.onmessage = (event) => { const response = JSON.parse(event.data); setPrice(response.price.toFixed(3)); let today = new Date(response.dt * 1); const options = { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric", }; let date = today.toLocaleDateString("en-EN", options); setDate(date); //ws.close(); }; ws.onclose = () => { console.log("Connection Closed!"); //initWebsocket(); }; ws.onerror = () => { console.log("WS Error"); }; }; useEffect(() => { initWebsocket(); // cleanup method which will be called before next execution. in your case unmount. return () => { ws.close(); }; }, []); // useEffect(() => { // setTimeout(initWebsocket(), 10000); // }, []); return ( <div> Price : {price} Last Update: {date} </div> ); } export default Data;Dos preguntas sobre esto:
puede usar setInterval para ejecutar un bloque de código dentro de un período definido.
setInterval(()=>{your function}, 10000)Esta fue solo la respuesta a su última pregunta. Si desea ejecutar un código periódicamente, setInterval es su tipo.
Edité un poco tu código en code sandbox:
import "./styles.css"; import { useState, useEffect } from "react"; export default function App() { const [price, setPrice] = useState(""); const [date, setDate] = useState(""); const subscription = { topic: "subscribe", to: "EURUSD:CUR" }; useEffect(() => { const ws = new WebSocket( "wss://stream.tradingeconomics.com/?client=guest:guest" ); ws.onopen = () => { console.log("Connection Established!"); ws.send(JSON.stringify(subscription)); }; ws.onmessage = (event) => { const response = JSON.parse(event.data); console.log(response); if (response.topic === "EURUSD") { setPrice(response.price.toFixed(3)); let today = new Date(response.dt * 1); const options = { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }; let date = today.toLocaleDateString("en-EN", options); setDate(date); } //ws.close(); }; ws.onclose = () => { console.log("Connection Closed!"); //initWebsocket(); }; ws.onerror = () => { console.log("WS Error"); }; return () => { ws.close(); }; }, []); // useEffect(() => { // setTimeout(initWebsocket(), 10000); // }, []); return ( <div> <p>Price : {price}</p> <p>Last Update: {date}</p> </div> ); }lo que hice, básicamente puse toda la conexión del socket dentro de useEffect y también puse una condición if para la respuesta.
https://codesandbox.io/embed/dark-fog-msg3v?fontsize=14&hidenavigation=1&theme=dark