Build a Real-Time Chat Room with .NET Core & SignalR

#dotnetcore #signalr #realtime #programming

Adding real-time communication to your web apps is easier than you think with SignalR. In this quick guide, we’ll build a chat room using ASP.NET Core 8 and SignalR.

Prerequisites

.NET 8 SDK
Basic C# knowledge
A code editor (VS Code / Visual Studio)

Create Project

dotnet new webapp -n ChatRoomApp
cd ChatRoomApp
dotnet add package Microsoft.AspNetCore.SignalR

Create a Hub

Hubs/ChatHub.cs

using Microsoft.AspNetCore.SignalR;

namespace ChatRoomApp.Hubs;

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

Configure SignalR

Program.cs

using ChatRoomApp.Hubs;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();

var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapHub<ChatHub>("/chathub");
app.Run();

Build the Client

wwwroot/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
</head>
<body>
  <h2>Chat Room</h2>
  <input id="userInput" placeholder="Name" />
  <input id="messageInput" placeholder="Message" />
  <button onclick="sendMessage()">Send</button>
  <ul id="messagesList"></ul>

  <script>
    const connection = new signalR.HubConnectionBuilder()
      .withUrl("/chathub").build();

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

    connection.start();

    function sendMessage() {
      const user = userInput.value;
      const msg = messageInput.value;
      connection.invoke("SendMessage", user, msg);
    }
  </script>
</body>
</html>