Fetching Data from WebSocket React

Question

I'm getting data from a Websocketin a Component:

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;

Two questions about this:

with this code, at some point I get the Insuficient Resources Error, but the data still retrieves... I dont know why. 2)if I use the commented useEffect it still getting data from the web socket besides the setTimeout... How can I get data only every 10 seconds?

Deniz Karadağ · Accepted Answer · 2022-02-04 19:11:26Z

2

you can use setInterval to run a code block within defined period.

setInterval(()=>{your function}, 10000)

This was just answer of your last question. If you want to run a code periodically, setInterval is your guy.

I edited your code a bit at 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>
  );
}

what I did, basically I put entire socket connection inside the useEffect and also put an if condition for the response.

https://codesandbox.io/embed/dark-fog-msg3v?fontsize=14&hidenavigation=1&theme=dark

edited Feb 4, 2022 at 19:11

answered Feb 3, 2022 at 16:35

Deniz Karadağ

7614 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

miouri Over a year ago

this does not work...

Deniz Karadağ Over a year ago

I updated the answer. you can have a look

miouri Over a year ago

this gets the data, but do not obey the setTime interval... it still gets the data every time. another thing is tha I get the Insuficient Resources error after a while... do you know why?

Deniz Karadağ Over a year ago

did you check the code on sandbox? I dont get insufficient error there. I kept open for 5 mins though. trick was to put ```` const ws = new WebSocket( "wss://stream.tradingeconomics.com/?client=guest:guest" );```` inside useEffect. with code above, you dont need setInterval. because it keeps the connection live whenever price changes. The reason why you get insufficient resources, you create the socket in the component body and run it inside useEffect. problem is everytime price gets updated, you run the same code again. that means creating a new socket on each render

miouri Over a year ago

yes, Ive checked with the code without set interval. But the error still happens after a while. On sandbox is ok, no error.... maybe is something with Chrome?

|

Collectives™ on Stack Overflow

Fetching Data from WebSocket React

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related