Websocket integration in Angular

Developer API
1

Websocket :

curl -X 'GET' 
   'https://api-v2.upstox.com/feed/market-data-feed' 
 -H 'accept: */*' 
 -H 'Api-Version: 2.0' 
 -H 'Authorization: Bearer access_token'

this APIs (websocket APIs) are not working as other api(s) mentioned in the documentation. getting error like

websocket
websocket1856Ɨ415 189 KB

2

@aiby

Welcome to the community!

Please note that https://api-v2.upstox.com/feed/market-data-feed should be accessed using a websocket client rather than a standard API call. However, you can use https://api-v2.upstox.com/feed/market-data-feed/authorize as a regular API endpoint to retrieve the full websocket URL. Once you have it, you can initiate a connection using a websocket client that suits your needs.

For a reference implementation using the Node.js SDK, please visit: https://github.com/upstox/upstox-nodejs/tree/master/examples/websocket/market_data.

Do reach out if you need further assistance or if this resolves your issue.

3

Thanks Shan,
I able to get full websocket url and connect web socket with status code :101
but when subscribe socket and listening msgs getting empty object

async ngOnInit(): Promise<void> {

    //NOTE:: Web Socket 
    let con_url:any= await this.upstoxSvr.get_upstock_ws_connection_url_portfolio().toPromise();
    this.upstoxsocket.connect(con_url.data.authorizedRedirectUri);
    
    this.upstoxsocket.socket$.subscribe((message) => {
      console.log('Received WebSocket message:', message);
    });
    // END OF Eeb Socket

can any one provide sample code which used with Angular or JavaScript plz

4

Following should help you get started with Portfolio Updates in Node.js

Let us know if this helped you.

Thanks!!!

5

This Node.js code i have reffered in API documentation. While I have attempted to translate the Node.js code, I have been able to establish a WebSocket connection but subscribing to real-time data feeds is not working.

Therefore, I kindly request your teamā€™s assistance in providing a code sample specifically tailored for Angular, to receive WebSocket data feeds.

6

@aiby

I understand your challenges with subscribing to real-time data feeds using the provided example.

Currently, we do not have a WebSocket example tailored specifically for Angular. However, the fundamental concepts and logic in the Node.js example can be adapted for use in an Angular environment. If youā€™re familiar with Angular services, you can integrate the WebSocket logic into a service to manage your real-time data needs.

While we aim to provide more extensive code samples in future documentation releases, we recommend using the Node.js example as a conceptual guide. Translating its core logic to fit Angularā€™s structure and patterns will be essential.

Should you have more questions or require further clarification, please donā€™t hesitate to reach out. Your feedback is valuable to us, and weā€™re here to assist.

Warm regards!!

7

Finally was able to use the websocket connection to get Market Data stream after lot of permutation and combination. sharing the steps in case anyone faces this issue again for angular.
Steps:

  • npm install protoc
  • use protoc with proto-gen-ts and run this command in cmd at root folder of your angular project:

protoc --plugin=protoc-gen-ts_proto=ā€œ.\node_modules\.bin\protoc-gen-ts_proto.cmdā€ --ts_proto_out=. ./MarketDataFeed.proto
make sure MarketDataFeed.proto is in root folder or customize acc. to ur path

  • this will create a ts file which can be used to decode the response data

  • now, to create websocket connection , use native websocket client as it provides supports for websocket in browser.

  • get the websocket url using simple api call. and pass it in the websocket client no need to pass any headers or bearer token.

  • Once connection is established, send the data on open as per the format provided and you should recieve the message

  • Message might be blob format, so convert it first into BufferArray and then into UInt8Array

  • then pass this in the decode method which you can get from ts file generated. use FeedResponse Interface for this in that file.

and that should do it. this is what worked for me. feel free to add or customise acc. to your requirement.

@shanmu Hope we can get some sample code for angular websocket also, as there is not much support for protobuf in typescript. so, it would be helpful i think.

Hope this helps.

Best Regards,
Devanshu

1 Like
8

Please share the code for the angular you implemented

9

Please check out the below repo. i have implemented the same logic in it:

let me know if you face any issues with it

1 Like