Assign data from websocket to variables

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