Real-Time Server-Client Communication with SignalR

SignalR enables servers to push real-time updates to connected clients. Multiple clients connect to a server, where one client's action triggers server-side events that broadcast to all connected cliants.

.NET Framework Implementation

Server Configuration

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.MapSignalR();
    }
}

Hub Implementation

public class CommunicationHub : Hub
{
    public void BroadcastMessage(string messageContent)
    {
        Clients.All.ReceiveMessage(messageContent);
    }
}

Client-Side Implementation (JavaScript)

<script src="jquery.js"></script>
<script src="jquery.signalR.js"></script>
<script src="/signalr/hubs"></script>

<script>
const messageHub = $.connection.communicationHub;

messageHub.client.receiveMessage = function(content) {
    alert(content);
};

$.connection.hub.start().done(function() {
    messageHub.server.broadcastMessage("Sample content");
});
</script>

Broadcast Methods

• Clients.All: Broadcast to all clients
• Clients.Caller: Target only the initiating client
• Clients.Others: Broadcast to all except initiatro
• Clients.Client(connectionId): Target specific client
• Clients.Group(groupId): Broadcast to group members

.NET Core Implementation

Startup Configuration

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app)
{
    app.UseSignalR(routes => 
    {
        routes.MapHub<CommunicationHub>("/messageHub");
    });
}

Core Hub Implementation

public class CommunicationHub : Hub
{
    public async Task BroadcastMessage(string messageContent)
    {
        await Clients.All.InvokeAsync("ReceiveMessage", messageContent);
    }
}

Client-Side (Core)

<script src="signalr-client.js"></script>

<script>
const connection = new signalR.HubConnection("/messageHub");
connection.start();

connection.on("ReceiveMessage", content => {
    document.querySelector("ul").innerHTML += `<li>${content}</li>`;
});

document.getElementById("send").addEventListener("click", () => {
    connection.invoke("BroadcastMessage", "New content");
});
</script>