How to setup websocket with reactJS?

I have a React.js project where I manage my trades. I have successfully set up HTTP APIs, but the problem lies with websockets. I believe websockets are more suitable on the server side, as I have encountered no issues running them on Node.js. @Upstox @Pradeep_Jaiswar Please help.

@Ritik

For adding WebSocket functionality to your React.js project, you might want to look into using the browser’s WebSocket API. This API allows for real-time communication between your React application and the Node.js server. The process involves creating a WebSocket instance within your React components, handling various WebSocket events (like opening and closing connections, and receiving messages), and managing the connection’s lifecycle within React’s framework, typically using hooks like useEffect.

I recommend searching for general guides or documentation on the WebSocket API for detailed instructions and examples to assist with your implementation.

Best regards.

Hello @upstox devs,
This is for react JS : Market Data Feed websocket.
what proto file should i use to decode data coming from Market Data Feed Api.
I tried Node Js proto file by converting it to Javascript compatible protobuf via Protocol Buffers compiler (protoc ) but there are many errors. please help me with the code how to properly decode the incoming data and use it.



@shanmu @Pradeep_Jaiswar

Hi @Ritik Were you able to integrate websocket? I found the javascript websocket implementation example here - upstox-nodejs/examples/websocket/market_data at master ¡ upstox/upstox-nodejs ¡ GitHub

I tried to integrate in react, however was not able to integrate it correctly as I am not able send headers in websocket from react. I switched to icici breeze api for websocket streaming its straight forward, you can check it out here if you want - breezeconnect - npm

@Ritik @smt

Revisiting this subject.

We’ve included a sample code in our ReactJS repository that we believe will be of value to you.

Access the sample here

Please provide feedback on its functionality.

Thank you!

2 Likes