Skip to main content

Real-Time Data Transfer with Web Sockets and SignalR in .NET Core

 In dynamic web applications, real-time data transfer has become a crucial aspect of providing a responsive and interactive user experience. Web Socket technology, along with frameworks like SignalR in .NET Core, enables bidirectional communication between clients and servers, allowing seamless data exchange.

In this article, we'll explore how to implement Web Socket functionality using SignalR in a .NET Core application to retrieve data from a concurrent dictionary and push it to clients in real time.

Understanding Web Sockets and SignalR

Web Socket is a communication protocol that provides full-duplex communication channels over a single TCP connection, allowing for low-latency, bidirectional communication between clients and servers. It enables real-time data transfer without the overhead of HTTP polling.

SignalR is a high-level library built on top of Web Socket that simplifies real-time web functionality implementation in .NET applications. It abstracts away the complexities of managing connections and allows developers to focus on building real-time features.

Setting Up the Project

First, ensure you have the .NET Core SDK installed on your system. You can create a new .NET Core Web API project using the following command:

dotnet new webapi -n WebSocketSignalRDemo

Next, navigate to the project directory:

cd WebSocketSignalRDemo

Install the required SignalR package:

dotnet add package Microsoft.AspNetCore.SignalR

Implementing WebSocket Functionality

  1. Create a Concurrent Dictionary: In this example, let's assume we have a concurrent dictionary where real-time data updates occur. For demonstration purposes, we'll simulate this with a simple dictionary containing stock prices.
  2. Set Up SignalR Hub: Create a SignalR hub that will handle client connections and data transmission. Add methods to retrieve data from the concurrent dictionary and send it to clients.
  3. Configure SignalR in Startup: Register SignalR services and endpoints in the Startup.cs file.
  4. Client-Side Integration: Implement WebSocket client logic to receive real-time updates from the server.

Example Code:

Here's a simplified implementation of the above steps:

// Concurrent Dictionary Simulation (Replace with actual data source)

ConcurrentDictionary<string, decimal> stockPrices = new ConcurrentDictionary<string, decimal>();


// SignalR Hub

public class StockTickerHub : Hub

{

    public async Task GetLatestStockPrices()

    {

        while (true)

        {

            // Simulated data update

            foreach (var kvp in stockPrices)

            {

                await Clients.All.SendAsync("UpdateStockPrice", kvp.Key, kvp.Value);

            }

            await Task.Delay(1000); // Simulated delay

        }

    }

}


// Startup.cs

public void ConfigureServices(IServiceCollection services)

{

    services.AddSignalR();

}


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{

    if (env.IsDevelopment())

    {

        app.UseDeveloperExceptionPage();

    }

    app.UseRouting();

    app.UseEndpoints(endpoints =>

    {

        endpoints.MapControllers();

        endpoints.MapHub<StockTickerHub>("/stockTickerHub");

    });

}


// Client-Side (JavaScript)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Stock Ticker</title>

</head>

<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.7/signalr.min.js"></script>

    <script>

        const connection = new signalR.HubConnectionBuilder()

            .withUrl("/stockTickerHub")

            .build();

        connection.on("UpdateStockPrice", (symbol, price) => {

            const stockList = document.getElementById("stockList");

            const listItem = document.createElement("li");

            listItem.textContent = `${symbol}: $${price}`;

            stockList.appendChild(listItem);

        });

        connection.start()

            .then(() => connection.invoke("GetLatestStockPrices"))

            .catch(err => console.error(err));

    </script>

</body>

</html>

Labels:
Location: Canada

Comments

Post a Comment

Popular posts from this blog

How To See Logs Of Dropped Tables From The Database in MS SQL.

Here, I will explain you how you can see logs of users. Step 1 : First, create a new database with name "test". Step 2 : Create a new table. Step 3 : Now, go and drop the table by running the following command. Step 4 : Now, select your database under Object Explorer and go to Reports >> Standard Reports >> Schema Changes History. Step 5 : You will then see the schema change history. The report will show you who has dropped this table. Finally, you can locate the user activity with the help of log.
Post a Comment
Read more

How To Deploy .net Core Application On Linux

Here, I can explain steps to deploy .net core application on linux machine. Step 1 - Publish your .net Core application: First, create a .net core application on VS; you can make an MVC project or Web API project and if you already have an existing project, then open it. Right Click on your project Click on publish Now create a new publish profile, and browse the folder where you want to publish your project dll Click on publish so it will create your dll in the folder Step 2 - Install required .net Module on Linux: Now we have our web application dll and now we need to host it on the Linux environment. First, we need to understand how the deployment works in Linux. .Net applications run on Kestrel servers and we run Apache or Nginx server in Linux environments, which acts as a proxy server and handles the traffic from outside the machine and redirects it to the Kestrel server so we will have Apache or Nginx server as the middle layer. In this article, we will use Apache as a proxy ser
Post a Comment
Read more

List Of Commonly Used Angular Commands

1) To get the npm version,    npm -v 2) To get the node version,    node -v 3) To get the Angular version,    ng v  4) To get the Jasmine version,    jasmine -v  5) To get the Karma version,    karma --version  6) To install Angular CLI,    npm install @angular/cli -g   npm install @angular/cli 7) To install the next version of Angular CLI, v   npm install @angular/cli@next  8) To get help in the terminal,    ng help 9) To create a new project in Angular,    ng new project-name  10) To skip external dependencies while creating a new project,    ng new project-name --skip-install  11) To run the Angular project,   ng serve (or) npm start (or) ng serve --force  12) Dry Run,   ng new project-name --dry-run 13) To create a new component in the Angular Project,   ng generate component component-
Post a Comment
Read more