Build .NET Chat Applications with SignalR: Utilize WebSocket Technology

In this guide, we'll explore how to build real-time chat applications using SignalR, a powerful library for .NET that utilizes WebSocket technology. We'll cover the key features and benefits of SignalR and provide a step-by-step tutorial to create a simple chat application.

What is SignalR?

SignalR is a library that simplifies the process of adding real-time web functionality to applications. Real-time web functionality allows server-side code to push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data.

SignalR provides an abstraction over WebSocket, which is a protocol that enables two-way communication between a client and a server over a long-lasting connection. This enables the development of high-performance, real-time applications such as chat, notifications, and live updates without the hassle of managing WebSocket connections directly.

Key Features of SignalR

Real-time communication: SignalR enables real-time communication between the server and the client, allowing updates to be pushed instantly.
Automatic connection management: SignalR simplifies the process of managing connections, ensuring that clients are connected and disconnected as needed.
Support for multiple platforms: SignalR can be used with various clients, including web applications, mobile apps, and desktop applications.
Scalability: SignalR can be scaled out to support a large number of clients using technologies like Redis or Azure SignalR Service.
Fallback mechanisms: SignalR automatically selects the best available transport mechanism (WebSocket, Server-Sent Events, Long Polling) based on the client and server capabilities.

Building a Simple Chat Application with SignalR

In this tutorial, we'll create a simple chat application using SignalR in a .NET Core application.

Prerequisites

.NET Core SDK (version 3.1 or later)
Visual Studio or Visual Studio Code

Step 1: Create a new .NET Core Web Application

Open Visual Studio or Visual Studio Code and create a new .NET Core Web Application with the "ASP.NET Core Web App" template. Name the project "SignalRChatApp".

Step 2: Install the SignalR NuGet package

Install the Microsoft.AspNetCore.SignalR NuGet package by running the following command in the terminal:

dotnet add package Microsoft.AspNetCore.SignalR

Step 3: Create a SignalR Hub

In the "Hubs" folder, create a new class called "ChatHub.cs" with the following code:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

Step 4: Configure SignalR in Startup.cs

In the "Startup.cs" file, add the following code to the ConfigureServices method:

services.AddSignalR();

And add the following code to the Configure method:

app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<ChatHub>("/chatHub");
});

Step 5: Create the Chat Client

In the "wwwroot" folder, create a new HTML file called "index.html" with the following code:

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Chat App</title>
    <style>
        /* Add your CSS styles here */
    </style>
</head>
<body>
    <div>
        <input type="text" id="userInput" placeholder="User" />
        <input type="text" id="messageInput" placeholder="Type your message" />
        <button id="sendButton">Send</button>
    </div>
    <hr />
    <ul id="messagesList"></ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.9/signalr.min.js"></script>
    <script>
        // Add your JavaScript code here
    </script>
</body>
</html>

In the <script> section, add the following JavaScript code to connect to the SignalR Hub and handle sending and receiving messages:

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

connection.on("ReceiveMessage", (user, message) => {
    const listItem = document.createElement("li");
    listItem.textContent = `${user}: ${message}`;
    document.getElementById("messagesList").appendChild(listItem);
});

connection.start().catch((err) => console.error(err.toString()));

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

Step 6: Run the Application

Run the application using dotnet run or by pressing "F5" in Visual Studio. Navigate to the application URL (e.g., https://localhost:5001) and test the chat functionality.

Conclusion

In this guide, we've explored how to build a simple real-time chat application using SignalR and WebSocket technology in .NET. SignalR simplifies the process of creating real-time applications by providing an abstraction over WebSocket, automatic connection management, and support for multiple platforms. With SignalR, you can easily create high-performance, real-time applications like chat, notifications, and live updates.