SignalR In .NET 6 Using NCache As Backplane

• AppSettings.json

Including NCache server settings:

"NCacheConfiguration": {
    "CacheName": "demoLocasCache",
    "ApplicationID": "chatApplication",
    "UserID": "your-username",
    "Password": "your-password"
}

Program.cs

Setting up SignalR with NCache and mapping the Hub.

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;
using System.Configuration;
using Alachisoft.NCache.AspNetCore.SignalR;
using NCacheSignalR.NCacheHelper;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.Configure < NCacheConfiguration > (builder.Configuration.GetSection("NCacheConfiguration"));
builder.Services.AddSignalR().AddNCache(ncacheOptions => {
    ncacheOptions.CacheName = builder.Configuration["NCacheConfiguration:CacheName"];
    ncacheOptions.ApplicationID = builder.Configuration["NCacheConfiguration:ApplicationID"];
    // In case of enabled cache security specify the security credentials
    //ncacheOptions.UserId = builder.Configuration["NCacheConfiguration:UserID"];
    //ncacheOptions.Password = builder.Configuration["NCacheConfiguration:Password"];
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment()) {
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.MapHub < SampleHub > ("/messages");
app.Run();

Core Objects

SampleHub.cs

SignalR Message Hub, SignalR's core class with the methods to send information to the NCache's Server.

public class SampleHub: Hub {
    public Task SendMessageToAll(string message) {
        return Clients.All.SendAsync("ReceiveMessage", message);
    }
    public Task SendMessageToCaller(string message) {
        return Clients.Caller.SendAsync("ReceiveMessage", message);
    }
    public Task SendMessageToUser(string connectionId, string message) {
        return Clients.Client(connectionId).SendAsync("ReceiveMessage", message);
    }
    public Task JoinGroup(string group) {
        return Groups.AddToGroupAsync(Context.ConnectionId, group);
    }
    public Task SendMessageToGroup(string group, string message) {
        return Clients.Group(group).SendAsync("ReceiveMessage", message);
    }
    public override async Task OnConnectedAsync() {
        await Clients.All.SendAsync("UserConnected", Context.ConnectionId);
        await base.OnConnectedAsync();
    }
    public override async Task OnDisconnectedAsync(Exception ex) {
        await Clients.All.SendAsync("UserDisconnected", Context.ConnectionId);
        await base.OnDisconnectedAsync(ex);
    }
}

Index.cshtml

Page updated in order to integrate with SignalR's message hub.

@page
<div class="container">
    <div class="row"> </div>

    <div class="row">
        <div class="col-6">
            <input type="button" id="joinGroup" value="Join Private Group" />
        </div>
    </div>

    <div class="row">

        <div class="col-2">Send message to</div>
        <div class="col-4">
            <select id="group">
                <option value="All">Everyone</option>
                <option value="Myself">Myself</option>
                <option value="PrivateGroup">Private Group</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-2">User</div>
        <div class="col-4"><input type="text" id="userInput" /></div>
    </div>
    <div class="row">
        <div class="col-2">Message</div>
        <div class="col-4"><input type="text" id="message" /></div>
    </div>
    <div class="row"> </div>
    <div class="row">
        <div class="col-6">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <hr />
    </div>
</div>
<div class="row">
    <div class="col-6">

    </div>
</div>

<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Chat.js

Javascript class is used to integrate SignalR's Javascript library.

"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/messages").build();
connection.on("ReceiveMessage", function(message) {
    var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
    var div = document.createElement("div");
    div.innerHTML = msg + "<hr/>";
    document.getElementById("messages").appendChild(div);
});
connection.on("UserConnected", function(connectionId) {
    var groupElement = document.getElementById("group");
    var option = document.createElement("option");
    option.text = connectionId;
    option.value = connectionId;
    groupElement.add(option);
});
connection.on("UserDisconnected", function(connectionId) {
    var groupElement = document.getElementById("group");
    for (var i = 0; i < groupElement.length; i++) {
        if (groupElement.options[i].value == connectionId) {
            groupElement.remove(i);
        }
    }
});
connection.start().catch(function(err) {
    return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function(event) {
    var message = document.getElementById("message").value;
    var user = document.getElementById("userInput").value;
    var groupElement = document.getElementById("group");
    var groupValue = groupElement.options[groupElement.selectedIndex].value;
    var finalMessage = `${user} says ${message}`;
    if (groupValue === "All" || groupValue === "Myself") {
        var method = groupValue === "All" ? "SendMessageToAll" : "SendMessageToCaller";
        connection.invoke(method, finalMessage).catch(function(err) {
            return console.error(err.toString());
        });
    } else if (groupValue === "PrivateGroup") {
        connection.invoke("SendMessageToGroup", "PrivateGroup", finalMessage).catch(function(err) {
            return console.error(err.toString());
        });
    } else {
        connection.invoke("SendMessageToUser", groupValue, finalMessage).catch(function(err) {
            return console.error(err.toString());
        });
    }
    event.preventDefault();
});
document.getElementById("joinGroup").addEventListener("click", function(event) {
    connection.invoke("JoinGroup", "PrivateGroup").catch(function(err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

Results

Console with events:

Client #1 sending messages to everyone:

Client #1 sending message to Client #3:

Client #2 sending a message to himself:

Client #1 and Client #3 join the private group. Client #3 sends a message to the private group.

Congratulations! You have successfully created your first SignalR project in .NET 6 using NCache as a backplane.

• Full Project on GitHub.

External References

• NCache Official Documentation
• Microsoft SignalR Official Documentation