Asp.Net Core Signalr Integration Complete Guide

Objective:

To create a basic real-time chat application using ASP.NET Core SignalR.

Step 1: Create a New ASP.NET Core Web Application

1. Launch Visual Studio (or your preferred IDE).
2. Select "Create a new project".
3. Choose the "ASP.NET Core Web App (Model-View-Controller)" template, then click "Next".
4. Name your project, and choose a location.
5. Select .NET 6.0 (or later) as the target framework and click "Create".

Step 2: Install the SignalR NuGet Package

Once the project is created, install the SignalR package via the NuGet Package Manager.

1. In the Solution Explorer, right-click on your project name and select "Manage NuGet Packages...".
2. Navigate to the "Browse" tab and search for "Microsoft.AspNetCore.SignalR".
3. Select the package and click "Install".

Step 3: Set Up SignalR Hub

A Hub in SignalR is a class that allows you to define methods that the client can call on the server and methods on the server that can be called from the clients.

Add a new class file for the Hub:

1. Right-click on the Controllers folder and select "Add -> Class..."
2. Name the class ChatHub.cs.

// ChatHub.cs
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace YourProjectName.Controllers
{
    public class ChatHub : Hub
    {
        // Method to send messages to all connected clients
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Step 4: Configure SignalR in the Startup (Program) Class

In Program.cs (.NET 6+), add the necessary configurations to use SignalR.

// Program.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
// Add SignalR Service
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

// Map the Hub to a specific endpoint (route)
app.MapHub<ChatHub>("/chatHub");

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Step 5: Create the Client Interface (HTML + JavaScript)

Create a simple webpage that will act as our chat interface.

Update Index.cshtml in the Views/Home folder:

Ensure you import the required SignalR libraries.

<!-- Views/Home/Index.cshtml -->
@{
    ViewData["Title"] = "Real-Time Chat";
}

<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-6">
            User: <input type="text" id="userInput" />
        </div>
        <div class="col-6">
            Message: <input type="text" id="messageInput" />
        </div>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-12">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>

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

Step 6: Implement Client-Side JavaScript Logic

Add a script file named chat.js inside the wwwroot/js folder. Here's where you'll wire up SignalR on the client side.

// wwwroot/js/chat.js
"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

// Method to display messages received from the hub
connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encUser = user.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var li = document.createElement("li");
    li.textContent = `${encUser}: ${msg}`;
    document.getElementById("messagesList").appendChild(li);
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

// Start the connection
connection.start().catch(function (err) {
    return console.error(err.toString());
});

Step 7: Run and Test Your Application

Now you're ready to test your real-time chat application.

1. Press F5 or click the run button in Visual Studio to start the application.
2. Open your browser to navigate to https://localhost:[PortNumber]/home/index.
3. Open another browser window or tab and go to the same URL.
4. Enter different usernames in each browser window and send messages to see them appear in real-time in both windows.

Summary of Key Points:

1. Create an ASP.NET Core MVC project.
2. Add the SignalR package through NuGet.
3. Define a Hub class by inheriting from Hub and defining methods.
4. Configure SignalR in Program.cs and map it to a route.
5. Create an HTML view that includes input fields and a button.
6. Write JavaScript to connect to the SignalR Hub, send and receive messages.