Websocket works but data stay on the same candle

Websocket
1

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:

Capture
Capture1701×397 35 KB

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}]);
    };
2

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?

3

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

4

First the data that you have to pass to the chart must be Arrays (open[
], high[ ], low[ ], close[ ], time[ ]), each candle is represented by each value within the Arrays, the stream will send data to update the values ​​of the last candle and also tells you when the current candle closes in the ‘x’ field so you can add a new value to all the Arrays of the chart your code should be something like the following

var closed = false

function update(data) {     
        if(closed) {
            time.unshift(data.k.t)
            open.unshift(data.k.o)
            high.unshift(data.k.h)
            low.unshift(data.k.l)
            close.unshift(data.k.c)
        }
        else {
            time[0] = data.k.t
            open[0] = data.k.o
            high[0] = data.k.h
            low[0] = data.k.l
            close[0] = data.k.c
        }
        closed = data.k.x
    }