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

2 Likes
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
10

@Devanshu_Wadhwani @shanmu

Hi, Thanks for your documentation. I am getting the MarketDataFeed using FeedResponse and sending the subscription message as binary. when I tried to access protfolio feed using Portfolio Stream Feed Authorize URl

https://api.upstox.com/v2/feed/portfolio-stream-feed/authorize?update_types=order%2Cposition%2Cholding

iam getting the json response with wss url , when i connect iam getting 101 staus but not the data , when i send ping iam receiving pong. can you please share your experience connecting to Portfolio Stream Feed Authorize URl, sugget me anything iam missing in this?

11

Hello @Vigneshwaran,

Receiving a status code of 101 indicates that the connection to the WebSocket has been successfully established. A status code of 101 signifies that the protocol has switched from HTTP to WebSocket, enabling the client and server to begin exchanging data.

Please note that the portfolio stream feed communicates all order updates exclusively over the WebSocket connection. Therefore, updates will only be received if the WebSocket is active, and an order is placed while connected. If the WebSocket is not connected, no updates or messages will be delivered.

Let me know if you need further clarification!

12

Hello @Ketan
Iam not recieving Holding and Position live stream in websocket, which iam expecting to get as i passed

update_types=order%2Cposition%2Cholding

as query parameter.
Can you please explain why iam not recieving them.

13

@Vigneshwaran - Try testing it with Postman and see if it works. Letā€™s call this step 1.

14

added params

key: update_types
value: order, position, holding

The response i got is

Handshake Details
Request URL: https://wsportfolioupdate-api.upstox.com/portfolio-stream-feeder/v2/upstox-developer-api/feeds?requestId=18c96120-6f37-40d7-bb9e-6de774ecf9c8&code=IpJsE-4315e15f-ca4c-4771-a4a0-cde3bf14aedd
Request Method: GET
Status Code: 101 Switching Protocols
Request Headers
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: +tggSLfoGEeJ7AKfc3mbTw==
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Host: wsportfolioupdate-api.upstox.com
Response Headers
Date: Thu, 05 Dec 2024 14:11:36 GMT
Connection: upgrade
Sec-WebSocket-Extensions: permessage-deflate
Sec-WebSocket-Accept: HDEVTg8WdZIdFSjbnz6olpvUwzE=
Upgrade: WebSocket
15

You will receive updates on positions and holdings only when a new position or holding is created, or when an existing position is closed.

Please note that existing positions or holdings are not provided in the WebSocket messages. Only updates to positions and holdings that occur during the WebSocket connection will be included in the messages.

Thank you.

16

Hello @Ketan ,

Thanks for that information, kindly update this in documentation as its not clear and also please update the market data feed documentation as well as the messages has to sent in binary format. Many people stuck because of the incomplete information.

Thanks a alot

17

Thank you for your feedback. We have shared this information with the concerned team, and the documentation will be updated soon.

1 Like