How to plug live websocket data

[itsmemittal]

Hi, I am new to this library would you please help me how I build live candlestick chart with it.

[gairom]

You build your own component which connects to the WS and update the data (setState) and you pass the data to the chart component as props (data=this.state.data).

[itsmemittal]

Would you help me please with an example if you have?

[moonlight16]

@itsmemittal When you say "live websocket data", do you mean to be able to have the charts automatically update with new data bars? If so, I'm interested in the same.
(I'm a newbie to web frameworks in general, so any guidance would be appreciate)

[itsmemittal]

Yes i am looking for same.

[gairom]

I can provide a code sample later today

[itsmemittal]

Ok

[gairom]

Your component should look something like:

connect() {
    this.ws = new WebSocket(url);
    this.ws.onmessage = this.onMessage;
    this.ws.onerror = this.onError;
}

onMessage(message) {
    let data = JSON.parse(message.data);
    this.setState({data: data});
    //if the ws is providing high volume data (multiplt updates per sec) you should consider some 
    //throteling, otherwise setting state multiple time per second will heart you app performance.  
    //React currently doesn't support bulk state changes for non-lifecycle methods so you need to 
    //handle it yourself.
}

render() {
    return (
       <CandlesticksChart data={this.state.data} .../>
    )
}

[mlasy]

you can check out my profile,dogecoin-react, i did something very similair (also with a websocket)