Assign data from websocket to variables

by

I’m getting data from a website via a websocket stream, I can see it clearly as a Json object in the console, and now I would like to display it in my frontend but I’m not sure how to do it. I tried assigning the data to a variable but I struggle a little bit to dot so. Is that even the solution ?

my code that fetches the data goes as follow :

const ws = new WebSocket('wss://ws-feed.pro.coinbase.com');

ws.onopen = function () {
  ws.send(JSON.stringify({
    "type": "subscribe",
    "product_ids": [
      "BTC-USD",
    ],
    "channels": [
      "level2"
    ]
  }));
};

ws.onmessage = function (message) {
 const msg = JSON.parse(message.data);
  console.log(msg)
}

Even if I manage to display it in my app, it would appear as a whole and I would like to split each key/value pair of the object into different variables to style it properly, how can I do that ?

Thank you very much

1 thought on “Assign data from websocket to variables”

  1. you need to store the data inside a variable and update the ui
    by changing the innerText field of an html element <div id="app"></div>:

    const ws = new WebSocket("wss://ws-feed.pro.coinbase.com");

ws.onopen = function () {
  ws.send(
    // changed the request a bit because my pc could not handle
    // the amount of the messages (1 per 0.1ms)
    JSON.stringify({
      type: "subscribe",
      channels: [{ name: "status" }]
    })
  );
};

// used for a conditional rendering.
let isFirst = false;

ws.onmessage = function (message) {
  /**
   * destruct currencies value from the data.
   * same as:
   * const currencies = message.data.currencies
   */
  const { currencies } = JSON.parse(message.data);

  /**
   * get the name of the first or second object in the currencies array.
   */
  if (currencies && currencies.length > 0) {
    const index = isFirst ? 0 : 1;

    const name = currencies[index].name;

    // update is first
    isFirst = !isFirst;

    /**
     * find the html element you want to update.
     * update the UI.
     */
    document.getElementById("app").innerHTML = `
        <h1>First coin on the list is <span>${name}</span></h1>
      `;
  }
};
    Reply

Leave a Comment