Build a Real-Time Chat App with SignalR and ASP.NET Core

Introduction

Capstone #6: ShopNest Teams Chat — Identity auth, DMs, channels, message history, online status, typing indicator, read receipts, file sharing, Bootstrap UI.

After this article you will

• ChatHub with groups per channel
• Private messages user-to-user
• Persist messages in SQL Server
• Typing + read receipts + presence
• File upload in chat

Prerequisites

• Article 69 — Clean Architecture REST API
• Articles 1–64 ShopNest foundations (MVC, EF Core, API, auth, deploy)

Architecture & design

public class ChatHub : Hub
{
    public async Task SendDirectMessage(string toUserId, string text) { ... }
    public async Task SendChannelMessage(string channelId, string text) { ... }
    public async Task Typing(string channelId) =>
        Clients.OthersInGroup(channelId).SendAsync("UserTyping", Context.UserIdentifier);
}

Hands-on build guide — ShopNest Team Collaboration Chat

1. Entities: Channel, ChannelMember, Message, DirectMessage.
2. Razor Pages chat UI + SignalR JS client.
3. OnConnectedAsync sets user online in DB.
4. Read receipt: mark Message.ReadAt when visible.
5. File share: upload to blob; message contains URL.

Common pitfalls

• Clients.All for channel message — leaks to wrong users; use Groups.
• No message pagination — load last 50 on scroll up.

Interview & portfolio questions

Q: Scale chat?
A: Redis backplane (Article 43) + sticky sessions or Azure SignalR Service.

Summary

• Real-time capstone using SignalR + Identity
• DM + channels mirror Slack/Teams basics
• Portfolio demo impresses in live coding rounds

Previous: Clean Architecture REST API
Next: Blazor Complete Guide

FAQ