Share Market live updates using Azure services

This is a small web-app implemented to get hands-on on Azure services. It provides live share market updates to connected clients. Note that, the share market updates are not consuming any real service, updates are simulated using custom update function written using Azure Functions and stored in Azure Cosmos DB. Also the shares are of made up companies!

Technologies used:

As this was developed while learning about serverless technologies, it heavily uses cloud services -

• Azure Functions
• Azure SignalR
• Azure Cosmos DB
• Aspnetcore web application, with AspNetCore.SpaServices extension for integrating Create-React-App
• React JS

Flow diagram:

So the main components are -

• A client app accessed by users to get real time share updates
• Azure Function app having 4 different functions
• An Azure SignalR service to act as backplane for all client connections
• An Azure Cosmos DB instance which stores the share details

Process overview -

• Initially, client app loads shares data through GetInitialPrices() function which is listening to Http requests and returns the required data by fetching it from Cosmos DB.
• Once initial data has been received, client app initiates SignalR connection through 'negotiate' endpoint which is another Function - GetConnection(). This function authenticates to Azure SignalR service to obtain required credentials for connecting to it. This credentials are returned to client app using which it initiates connection to Azure SignalR service. This connection is WebSocket(or SSE/long polling, as per support by client browser).
• The UpdateSimulator() function uses timer trigger configured while defining it and updates share data in Cosmos DB. This update is communicated to UpdateClient() function through Cosmos DB trigger.
• The UpdateClient() function then communicates this updates to Azure SignalR through output binding. Finally, SignalR communicates the updates to connected clients and the UI is updated.

Learnings have been documented on my blog -

• Making sense of FaaS by learning about Azure Functions – Part I
• Making sense of FaaS by learning about Azure Functions – Part II

Want to setup locally and play with it?

You will need to have basic familarity with dotnetcore development. This being a serverless app(except the client part, which can be hosted on Azure too!), you will need to create required Azure resources.

• Here's an example of how to create Azure SignalR and use it. After creating the resource you will get a connection string which you will need to put in /ShareMarketLiveUpdates.Functions/local.settings.json - AzureSignalRConnectionString.
• Here's a step by step guide on creating Azure Cosmos DB and adding data in it. After creating the resource you will get a connection string which you will need to put in /ShareMarketLiveUpdates.Functions/local.settings.json - cosmosforsharemarketupdates_DOCUMENTDB.
• Here's step by step guide for creating Azure Functions. If you just want try these out locally, you can do it without creating Functions in Azure.

ShareMarketLiveUpdates.Functions is a function app project and ShareMarketLiveUpdates.SignalRClient is Aspnetcore web application project. Both of these are dotnet core 3.1 projects, make sure you have that installed on your system.

• Microsoft has provided tools for development of Azure Functions locally, you can run Functions through Visual Studio or Visual Studio Code. Azure Functions needs storage account when running in Azure, and storage emulator while running locally. Make sure you have that running on your system.
• The client project can be ran through dotnet CLI/visual studio/visual studio code.