Websocket integration in Angular

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