Table of Contents
Introduction
Financial applications require real-time data streaming to keep investors and businesses informed. In this tutorial, we will build a **real-time financial dashboard** using **ASP.NET Core, SignalR, and JavaScript** to display live stock market data dynamically.
What is SignalR?
SignalR is an ASP.NET Core library that enables real-time communication between the **server and client using WebSockets** or other transport methods. It is ideal for real-time financial dashboards that require continuous updates.
Setting Up an ASP.NET Core Project
To get started, create an **ASP.NET Core Web API project** and install SignalR.
dotnet new webapi -n FinancialDashboardInstall SignalR:
dotnet add package Microsoft.AspNetCore.SignalRImplementing SignalR for Real-Time Data
First, create a SignalR **Hub class**:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
public class FinancialHub : Hub
{
public async Task SendStockUpdate(string stockSymbol, double price)
{
await Clients.All.SendAsync("ReceiveStockUpdate", stockSymbol, price);
}
}Integrating Real-Time Financial Data
To fetch live stock prices, we can integrate a financial API (e.g., Alpha Vantage, Yahoo Finance API).
public async Task FetchStockPrices()
{
using HttpClient client = new HttpClient();
string url = "https://api.example.com/stock-prices";
var response = await client.GetStringAsync(url);
await Clients.All.SendAsync("ReceiveStockUpdate", response);
}Building a Real-Time Dashboard UI
Create a simple **HTML + JavaScript** front-end that listens for updates from SignalR.
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.4/signalr.min.js"></script>
<script>
const connection = new signalR.HubConnectionBuilder()
.withUrl("/financialhub")
.build();
connection.on("ReceiveStockUpdate", (symbol, price) => {
document.getElementById("stockData").innerHTML += `${symbol}: $${price}
`;
});
connection.start().catch(err => console.error(err));
</script>Deploying the Application
To host your application, consider **Azure App Services or AWS Elastic Beanstalk** for cloud deployment. Ensure WebSockets are enabled for SignalR to work efficiently.
Conclusion
Using **ASP.NET Core and SignalR**, we built a real-time financial dashboard that updates stock prices dynamically. You can extend this by integrating **charting libraries like Chart.js** for better data visualization.