Websocket works but data stay on the same candle

Hi there,

I’m actually trying to stream a single chart btc/usdt with lightweight-charts, using the binance websocket:

wss://stream.binance.com:9443/ws/btcusdt@kline_5m    

Actually, data are coming and I can see them but only in one candle like that:

I’m a beginner with javascript and maybe my problem is pretty simple. Can you help me guys?

Here is my code:

const binanceSocket = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@kline_5m');

    const chart = createChart(document.getElementById('chart'), {
      localization: {
        locale: 'fr-FR',
        dateFormat: 'yyyy/MM/dd',
      },
      height: 300,
      layout: {
        backgroundColor: '#000000',
        textColor: 'rgba(255, 255, 255, 0.9)',
      },
      grid: {
        vertLines: {
          color: 'rgba(197, 203, 206, 0.5)',
        },
        horzLines: {
          color: 'rgba(197, 203, 206, 0.5)',
        },
      },
      crosshair: {
        mode: CrosshairMode.Normal,
      },
      rightPriceScale: {
        borderColor: 'rgba(197, 203, 206, 0.8)',
      },
      timeScale: {
        borderColor: 'rgba(197, 203, 206, 0.8)',
        // Adds hours and minutes to the chart.
        timeVisible: true,
        secondsVisible: true,
      },
    });

    const candleSeries = chart.addCandlestickSeries({
      upColor: 'rgba(255, 144, 0, 1)',
      downColor: '#000',
      borderDownColor: 'rgba(255, 144, 0, 1)',
      borderUpColor: 'rgba(255, 144, 0, 1)',
      wickDownColor: 'rgba(255, 144, 0, 1)',
      wickUpColor: 'rgba(255, 144, 0, 1)',
    });

    const tradeDive = document.getElementById('divstaticchart');
    binanceSocket.onmessage = event => {
      console.log(event.data);
      const msgObject = JSON.parse(event.data);
      const datetrade = new Date(msgObject.E * 1000);
      tradeDive.append(msgObject.e);
      tradeDive.append(msgObject.E);
      tradeDive.append(msgObject.s);
      tradeDive.append(msgObject.k.t);
      tradeDive.append(msgObject.k.T);
      tradeDive.append(msgObject.k.s);
      tradeDive.append(msgObject.k.i);
      tradeDive.append(msgObject.k.f);
      tradeDive.append(msgObject.k.L);
      tradeDive.append(msgObject.k.o);
      tradeDive.append(msgObject.k.c);
      tradeDive.append(msgObject.k.h);
      tradeDive.append(msgObject.k.l);
      tradeDive.append(msgObject.k.v);
      tradeDive.append(msgObject.k.n);
      tradeDive.append(msgObject.k.x);
      tradeDive.append(msgObject.k.q);
      tradeDive.append(msgObject.k.V);
      tradeDive.append(msgObject.k.Q);
      tradeDive.append(msgObject.k.B, "\n");

      candleSeries.setData([
        { time: msgObject.E, open: msgObject.k.o, high: msgObject.k.h, low: msgObject.k.l, close: msgObject.k.c}]);
    };

I think - but I’m not sure - it’s because of the timestamp conversion:

this:

const datetrade = new Date(msgObject.E * 1000);

give a partial good result:

Mon Mar 02 52843 07:00:16 GMT+0100

have an idea to make a good conversion?

No need to time E with 1000. It’s already in milisecond