MutationObserver

MutationObserver

 let socket = new WebSocket("wss://trade-crm.eu.excentral.com/socket.io/?EIO=3&transport=websocket");
 let firstmessage = false;
 let json_data;
 socket.onopen = function(e) {


   setInterval(function (){
     socket.send('2');
   }, 25000);
 };
//console.log('load');
 socket.onerror = function(){
   console.error('Socket Disconnected');
 }

 socket.onclose = function(){
   console.log('Connection Closed');
 }

 socket.onmessage = (e) => {
   
     if(e.data == '40'){
     socket.send('42["unsubscribe",{"method":"assetsRates"}]');
     socket.send('42["subscribe",{"method":"assetsRates","data":[89, 82, 80, 3429, 73, 70, 8475, 43674, 44740, 44744, 44759, 43690]}]');
    }
   
   if(e.data.toString().includes('assetsRates')){
     json_data = JSON.parse('[' + e.data.slice(2, e.data.length) + ']');
     json_data = json_data[0][1];
     json_data = Object.values(json_data);

     
 
     if(!firstmessage){
       for(let data of json_data){

              
         
         trade_stock.innerHTML += `
          <div class="">
             <div class="box__content ${data.name}">

             <div class="top__">

                  <div class="box__img">
                  <img class="img" src="https://eu.excentral.com/staging/wp-content/themes/excentral/images/brand/${data.name}.png">



                  </div>
                    <div class="go"></div>

             </div>

             <div class="block__"> 

              <p class="name">${data.name}</p>

              <ul class="box__price">
                 <li class="price">${data.mid_rate}</li>
                 <li class="color">${data.percent}</li>
               </ul>

               <ul class="info">
                 <li class="sell">
                   <span class="title">sell</span>
                   <span class="interest">${data.sell_rate} </span>
                 </li>
                 <li class="buy">
                   <span class="title">buy</span>
                   <span class="interest">${data.buy_rate}</span>
                 </li>
               </ul>

              </div>

             </div>
           </div>
         `;
         }
         let slides = document.querySelectorAll('.slick-box-slider');
       
       
          $(window).ready(function() {
            
     $('.header__next').click(function() {
        $slider__cripto.slick('slickNext');
    });

    $('.header__prev').click(function() {
        $slider__cripto.slick('slickPrev');
    });


    var $slider__cripto = $('#trade_stock');

    $(document).ready(function() {

      $slider__cripto.slick({

        centerPadding: '20px',
        arrows: false,
        dots: false,

        autoplay: true,
          autoplaySpeed: 3000,
        speed: 800,

        slidesToShow: 3,
        slidesToScroll: 1,
        centerPadding: '20px',
        responsive: [{
                breakpoint: 1200,
                settings: {
                    arrows: true,
                    slidesToShow: 2,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 1000,
                settings: {
                    arrows: true,
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            }
        ]
    });
      
   });
          });
       
       
       }
       firstmessage = true;
     
      if(firstmessage){
    const boxes = document.querySelectorAll('div>.box__content');

    for(let data of json_data){
      for(let box of boxes)
        if(box.getAttribute('class').includes(data.name)){
          box.querySelector('.color').innerHTML =  data.percent;
//          box.querySelector('.color').innerText = parseFloat(data.buy_rate).toFixed(2);


          if(parseFloat(data.percent) > 0){
            box.querySelector('.color').setAttribute('class', 'color green');
   
          }
          else if (parseFloat(data.percent) < 0){
            box.querySelector('.color').setAttribute('class', 'color red');
      
          }
          else{
        box.querySelector('.color').setAttribute('class', 'color');
          }
        }
    }
  }
      
     
     
   }

 

 };





            var element = trade_stock;
            var observer = new MutationObserver(function(mutations) {
              mutations.forEach(function(mutation) {
                if (mutation.type == "attributes") {
                  jQuery(".go").html('<?php echo do_shortcode('[cta class="" title_logged="TRADE ADS NOW  >" title_not_logged="TRADE ADS NOW  >"]'); ?>');
                }
              });
            });

            observer.observe(element, {
              attributes: true //configure it to listen to attribute changes
            });