{"id":1773,"date":"2024-02-20T02:56:49","date_gmt":"2024-02-20T02:56:49","guid":{"rendered":"https:\/\/www.w3computing.com\/articles\/?p=1773"},"modified":"2024-02-20T05:44:55","modified_gmt":"2024-02-20T05:44:55","slug":"build-real-time-stock-ticker-application-csharp","status":"publish","type":"post","link":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/","title":{"rendered":"How to Build a Real-time Stock Ticker Application with C#"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In stock trading, information is money, and the speed at which this information is received can be the difference between profit and loss. This application we&#8217;re going to be building will serve as a window into the pulse of the market, providing you with up-to-the-minute stock prices, which is crucial for making informed trading decisions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our goal is to create an application that fetches live stock prices and displays them to the user in real-time. Imagine having the ability to view the price movements of your favorite stocks, updated instantaneously, without needing to refresh your browser or hit a button. That&#8217;s exactly what we&#8217;re aiming to build.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Importance of Real-time Data in Stock Trading<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In stock trading, timing is everything. The stock market is incredibly volatile, with prices changing by the second. Access to real-time data allows traders to execute trades at precise moments, maximizing their potential for profit. Without real-time data, traders are essentially flying blind, relying on outdated information to make decisions. This can lead to missed opportunities and, even worse, significant financial losses.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tools and Technologies Used<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To bring our real-time stock ticker application to life, we&#8217;ll be leveraging several powerful tools and technologies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>C#<\/strong>: Our primary programming language, known for its versatility and efficiency in building robust applications.<\/li>\n\n\n\n<li><strong>SignalR<\/strong>: A library for ASP.NET that enables real-time web functionality. With SignalR, we can push content from the server to the connected clients instantly as it becomes available.<\/li>\n\n\n\n<li><strong>.NET Core<\/strong>: A cross-platform framework that allows us to develop and run our application on Windows, Linux, and macOS.<\/li>\n\n\n\n<li><strong>Financial APIs<\/strong>: To fetch live stock data, we&#8217;ll integrate with financial APIs such as Alpha Vantage or Yahoo Finance. These APIs provide a wealth of financial data, including real-time stock prices, which are essential for our application.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Throughout this guide, I&#8217;ll guide you step by step, from setting up your development environment to deploying your application. You&#8217;ll learn not just how to write the code, but also how to think like a real-time application developer, making decisions that affect the performance and usability of your application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up the Development Environment<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before we dive into the code, it&#8217;s essential to set up our development environment properly. This step ensures that we have all the necessary tools and frameworks to build and run our real-time stock ticker application. Let&#8217;s get started!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installing .NET Core SDK<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The .NET Core Software Development Kit (SDK) is the foundation of our development process. It includes everything you need to develop applications with .NET Core, including the runtime, libraries, and the command-line tools.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Download the SDK<\/strong>: Visit the official <a href=\"https:\/\/dotnet.microsoft.com\/en-us\/download\" target=\"_blank\" rel=\"noreferrer noopener\">.NET download page<\/a> and select the SDK for your operating system (Windows, macOS, or Linux).<\/li>\n\n\n\n<li><strong>Install the SDK<\/strong>: Follow the installation instructions for your specific OS. The process is straightforward\u2014just run the installer and follow the prompts.<\/li>\n\n\n\n<li><strong>Verify the installation<\/strong>: Once installed, open a terminal or command prompt and run the following command to verify that .NET Core is correctly installed: <code>dotnet --version <\/code>This command should return the version of the .NET Core SDK that you&#8217;ve just installed, confirming that everything is set up correctly.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Setting up Visual Studio or Visual Studio Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For developing in C#, you can use either Visual Studio or Visual Studio Code. Visual Studio is a fully-featured IDE with powerful capabilities for .NET development, while Visual Studio Code is a more lightweight, extensible code editor that can be configured for C# development.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual Studio (Recommended for Windows users)<\/strong>:\n<ol class=\"wp-block-list\">\n<li>Download and install Visual Studio from the <a href=\"https:\/\/visualstudio.microsoft.com\/vs\/community\/\" target=\"_blank\" rel=\"noreferrer noopener\">official website<\/a>. The Community Edition is free for individual developers, open-source projects, academic research, and classroom learning.<\/li>\n\n\n\n<li>During the installation, select the &#8220;.NET Core cross-platform development&#8221; workload to install the necessary components for .NET Core development.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>Visual Studio Code<\/strong>:\n<ol class=\"wp-block-list\">\n<li>Download and install Visual Studio Code from the <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">official website<\/a>.<\/li>\n\n\n\n<li>Install the C# extension by Microsoft from the Visual Studio Code marketplace. This extension adds C# language support, debugging, and other essential features for .NET Core development.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a New C# .NET Core Project<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now that our development environment is set up, let&#8217;s create a new C# .NET Core project.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open a terminal or command prompt<\/strong>.<\/li>\n\n\n\n<li><strong>Navigate to the directory where you want to create your project<\/strong>.<\/li>\n\n\n\n<li><strong>Run the following command to create a new .NET Core console application<\/strong>: <code>dotnet new console -n RealTimeStockTicker. <\/code>This command creates a new folder named <code>RealTimeStockTicker<\/code> containing a simple &#8220;Hello World&#8221; console application.<\/li>\n\n\n\n<li><strong>Navigate into your project&#8217;s directory<\/strong>: <code>cd RealTimeStockTicker<\/code><\/li>\n\n\n\n<li><strong>Open your project in Visual Studio or Visual Studio Code<\/strong>:\n<ul class=\"wp-block-list\">\n<li>If using <strong>Visual Studio<\/strong>, double-click on the <code>.csproj<\/code> file to open the project.<\/li>\n\n\n\n<li>If using <strong>Visual Studio Code<\/strong>, open the project folder by selecting <code>File &gt; Open Folder<\/code> from the menu.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding the Application Architecture<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before we build our real-time stock ticker application, it&#8217;s crucial to have a clear understanding of its architecture. A well-thought-out architecture not only helps in organizing our application but also in ensuring scalability and maintainability. Our application will consist of three main components: the Frontend UI, the Backend Server, and the Real-time Data Service. Additionally, we&#8217;ll discuss the Model-View-Controller (MVC) pattern and introduce SignalR for real-time web functionality.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Overview of the Application Components<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Frontend UI<\/strong>: This is the interface that users will interact with. It displays real-time stock data in a visually appealing and easy-to-understand manner. The frontend will communicate with the backend server to receive real-time updates and display them to the user without needing to refresh the page.<\/li>\n\n\n\n<li><strong>Backend Server<\/strong>: The backend serves as the application&#8217;s backbone, handling client requests, processing business logic, and communicating with external services (like financial APIs) to fetch real-time stock data. It also manages connections to clients and broadcasts real-time data updates.<\/li>\n\n\n\n<li><strong>Real-time Data Service<\/strong>: This component is responsible for fetching real-time stock data from external financial APIs (such as Alpha Vantage or Yahoo Finance). The backend server uses this service to get the latest stock prices and then pushes updates to the frontend UI through a real-time communication channel.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Brief on MVC (Model-View-Controller) Pattern<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The MVC pattern is a software design pattern that separates an application into three main logical components: the model, the view, and the controller. This separation helps manage complexity in large applications, promotes organized code development, and supports scalability and maintainability.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Model<\/strong>: Represents the data and business logic of the application. In our case, it could be the representation of stock data.<\/li>\n\n\n\n<li><strong>View<\/strong>: The presentation layer of the application. It displays the model data to the user and sends user actions (e.g., clicks, data entries) to the controller.<\/li>\n\n\n\n<li><strong>Controller<\/strong>: Acts as an intermediary between the model and the view. It processes all the business logic and incoming requests, manipulates data using the model, and interacts with the view to render the final output.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">While our primary focus is on building a real-time application, understanding the MVC pattern is beneficial as it&#8217;s widely used in developing web applications, including those built with .NET Core.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Introduction to SignalR for Real-time Web Functionality<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">SignalR is a library for ASP.NET that simplifies adding real-time web functionality to applications. Real-time web functionality enables server-side code to push content to clients instantly. In the context of our stock ticker application, SignalR will allow our server to send stock price updates to the connected clients as soon as they happen, without the client needing to request the latest data explicitly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">SignalR abstracts away the complexities of managing real-time connections and provides a simple API to work with. It supports various techniques for real-time communication, such as WebSockets, Server-Sent Events, and Long Polling, choosing the best method based on what&#8217;s supported by the client&#8217;s browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With this architecture in place, we&#8217;re ready to start building our application. We&#8217;ll begin by integrating a stock market data API to fetch real-time stock data, setting the foundation for our application&#8217;s functionality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Integrating a Stock Market Data API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To provide real-time stock data in our application, we need to integrate with a stock market data API. These APIs offer access to live financial market data, which is crucial for our real-time stock ticker application. We&#8217;ll explore how to choose an API, set up an API key, create a service for fetching real-time stock data, and handle common issues like rate limits and errors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Choosing a Stock Market Data API<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Several APIs are available for accessing stock market data, including Alpha Vantage and Yahoo Finance, each with its strengths and limitations.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alpha Vantage<\/strong> offers a wide range of financial data and is praised for its simplicity and the breadth of data available. It provides various time series data, including real-time and historical stock prices, forex data, and technical indicators.<\/li>\n\n\n\n<li><strong>Yahoo Finance<\/strong> is another popular choice that offers comprehensive financial data, including stock prices, financial statements, and market news. Yahoo Finance API is known for its reliability and the extensive amount of data available.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When choosing an API, consider factors such as the availability of real-time data, ease of use, data update frequency, and any associated costs. For this tutorial, we&#8217;ll use <strong>Alpha Vantage<\/strong> as an example due to its ease of integration and free tier offering.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting up an API Key<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To use Alpha Vantage, you first need to obtain an API key:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit the <a href=\"https:\/\/www.alphavantage.co\/\" target=\"_blank\" rel=\"noreferrer noopener\">Alpha Vantage website<\/a>.<\/li>\n\n\n\n<li>Click on the <code>Get your free API key today<\/code> button.<\/li>\n\n\n\n<li>Fill in the required details to sign up.<\/li>\n\n\n\n<li>Once registered, you&#8217;ll receive an API key. Keep this key safe, as you&#8217;ll need it to make requests to the API.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Service to Fetch Real-Time Stock Data<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we&#8217;ll create a service in our C# application to handle API requests. This service will be responsible for fetching real-time stock data using the Alpha Vantage API.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create a new C# class<\/strong> in your project, named <code>StockDataService.cs<\/code>.<\/li>\n\n\n\n<li><strong>Implement the API call<\/strong> to fetch stock data. Here&#8217;s a basic example of how you might implement this:<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-keyword\">using<\/span> System.Net.Http;\n<span class=\"hljs-keyword\">using<\/span> System.Threading.Tasks;\n\n<span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">StockDataService<\/span>\n{\n    <span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">readonly<\/span> HttpClient _httpClient;\n    <span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-keyword\">string<\/span> ApiKey = <span class=\"hljs-string\">\"YOUR_API_KEY_HERE\"<\/span>;\n    <span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-keyword\">string<\/span> BaseUrl = <span class=\"hljs-string\">\"https:\/\/www.alphavantage.co\/query?\"<\/span>;\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-title\">StockDataService<\/span>(<span class=\"hljs-params\">HttpClient httpClient<\/span>)<\/span>\n    {\n        _httpClient = httpClient;\n    }\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">async<\/span> Task&lt;<span class=\"hljs-keyword\">string<\/span>&gt; <span class=\"hljs-title\">GetRealTimeStockData<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">string<\/span> symbol<\/span>)<\/span>\n    {\n        <span class=\"hljs-keyword\">var<\/span> url = <span class=\"hljs-string\">$\"<span class=\"hljs-subst\">{BaseUrl}<\/span>function=TIME_SERIES_INTRADAY&amp;symbol=<span class=\"hljs-subst\">{symbol}<\/span>&amp;interval=5min&amp;apikey=<span class=\"hljs-subst\">{ApiKey}<\/span>\"<\/span>;\n        <span class=\"hljs-keyword\">var<\/span> response = <span class=\"hljs-keyword\">await<\/span> _httpClient.GetAsync(url);\n        response.EnsureSuccessStatusCode();\n\n        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">await<\/span> response.Content.ReadAsStringAsync();\n    }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In this example, we&#8217;re making a GET request to the Alpha Vantage API for the intraday time series of a stock, specified by the <code>symbol<\/code> parameter. Replace <code>\"YOUR_API_KEY_HERE\"<\/code> with your actual Alpha Vantage API key.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Handling API Rate Limits and Errors<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When integrating with an external API, it&#8217;s crucial to handle rate limits and errors gracefully:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rate Limits<\/strong>: Alpha Vantage has limits on how many API requests you can make per minute and per day. Ensure your application respects these limits to avoid being blocked. Implement retry logic with exponential backoff in case you hit the rate limit.<\/li>\n\n\n\n<li><strong>Errors<\/strong>: Check the HTTP response status code and the content of the response for error messages. Implement error handling to gracefully manage situations where the API service is unavailable or the request fails due to other reasons.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">By integrating a stock market data API and handling potential issues, we&#8217;ve laid the foundation for our real-time stock ticker application. Next, we&#8217;ll build the backend to process and serve this data to our frontend, establishing the real-time functionality with SignalR.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Building the Backend: Designing the Stock Model<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As we transition to building the backend of our real-time stock ticker application, a crucial step is designing the data models that will represent the stock information. The stock model is a foundational element, defining the structure of stock data that we will fetch, process, and display. Let&#8217;s design a simple yet effective <code>Stock<\/code> class to meet our needs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Designing the Stock Class<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>Stock<\/code> class should encapsulate the essential attributes of a stock that we wish to display or process. At a minimum, we would want to include the stock symbol, its current price, and possibly other relevant data points such as the change in price (both in absolute terms and percentage), volume, and timestamp of the latest update.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of how you might define the <code>Stock<\/code> class in C#:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Stock<\/span>\n{\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">string<\/span> Symbol { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">double<\/span> Price { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">double<\/span> Change { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">double<\/span> ChangePercentage { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">long<\/span> Volume { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n    <span class=\"hljs-keyword\">public<\/span> DateTime LastUpdate { <span class=\"hljs-keyword\">get<\/span>; <span class=\"hljs-keyword\">set<\/span>; }\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-title\">Stock<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">string<\/span> symbol, <span class=\"hljs-keyword\">double<\/span> price, <span class=\"hljs-keyword\">double<\/span> change, <span class=\"hljs-keyword\">double<\/span> changePercentage, <span class=\"hljs-keyword\">long<\/span> volume, DateTime lastUpdate<\/span>)<\/span>\n    {\n        Symbol = symbol;\n        Price = price;\n        Change = change;\n        ChangePercentage = changePercentage;\n        Volume = volume;\n        LastUpdate = lastUpdate;\n    }\n\n    <span class=\"hljs-comment\">\/\/ Additional methods or logic related to the stock can be added here<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In this <code>Stock<\/code> class:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Symbol<\/code> represents the unique stock ticker symbol (e.g., AAPL for Apple Inc.).<\/li>\n\n\n\n<li><code>Price<\/code> is the current trading price of the stock.<\/li>\n\n\n\n<li><code>Change<\/code> shows the absolute change in price from the previous close.<\/li>\n\n\n\n<li><code>ChangePercentage<\/code> indicates the percentage change in price from the previous close.<\/li>\n\n\n\n<li><code>Volume<\/code> reflects the number of shares traded during the current or latest trading session.<\/li>\n\n\n\n<li><code>LastUpdate<\/code> is the timestamp for when the stock information was last updated.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This class structure allows us to easily extend our application in the future. For example, if we decide to include more detailed information about each stock, we can add additional properties to the <code>Stock<\/code> class without significantly altering the rest of our application&#8217;s code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By defining the <code>Stock<\/code> class, we&#8217;ve created a blueprint for the data our application will handle. This model will be instrumental as we develop further components of our backend, such as the service to fetch real-time data, the SignalR hub for real-time communication, and the API controllers that will serve this data to the frontend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up the SignalR Hub<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">SignalR facilitates adding real-time web functionality to applications, enabling server-side code to push updates to clients instantly. In the context of our real-time stock ticker application, we&#8217;ll use SignalR to send live stock updates from the server to all connected clients as soon as new data is available.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a SignalR Hub for Real-Time Communication<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The core component for working with SignalR is the &#8220;Hub&#8221;. A SignalR hub is a class that serves as the main high-level pipeline that handles client-server communication. Let&#8217;s create a SignalR hub that will manage sending stock updates to connected clients.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Add SignalR to Your Project<\/strong>: Before creating the hub, ensure that SignalR is added to your .NET Core project. If you&#8217;re using .NET Core 3.1 or later, SignalR is included by default. For older versions, you may need to install the SignalR NuGet package.<\/li>\n\n\n\n<li><strong>Create the StockTickerHub Class<\/strong>: In your project, create a new class file named <code>StockTickerHub.cs<\/code>. This class will inherit from <code>Hub<\/code>, which is part of the SignalR library.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a basic example of what the <code>StockTickerHub<\/code> class might look like:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-keyword\">using<\/span> Microsoft.AspNetCore.SignalR;\n<span class=\"hljs-keyword\">using<\/span> System.Threading.Tasks;\n\n<span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">StockTickerHub<\/span> : <span class=\"hljs-title\">Hub<\/span>\n{\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">async<\/span> Task <span class=\"hljs-title\">SendMessage<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">string<\/span> stockSymbol, <span class=\"hljs-keyword\">double<\/span> price<\/span>)<\/span>\n    {\n        <span class=\"hljs-comment\">\/\/ Broadcasts the stock update to all connected clients<\/span>\n        <span class=\"hljs-keyword\">await<\/span> Clients.All.SendAsync(<span class=\"hljs-string\">\"ReceiveMessage\"<\/span>, stockSymbol, price);\n    }\n\n    <span class=\"hljs-comment\">\/\/ You can add more methods here to handle different types of messages or actions, <\/span>\n    <span class=\"hljs-comment\">\/\/ such as adding a new stock to the watchlist, removing a stock, etc.<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In this example, the <code>StockTickerHub<\/code> class has a method <code>SendMessage<\/code> that takes a stock symbol and its price as parameters. This method uses <code>Clients.All.SendAsync<\/code> to send a message to all connected clients. The <code>ReceiveMessage<\/code> method on the client-side will be triggered to process this message. You can customize the method name (<code>ReceiveMessage<\/code> in this example) and the data it sends as needed to fit your application&#8217;s requirements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Integrating the Hub into Your Application<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To make your SignalR hub active and accessible to clients, you need to register it in the application&#8217;s request processing pipeline.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Modify the <code>Startup.cs<\/code> File<\/strong>: Open the <code>Startup.cs<\/code> file in your .NET Core project and make the following changes:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the <code>ConfigureServices<\/code> method, add SignalR to the service collection:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">void<\/span> <span class=\"hljs-title\">ConfigureServices<\/span>(<span class=\"hljs-params\">IServiceCollection services<\/span>)<\/span>\n{\n    services.AddSignalR();\n    <span class=\"hljs-comment\">\/\/ Add other services like MVC, Razor Pages as needed<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In the <code>Configure<\/code> method, map the hub to a path in the application:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">void<\/span> <span class=\"hljs-title\">Configure<\/span>(<span class=\"hljs-params\">IApplicationBuilder app, IWebHostEnvironment env<\/span>)<\/span>\n{\n    <span class=\"hljs-comment\">\/\/ Other configurations like UseRouting, UseAuthorization, etc.<\/span>\n\n    app.UseEndpoints(endpoints =&gt;\n    {\n        endpoints.MapHub&lt;StockTickerHub&gt;(<span class=\"hljs-string\">\"\/stockTickerHub\"<\/span>);\n        <span class=\"hljs-comment\">\/\/ Map other endpoints like controllers and Razor Pages<\/span>\n    });\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">This setup creates a real-time communication channel between your server and clients. Clients can connect to <code>\/stockTickerHub<\/code> to start receiving live stock updates. Next, we&#8217;ll look into developing the client-side functionality to connect to this hub and display the stock data in real-time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Developing the API Controller to Fetch and Send Stock Data<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After setting up the SignalR hub for real-time communication, the next step in building our backend is to develop an API controller. This controller will handle HTTP requests to fetch stock data and then use the SignalR hub to send this data to connected clients in real-time. Here&#8217;s how you can implement such a controller in your .NET Core application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating the StockController<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Add a New Controller to Your Project<\/strong>: In your project&#8217;s Controllers folder, add a new controller named <code>StockController<\/code>. If you&#8217;re using ASP.NET Core MVC or Web API, this controller should inherit from <code>Controller<\/code> or <code>ControllerBase<\/code>, respectively.<\/li>\n\n\n\n<li><strong>Inject Dependencies<\/strong>: For the controller to fetch stock data and communicate with clients via SignalR, you need to inject the <code>StockDataService<\/code> (or your equivalent service for fetching stock data) and <code>IHubContext&lt;StockTickerHub&gt;<\/code> into the controller.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Implementing the Controller Action<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s an example implementation of a controller action that fetches real-time stock data and sends updates to clients:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-keyword\">using<\/span> Microsoft.AspNetCore.Mvc;\n<span class=\"hljs-keyword\">using<\/span> Microsoft.AspNetCore.SignalR;\n<span class=\"hljs-keyword\">using<\/span> System.Threading.Tasks;\n\n<span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">StockController<\/span> : <span class=\"hljs-title\">ControllerBase<\/span>\n{\n    <span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">readonly<\/span> IHubContext&lt;StockTickerHub&gt; _hubContext;\n    <span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">readonly<\/span> StockDataService _stockDataService;\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-title\">StockController<\/span>(<span class=\"hljs-params\">IHubContext&lt;StockTickerHub&gt; hubContext, StockDataService stockDataService<\/span>)<\/span>\n    {\n        _hubContext = hubContext;\n        _stockDataService = stockDataService;\n    }\n\n    &#91;<span class=\"hljs-meta\">HttpGet(<span class=\"hljs-meta-string\">\"api\/stock\/{symbol}\"<\/span>)<\/span>]\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">async<\/span> Task&lt;IActionResult&gt; <span class=\"hljs-title\">GetStockData<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">string<\/span> symbol<\/span>)<\/span>\n    {\n        <span class=\"hljs-keyword\">try<\/span>\n        {\n            <span class=\"hljs-comment\">\/\/ Fetch the real-time stock data<\/span>\n            <span class=\"hljs-keyword\">var<\/span> stockData = <span class=\"hljs-keyword\">await<\/span> _stockDataService.GetRealTimeStockData(symbol);\n            \n            <span class=\"hljs-comment\">\/\/ Assuming stockData is already deserialized to a Stock object<\/span>\n            <span class=\"hljs-comment\">\/\/ Send the stock update to all connected clients<\/span>\n            <span class=\"hljs-keyword\">await<\/span> _hubContext.Clients.All.SendAsync(<span class=\"hljs-string\">\"ReceiveMessage\"<\/span>, stockData.Symbol, stockData.Price);\n\n            <span class=\"hljs-comment\">\/\/ Return the stock data as a response to the HTTP request<\/span>\n            <span class=\"hljs-keyword\">return<\/span> Ok(stockData);\n        }\n        <span class=\"hljs-keyword\">catch<\/span> (System.Exception ex)\n        {\n            <span class=\"hljs-comment\">\/\/ Handle exceptions (e.g., stock not found, API errors)<\/span>\n            <span class=\"hljs-keyword\">return<\/span> StatusCode(<span class=\"hljs-number\">500<\/span>, ex.Message);\n        }\n    }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In this example, the <code>GetStockData<\/code> action method:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Receives a stock symbol as a parameter from the route.<\/li>\n\n\n\n<li>Uses the <code>StockDataService<\/code> to fetch real-time data for the specified stock symbol.<\/li>\n\n\n\n<li>Sends the fetched stock data to all connected clients using the SignalR hub context. Here, <code>ReceiveMessage<\/code> is the method clients will listen to for updates.<\/li>\n\n\n\n<li>Returns the fetched stock data as an HTTP response.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Notes:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure your <code>StockDataService<\/code> method <code>GetRealTimeStockData<\/code> deserializes the API response to a <code>Stock<\/code> object or a similar data structure you&#8217;ve defined.<\/li>\n\n\n\n<li>You might need to adjust the <code>SendAsync<\/code> parameters and the client-side handling code based on the structure of your <code>Stock<\/code> object and the specifics of how you want to display the data.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This controller effectively bridges the gap between fetching real-time stock data and distributing that data to clients. With this setup, your backend is capable of processing stock data requests and broadcasting updates to all connected clients in real time, leveraging the full power of ASP.NET Core and SignalR for real-time web functionalities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating the Frontend: Setting Up the SignalR Client<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To enable real-time communication between our server and the frontend, we need to set up the SignalR client in our web application. This will allow us to receive real-time stock data updates from our SignalR hub without needing to refresh the browser. Let&#8217;s dive into how to establish a connection to the SignalR hub from the frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Including the SignalR Client Library<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, ensure you have the SignalR client library included in your frontend project. If you&#8217;re working on a project that uses HTML and JavaScript, you can include the SignalR client library via a CDN:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/microsoft-signalr\/3.1.0\/signalr.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">For projects using modern JavaScript frameworks (like React, Angular, or Vue), you might install the SignalR client package via npm or yarn:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"Bash\" data-shcb-language-slug=\"bash\"><span><code class=\"hljs language-bash\">npm install @microsoft\/signalr<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Bash<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">bash<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Or<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"Bash\" data-shcb-language-slug=\"bash\"><span><code class=\"hljs language-bash\">yarn add @microsoft\/signalr<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Bash<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">bash<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Establishing Connection to the SignalR Hub<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, let&#8217;s write the JavaScript code to connect to the SignalR hub and listen for stock data updates. This example assumes you&#8217;re using plain JavaScript with HTML.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create a New JavaScript File<\/strong> (e.g., <code>stockTicker.js<\/code>) or include the following script in your HTML file within a <code>&lt;script&gt;<\/code> tag.<\/li>\n\n\n\n<li><strong>Write the JavaScript Code to Connect to the SignalR Hub<\/strong>:<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Create a connection to the SignalR hub<\/span>\n<span class=\"hljs-keyword\">const<\/span> connection = <span class=\"hljs-keyword\">new<\/span> signalR.HubConnectionBuilder()\n    .withUrl(<span class=\"hljs-string\">\"\/stockTickerHub\"<\/span>) <span class=\"hljs-comment\">\/\/ The URL to the SignalR hub<\/span>\n    .configureLogging(signalR.LogLevel.Information)\n    .build();\n\n<span class=\"hljs-comment\">\/\/ Start the connection<\/span>\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">start<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">await<\/span> connection.start();\n        <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"SignalR Connected.\"<\/span>);\n    } <span class=\"hljs-keyword\">catch<\/span> (err) {\n        <span class=\"hljs-built_in\">console<\/span>.error(err);\n        setTimeout(start, <span class=\"hljs-number\">5000<\/span>); <span class=\"hljs-comment\">\/\/ Retry connection if failed<\/span>\n    }\n}\n\nconnection.onclose(<span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-keyword\">await<\/span> start(); <span class=\"hljs-comment\">\/\/ Automatically try to reconnect on connection loss<\/span>\n});\n\n<span class=\"hljs-comment\">\/\/ Start the connection<\/span>\nstart();\n\n<span class=\"hljs-comment\">\/\/ Subscribe to the \"ReceiveMessage\" method to get stock updates from the server<\/span>\nconnection.on(<span class=\"hljs-string\">\"ReceiveMessage\"<\/span>, (symbol, price) =&gt; {\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Stock update for <span class=\"hljs-subst\">${symbol}<\/span>: $<span class=\"hljs-subst\">${price}<\/span>`<\/span>);\n    <span class=\"hljs-comment\">\/\/ Update the UI with the new stock price here<\/span>\n    <span class=\"hljs-comment\">\/\/ For example, you might find an element by its ID and update its text content<\/span>\n    <span class=\"hljs-keyword\">const<\/span> stockElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">`stock-price-<span class=\"hljs-subst\">${symbol}<\/span>`<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (stockElement) {\n        stockElement.textContent = <span class=\"hljs-string\">`$<span class=\"hljs-subst\">${price}<\/span>`<\/span>;\n    }\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">This script does the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Initializes a new connection to the SignalR hub using the URL where your hub is hosted (<code>\/stockTickerHub<\/code> in this example).<\/li>\n\n\n\n<li>Starts the connection and logs a message to the console on successful connection. If the connection fails, it retries after 5 seconds.<\/li>\n\n\n\n<li>Listens for connection closure and tries to reconnect automatically.<\/li>\n\n\n\n<li>Subscribes to the <code>ReceiveMessage<\/code> event from the SignalR hub, which is triggered by the server to send stock data updates. When a message is received, it logs the stock update to the console and updates the UI accordingly.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Updating the UI with Real-Time Data<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The last part of the script shows a basic example of how to update the UI with the received stock data. In a real application, you would likely update elements on the page to reflect the latest stock prices. The example assumes you have HTML elements with IDs corresponding to <code>stock-price-${symbol}<\/code>, which you would replace with actual logic to match your UI design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With this setup, your frontend is now capable of receiving real-time stock updates from the backend without requiring manual refreshes, creating a dynamic and interactive user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Designing the User Interface to Display Stock Data<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Creating an engaging and informative user interface (UI) is crucial for displaying real-time stock data in a way that&#8217;s easy to understand and interact with. This section will guide you through designing a simple UI and provide HTML and JavaScript examples for displaying real-time stock data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Basic HTML Structure<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s start with the HTML structure. Our UI will include a table where each row represents a different stock, displaying its symbol, current price, and percentage change. This setup allows users to quickly grasp the latest market movements at a glance.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Real-Time Stock Ticker<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"style.css\"<\/span>&gt;<\/span> <span class=\"hljs-comment\">&lt;!-- If you have a stylesheet --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Real-Time Stock Ticker<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"stocksTable\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">thead<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Stock Symbol<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Price<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Change (%)<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">thead<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tbody<\/span>&gt;<\/span>\n            <span class=\"hljs-comment\">&lt;!-- Stock rows will be added here dynamically --&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tbody<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/microsoft-signalr\/3.1.0\/signalr.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"stockTicker.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span> <span class=\"hljs-comment\">&lt;!-- Your JavaScript file --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">JavaScript for Dynamic Data Updates<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we&#8217;ll enhance the <code>stockTicker.js<\/code> JavaScript file to update the UI dynamically with the incoming real-time stock data. Assuming you have established a connection to the SignalR hub as described in the previous section, let&#8217;s focus on updating the table with stock data.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Assuming the connection setup from the previous example is above this code<\/span>\n\n<span class=\"hljs-comment\">\/\/ Function to update or add a stock row in the table<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateStockRow<\/span>(<span class=\"hljs-params\">symbol, price, changePercentage<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> rowId = <span class=\"hljs-string\">`stock-row-<span class=\"hljs-subst\">${symbol}<\/span>`<\/span>;\n    <span class=\"hljs-keyword\">let<\/span> row = <span class=\"hljs-built_in\">document<\/span>.getElementById(rowId);\n\n    <span class=\"hljs-comment\">\/\/ If the row doesn't exist, create a new one<\/span>\n    <span class=\"hljs-keyword\">if<\/span> (!row) {\n        row = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'tr'<\/span>);\n        row.id = rowId;\n        row.innerHTML = <span class=\"hljs-string\">`\n            &lt;td&gt;<span class=\"hljs-subst\">${symbol}<\/span>&lt;\/td&gt;\n            &lt;td id=\"stock-price-<span class=\"hljs-subst\">${symbol}<\/span>\"&gt;<span class=\"hljs-subst\">${price}<\/span>&lt;\/td&gt;\n            &lt;td id=\"stock-change-<span class=\"hljs-subst\">${symbol}<\/span>\"&gt;<span class=\"hljs-subst\">${changePercentage}<\/span>%&lt;\/td&gt;\n        `<\/span>;\n        <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#stocksTable tbody'<\/span>).appendChild(row);\n    } <span class=\"hljs-keyword\">else<\/span> {\n        <span class=\"hljs-comment\">\/\/ Update existing row<\/span>\n        <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">`stock-price-<span class=\"hljs-subst\">${symbol}<\/span>`<\/span>).textContent = price;\n        <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">`stock-change-<span class=\"hljs-subst\">${symbol}<\/span>`<\/span>).textContent = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${changePercentage}<\/span>%`<\/span>;\n    }\n}\n\n<span class=\"hljs-comment\">\/\/ Modify the subscription to \"ReceiveMessage\" to handle the full stock object<\/span>\nconnection.on(<span class=\"hljs-string\">\"ReceiveMessage\"<\/span>, (stock) =&gt; {\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Stock update for <span class=\"hljs-subst\">${stock.symbol}<\/span>: $<span class=\"hljs-subst\">${stock.price}<\/span>`<\/span>);\n    updateStockRow(stock.symbol, stock.price, stock.changePercentage);\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In this updated JavaScript:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>updateStockRow<\/code> function checks if a row for the stock symbol already exists in the table. If it doesn&#8217;t, the function creates a new row with the stock symbol, price, and change percentage. If the row exists, it updates the price and change percentage.<\/li>\n\n\n\n<li>The <code>connection.on(\"ReceiveMessage\", ...)<\/code> callback is modified to accept a stock object (<code>{ symbol, price, changePercentage }<\/code>). This object structure assumes that your backend sends stock data in this format. Adjust the properties accordingly to match your actual data structure.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This setup creates a dynamic, real-time stock ticker application where the frontend seamlessly displays and updates stock data as it changes, without any page refreshes required. Users can watch the stock market move in real time, providing a valuable tool for traders and financial enthusiasts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implementing Real-time Data Updates<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To create a truly dynamic real-time stock ticker application, we must continuously fetch real-time data from the stock market data API and broadcast these updates to all connected clients using SignalR. This process involves setting up a mechanism on the server-side to periodically fetch the latest stock prices and then use SignalR to push these updates to the clients. Here&#8217;s how you can implement these real-time data updates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fetching Real-time Data from the Stock Market Data API<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, you need to set up a background service or a scheduled task within your .NET Core application that periodically calls the stock market data API to fetch the latest stock data. This could be done using a variety of approaches, such as background workers, timers, or third-party libraries like Hangfire.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a simplified example using a <code>Timer<\/code> in .NET Core to periodically fetch stock data:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-keyword\">using<\/span> System;\n<span class=\"hljs-keyword\">using<\/span> System.Threading;\n<span class=\"hljs-keyword\">using<\/span> System.Threading.Tasks;\n<span class=\"hljs-keyword\">using<\/span> Microsoft.AspNetCore.SignalR;\n<span class=\"hljs-keyword\">using<\/span> Microsoft.Extensions.Hosting;\n\n<span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">StockDataBackgroundService<\/span> : <span class=\"hljs-title\">BackgroundService<\/span>\n{\n    <span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">readonly<\/span> IHubContext&lt;StockTickerHub&gt; _hubContext;\n    <span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">readonly<\/span> StockDataService _stockDataService;\n    <span class=\"hljs-keyword\">private<\/span> Timer _timer;\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-title\">StockDataBackgroundService<\/span>(<span class=\"hljs-params\">IHubContext&lt;StockTickerHub&gt; hubContext, StockDataService stockDataService<\/span>)<\/span>\n    {\n        _hubContext = hubContext;\n        _stockDataService = stockDataService;\n    }\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">protected<\/span> <span class=\"hljs-keyword\">override<\/span> Task <span class=\"hljs-title\">ExecuteAsync<\/span>(<span class=\"hljs-params\">CancellationToken stoppingToken<\/span>)<\/span>\n    {\n        <span class=\"hljs-comment\">\/\/ Set the timer to fetch stock data every minute<\/span>\n        _timer = <span class=\"hljs-keyword\">new<\/span> Timer(DoWork, <span class=\"hljs-literal\">null<\/span>, TimeSpan.Zero, TimeSpan.FromMinutes(<span class=\"hljs-number\">1<\/span>));\n        <span class=\"hljs-keyword\">return<\/span> Task.CompletedTask;\n    }\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-keyword\">void<\/span> <span class=\"hljs-title\">DoWork<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">object<\/span> state<\/span>)<\/span>\n    {\n        <span class=\"hljs-keyword\">var<\/span> stockSymbols = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-keyword\">string<\/span>&#91;] { <span class=\"hljs-string\">\"AAPL\"<\/span>, <span class=\"hljs-string\">\"GOOGL\"<\/span>, <span class=\"hljs-string\">\"MSFT\"<\/span> }; <span class=\"hljs-comment\">\/\/ Example stock symbols<\/span>\n\n        <span class=\"hljs-keyword\">foreach<\/span> (<span class=\"hljs-keyword\">var<\/span> symbol <span class=\"hljs-keyword\">in<\/span> stockSymbols)\n        {\n            <span class=\"hljs-keyword\">var<\/span> stockData = <span class=\"hljs-keyword\">await<\/span> _stockDataService.GetRealTimeStockData(symbol);\n            <span class=\"hljs-comment\">\/\/ Broadcast the stock data to all connected clients<\/span>\n            <span class=\"hljs-keyword\">await<\/span> _hubContext.Clients.All.SendAsync(<span class=\"hljs-string\">\"ReceiveMessage\"<\/span>, stockData);\n        }\n    }\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">override<\/span> Task <span class=\"hljs-title\">StopAsync<\/span>(<span class=\"hljs-params\">CancellationToken stoppingToken<\/span>)<\/span>\n    {\n        _timer?.Change(Timeout.Infinite, <span class=\"hljs-number\">0<\/span>);\n        <span class=\"hljs-keyword\">return<\/span> Task.CompletedTask;\n    }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In this example, <code>StockDataBackgroundService<\/code> is a background service that fetches stock data for predefined symbols every minute and broadcasts the data to all connected clients.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Broadcasting Stock Data Updates to Connected Clients with SignalR<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The key part of broadcasting updates is done with the line:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-keyword\">await<\/span> _hubContext.Clients.All.SendAsync(<span class=\"hljs-string\">\"ReceiveMessage\"<\/span>, stockData);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">This line sends the fetched stock data to all clients connected to the <code>StockTickerHub<\/code>, calling the <code>ReceiveMessage<\/code> method on the client-side which you&#8217;ve set up to handle incoming data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Registering the Background Service<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To make the background service work, you need to register it in your <code>Startup.cs<\/code> file:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">void<\/span> <span class=\"hljs-title\">ConfigureServices<\/span>(<span class=\"hljs-params\">IServiceCollection services<\/span>)<\/span>\n{\n    services.AddHostedService&lt;StockDataBackgroundService&gt;();\n    <span class=\"hljs-comment\">\/\/ Other service registrations<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">This setup completes the real-time data update mechanism. The server periodically fetches the latest stock prices and broadcasts these updates to all connected clients via SignalR. On the client-side, users will see the stock prices update in real-time without needing to refresh their browsers, providing a dynamic and engaging user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing the Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Testing is a critical part of developing a reliable and robust application. For our real-time stock ticker application, we need to ensure both the backend logic and the real-time data updates work as expected. This involves unit testing the backend components and functional testing to verify the real-time data updates are correctly pushed to clients. Here\u2019s how you can approach testing for your application.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Unit Testing for the Backend<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Unit testing involves testing individual parts of the application&#8217;s codebase, typically methods or classes, in isolation from external dependencies. For the backend of our stock ticker application, this might include testing the logic for fetching stock data, handling API errors, and formatting data before sending it to clients.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Testing the Stock Data Fetching Service<\/strong>: Suppose you have a service <code>StockDataService<\/code> that fetches data from an external API. You should test this service to ensure it correctly handles successful responses, errors, and unexpected data formats.Example using xUnit and Moq for mocking:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"C#\" data-shcb-language-slug=\"cs\"><span><code class=\"hljs language-cs\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">StockDataServiceTests<\/span>\n{\n    &#91;<span class=\"hljs-meta\">Fact<\/span>]\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-keyword\">async<\/span> Task <span class=\"hljs-title\">GetRealTimeStockData_ReturnsStockData_OnSuccess<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>\n    {\n        <span class=\"hljs-comment\">\/\/ Arrange<\/span>\n        <span class=\"hljs-keyword\">var<\/span> mockHttpClient = <span class=\"hljs-keyword\">new<\/span> Mock&lt;HttpClient&gt;();\n        <span class=\"hljs-comment\">\/\/ Setup mockHttpClient to return a successful response<\/span>\n        <span class=\"hljs-comment\">\/\/ ...<\/span>\n\n        <span class=\"hljs-keyword\">var<\/span> service = <span class=\"hljs-keyword\">new<\/span> StockDataService(mockHttpClient.Object);\n\n        <span class=\"hljs-comment\">\/\/ Act<\/span>\n        <span class=\"hljs-keyword\">var<\/span> result = <span class=\"hljs-keyword\">await<\/span> service.GetRealTimeStockData(<span class=\"hljs-string\">\"AAPL\"<\/span>);\n\n        <span class=\"hljs-comment\">\/\/ Assert<\/span>\n        Assert.NotNull(result);\n        <span class=\"hljs-comment\">\/\/ Additional assertions to verify the data is correctly parsed<\/span>\n    }\n\n    <span class=\"hljs-comment\">\/\/ Tests for handling errors and unexpected data formats...<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">C#<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">cs<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><strong>Testing the SignalR Hub<\/strong>.Testing SignalR hubs involves ensuring that your hub methods correctly handle incoming messages and broadcast updates as expected. Since SignalR is heavily dependent on external connections, you might focus on testing the logic within your hub methods rather than the SignalR infrastructure itself.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Functional Testing for Real-time Data Updates<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Functional testing involves testing the application&#8217;s functionality from an end-user perspective. For real-time data updates, this means verifying that stock updates fetched by the server are correctly pushed to the client UI in real-time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>End-to-End Testing with Selenium or Playwright<\/strong>: You can use tools like Selenium or Playwright to simulate user interactions with the browser and verify that stock data updates are reflected in the UI without manual page refreshes.Example using Playwright:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Example using Playwright (JavaScript)<\/span>\n<span class=\"hljs-keyword\">const<\/span> { chromium } = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'playwright'<\/span>);\n\n<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-keyword\">async<\/span> (<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> browser = <span class=\"hljs-keyword\">await<\/span> chromium.launch();\n    <span class=\"hljs-keyword\">const<\/span> page = <span class=\"hljs-keyword\">await<\/span> browser.newPage();\n    <span class=\"hljs-keyword\">await<\/span> page.goto(<span class=\"hljs-string\">'http:\/\/localhost:5000'<\/span>); <span class=\"hljs-comment\">\/\/ URL of your stock ticker application<\/span>\n\n    <span class=\"hljs-comment\">\/\/ Wait for the stock data to be updated in the UI<\/span>\n    <span class=\"hljs-keyword\">await<\/span> page.waitForSelector(<span class=\"hljs-string\">'#stock-price-AAPL'<\/span>, { <span class=\"hljs-attr\">timeout<\/span>: <span class=\"hljs-number\">60000<\/span> });\n\n    <span class=\"hljs-comment\">\/\/ Verify the stock price is displayed<\/span>\n    <span class=\"hljs-keyword\">const<\/span> price = <span class=\"hljs-keyword\">await<\/span> page.$<span class=\"hljs-built_in\">eval<\/span>(<span class=\"hljs-string\">'#stock-price-AAPL'<\/span>, el =&gt; el.textContent);\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Price: <span class=\"hljs-subst\">${price}<\/span>`<\/span>);\n    <span class=\"hljs-comment\">\/\/ Add assertions to verify the price matches expected patterns or values<\/span>\n\n    <span class=\"hljs-keyword\">await<\/span> browser.close();\n})();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><strong>SignalR Testing<\/strong>: For testing SignalR real-time updates, you might focus on integration testing to ensure the client and server can establish a connection and communicate as expected. This can be part of your end-to-end tests where you verify that the client receives and displays real-time updates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Deployment<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Deploying your real-time stock ticker application involves several key steps to ensure it&#8217;s accessible, secure, and scalable. Whether you choose Azure, AWS, or another cloud service, the general process involves preparing your application for deployment, uploading it to the cloud, and configuring it for public access. Here\u2019s a guide to help you through these steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Preparing the Application for Deployment<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Optimize Your Application<\/strong>: Before deployment, ensure your application is optimized for performance and security. This includes minimizing and bundling resources (CSS, JavaScript), optimizing images, and ensuring your code is clean and well-documented.<\/li>\n\n\n\n<li><strong>Environment-Specific Configuration<\/strong>: Use environment variables for configuration settings that differ between development and production, such as database connections and API keys. This approach keeps sensitive information out of your codebase.<\/li>\n\n\n\n<li><strong>Database Migration<\/strong>: If your application uses a database, ensure you have a strategy for migrating your database schema and data to the production environment. Tools like Entity Framework Core allow for easy migrations with commands like <code>Update-Database<\/code>.<\/li>\n\n\n\n<li><strong>Dependency Check<\/strong>: Ensure all dependencies are up to date and compatible with the production environment. Remove any unnecessary packages or libraries to reduce the application&#8217;s footprint.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Deploying to a Cloud Service<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a cloud service provider that best fits your needs. Azure and AWS are popular choices, each offering services that support deploying .NET Core applications and real-time functionality with SignalR or similar technologies.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Azure<\/strong>:\n<ol class=\"wp-block-list\">\n<li><strong>App Service<\/strong>: Azure App Service is an HTTP-based service for hosting web applications. Deploying to Azure App Service can be done directly from Visual Studio or by using Azure CLI.<\/li>\n\n\n\n<li><strong>Azure SignalR Service<\/strong>: For applications using SignalR, integrating Azure SignalR Service can help offload the real-time connection management and scaling.<\/li>\n\n\n\n<li><strong>Azure DevOps<\/strong>: Use Azure DevOps for continuous integration and deployment (CI\/CD), automating your build and deployment process.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>AWS<\/strong>:\n<ol class=\"wp-block-list\">\n<li><strong>Elastic Beanstalk<\/strong>: AWS Elastic Beanstalk simplifies the deployment and scaling of applications. You can deploy .NET applications using the AWS Management Console, Elastic Beanstalk CLI, or Visual Studio AWS Toolkit.<\/li>\n\n\n\n<li><strong>Amazon RDS<\/strong>: For database needs, Amazon RDS can be used to set up, operate, and scale a relational database in the cloud.<\/li>\n\n\n\n<li><strong>AWS CodePipeline<\/strong>: Implement CI\/CD pipelines with AWS CodePipeline to automate your deployment process.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Ensuring Security and Scalability in Deployment<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Security<\/strong>:\n<ol class=\"wp-block-list\">\n<li><strong>SSL\/TLS<\/strong>: Ensure your application is served over HTTPS to encrypt data in transit. Both Azure and AWS offer easy ways to set up SSL\/TLS certificates.<\/li>\n\n\n\n<li><strong>Firewalls and Network Security Groups<\/strong>: Configure firewalls and network security groups to limit access to your application and database.<\/li>\n\n\n\n<li><strong>Identity and Access Management (IAM)<\/strong>: Use IAM roles and policies to control access to your AWS or Azure resources securely.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>Scalability<\/strong>:\n<ol class=\"wp-block-list\">\n<li><strong>Load Balancing<\/strong>: Implement load balancing to distribute traffic across multiple instances of your application, improving performance and availability.<\/li>\n\n\n\n<li><strong>Auto-scaling<\/strong>: Both Azure and AWS offer auto-scaling features that automatically adjust the number of instances in response to traffic demands.<\/li>\n\n\n\n<li><strong>Caching and CDN<\/strong>: Use caching and Content Delivery Networks (CDN) to reduce load times and decrease the load on your servers.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting Common Issues<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Deploying and maintaining a real-time stock ticker application can sometimes lead to encountering issues that require prompt and effective troubleshooting. Here are strategies for addressing some common challenges, including debugging SignalR connection issues, handling API limit errors gracefully, and optimizing application performance for real-time updates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Debugging SignalR Connection Issues<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">SignalR connection problems can stem from various sources, ranging from client-side issues to server configurations. Here\u2019s how to approach troubleshooting:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Check Client-Side Logs<\/strong>: SignalR client libraries offer logging mechanisms that can provide insights into what&#8217;s happening during the connection process. Ensure logging is enabled and review the logs for errors or warnings.<\/li>\n\n\n\n<li><strong>Enable Server-Side Logging<\/strong>: Similar to the client side, enabling logging on the server can help identify issues during the connection lifecycle. Look for exceptions or error messages that might indicate what&#8217;s going wrong.<\/li>\n\n\n\n<li><strong>Review Configuration and Compatibility<\/strong>: Ensure that your SignalR server and client versions are compatible and that your server is correctly configured to support websockets or other transport methods SignalR might fall back to.<\/li>\n\n\n\n<li><strong>Firewall and Network Configuration<\/strong>: Check if firewalls, network security groups, or other network configurations are blocking or interfering with SignalR traffic, especially websocket connections.<\/li>\n\n\n\n<li><strong>Cross-Origin Resource Sharing (CORS)<\/strong>: If your client and server are hosted on different domains, ensure CORS is properly configured to allow SignalR communication.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Handling API Limit Errors Gracefully<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">APIs often have rate limits to prevent abuse and overload. Exceeding these limits can result in errors or data fetch failures. Here\u2019s how to handle these errors gracefully:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Implement Retry Logic with Exponential Backoff<\/strong>: When you hit rate limits, implement a retry mechanism that waits for a period before trying again, ideally with an exponential backoff strategy to reduce the load on the API.<\/li>\n\n\n\n<li><strong>Cache Responses<\/strong>: To minimize the number of API calls, cache responses where possible. This can be particularly effective for data that doesn&#8217;t change frequently.<\/li>\n\n\n\n<li><strong>Monitor and Adjust Request Rates<\/strong>: Keep an eye on your application\u2019s request rates and adjust them based on the API\u2019s rate limits. Consider spreading requests more evenly over time if you\u2019re approaching the limit.<\/li>\n\n\n\n<li><strong>Use Webhooks if Available<\/strong>: Some APIs offer webhooks for pushing updates to your application instead of polling the API frequently. This can significantly reduce the number of requests made.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Optimizing Application Performance for Real-Time Updates<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ensuring smooth performance in a real-time application involves optimizing both the frontend and backend. Here are tips to improve performance:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Minimize Data Payloads<\/strong>: Send only the necessary data over the network. For stock updates, this might mean sending only the changed data rather than the full stock information each time.<\/li>\n\n\n\n<li><strong>Use Websockets<\/strong>: SignalR uses WebSockets under the hood if available, which is more efficient than HTTP polling. Ensure your environment is configured to support WebSockets for the best performance.<\/li>\n\n\n\n<li><strong>Optimize Database Queries<\/strong>: Ensure that any database queries, especially those triggered by real-time updates, are optimized for performance. Use indexes appropriately, and avoid fetching more data than needed.<\/li>\n\n\n\n<li><strong>Scale Out<\/strong>: If performance issues stem from high load, consider scaling out your application by adding more server instances. SignalR supports scale-out scenarios through backplane configurations for Azure Service Bus, Redis, or SQL Server.<\/li>\n\n\n\n<li><strong>Frontend Performance<\/strong>: On the client side, ensure that your UI updates efficiently. Batch DOM updates where possible and consider using virtualization for large lists or tables of data to reduce the rendering workload.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">By systematically addressing these common issues, you can enhance the reliability, performance, and user experience of your real-time stock ticker application, ensuring it serves your users well under various conditions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In stock trading, information is money, and the speed at which this information is received can be the difference between profit and loss. This application we&#8217;re going to be building will serve as a window into the pulse of the market, providing you with up-to-the-minute stock prices, which is crucial for making informed trading decisions. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[8,4],"tags":[],"class_list":["post-1773","post","type-post","status-publish","format-standard","category-csharp","category-programming-languages","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Build a Real-time Stock Ticker Application with C#<\/title>\n<meta name=\"description\" content=\"In stock trading, information is money, and the speed at which this information is received can be the difference between profit and loss.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Real-time Stock Ticker Application with C#\" \/>\n<meta property=\"og:description\" content=\"In stock trading, information is money, and the speed at which this information is received can be the difference between profit and loss.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-20T02:56:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-20T05:44:55+00:00\" \/>\n<meta name=\"author\" content=\"w3compadmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"w3compadmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/build-real-time-stock-ticker-application-csharp\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/build-real-time-stock-ticker-application-csharp\\\/\"},\"author\":{\"name\":\"w3compadmin\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\"},\"headline\":\"How to Build a Real-time Stock Ticker Application with C#\",\"datePublished\":\"2024-02-20T02:56:49+00:00\",\"dateModified\":\"2024-02-20T05:44:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/build-real-time-stock-ticker-application-csharp\\\/\"},\"wordCount\":5181,\"articleSection\":[\"C#\",\"Programming Languages\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/build-real-time-stock-ticker-application-csharp\\\/\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/build-real-time-stock-ticker-application-csharp\\\/\",\"name\":\"How to Build a Real-time Stock Ticker Application with C#\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#website\"},\"datePublished\":\"2024-02-20T02:56:49+00:00\",\"dateModified\":\"2024-02-20T05:44:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\"},\"description\":\"In stock trading, information is money, and the speed at which this information is received can be the difference between profit and loss.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/build-real-time-stock-ticker-application-csharp\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/build-real-time-stock-ticker-application-csharp\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/build-real-time-stock-ticker-application-csharp\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Articles Home\",\"item\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Programming Languages\",\"item\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/programming-languages\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Build a Real-time Stock Ticker Application with C#\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#website\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/\",\"name\":\"Developer Articles Hub\",\"description\":\"\",\"alternateName\":\"Developer Articles\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\",\"name\":\"w3compadmin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1784386264\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1784386264\",\"contentUrl\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1784386264\",\"caption\":\"w3compadmin\"},\"sameAs\":[\"http:\\\/\\\/w3computing.com\\\/articles\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build a Real-time Stock Ticker Application with C#","description":"In stock trading, information is money, and the speed at which this information is received can be the difference between profit and loss.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Real-time Stock Ticker Application with C#","og_description":"In stock trading, information is money, and the speed at which this information is received can be the difference between profit and loss.","og_url":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/","article_published_time":"2024-02-20T02:56:49+00:00","article_modified_time":"2024-02-20T05:44:55+00:00","author":"w3compadmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"w3compadmin","Est. reading time":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/#article","isPartOf":{"@id":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/"},"author":{"name":"w3compadmin","@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561"},"headline":"How to Build a Real-time Stock Ticker Application with C#","datePublished":"2024-02-20T02:56:49+00:00","dateModified":"2024-02-20T05:44:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/"},"wordCount":5181,"articleSection":["C#","Programming Languages"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/","url":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/","name":"How to Build a Real-time Stock Ticker Application with C#","isPartOf":{"@id":"https:\/\/www.w3computing.com\/articles\/#website"},"datePublished":"2024-02-20T02:56:49+00:00","dateModified":"2024-02-20T05:44:55+00:00","author":{"@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561"},"description":"In stock trading, information is money, and the speed at which this information is received can be the difference between profit and loss.","breadcrumb":{"@id":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.w3computing.com\/articles\/build-real-time-stock-ticker-application-csharp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Articles Home","item":"https:\/\/www.w3computing.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Programming Languages","item":"https:\/\/www.w3computing.com\/articles\/programming-languages\/"},{"@type":"ListItem","position":3,"name":"How to Build a Real-time Stock Ticker Application with C#"}]},{"@type":"WebSite","@id":"https:\/\/www.w3computing.com\/articles\/#website","url":"https:\/\/www.w3computing.com\/articles\/","name":"Developer Articles Hub","description":"","alternateName":"Developer Articles","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.w3computing.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561","name":"w3compadmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1784386264","url":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1784386264","contentUrl":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1784386264","caption":"w3compadmin"},"sameAs":["http:\/\/w3computing.com\/articles"]}]}},"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"w3compadmin","author_link":"https:\/\/www.w3computing.com\/articles\/author\/w3compadmin\/"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/1773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/comments?post=1773"}],"version-history":[{"count":9,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/1773\/revisions"}],"predecessor-version":[{"id":1785,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/1773\/revisions\/1785"}],"wp:attachment":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/media?parent=1773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/categories?post=1773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/tags?post=1773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}