--- title: "Implement SignalR for Chat Messages: A Step-by-Step Guide" description: "Whether you're building a chat application, live notification system, collaborative workspace, or customer support platform, users expect instant updates withou" author: "Ravi Vishwakarma" published: 2026-05-29 updated: 2026-05-30 canonical: https://answers.mindstick.com/blog/329/implement-signalr-for-chat-messages-a-step-by-step-guide category: "software" tags: ["software", "chatgpt"] reading_time: 5 minutes --- # Implement SignalR for Chat Messages: A Step-by-Step Guide ## Introduction Real-time communication has become an essential feature in modern [web applications](https://www.mindstick.com/blog/11464/improve-your-understanding-of-web-applications). Whether you're building a chat application, live [notification system](https://answers.mindstick.com/qa/99880/describe-the-android-notification-system-and-its-components), collaborative workspace, or [customer support](https://www.mindstick.com/articles/269529/step-by-step-instructions-to-enlist-customer-support-specialists) platform, users expect instant updates without refreshing the page. Microsoft SignalR simplifies real-time communication in [ASP.NET Core](https://www.mindstick.com/articles/326150/asp-dot-net-core-why-it-is-best-suited-for-banking-and-finance-sectors) applications by handling WebSocket connections and automatically falling back to other transport mechanisms when necessary. ![Implement SignalR for Chat Messages: A Step-by-Step Guide](https://answers.mindstick.com/blogs/74d4baf4-dec8-46d3-9668-0c45171f638b/images/aee63319-3d86-43f0-9123-870b5139e9c0.png) ## What is SignalR? SignalR is a library for ASP.NET that enables real-time web functionality. It allows the server to push updates to connected clients instantly. ### Key Features - Real-time communication - Automatic transport fallback - Bi-directional communication - Group messaging - [Connection management](https://www.mindstick.com/forum/160217/explain-the-best-practices-for-database-connection-management) - Strong integration with ASP.NET Core ### Common Use Cases - Chat applications - Live dashboards - Notifications - Multiplayer games - Collaborative editing tools ## Prerequisites Before starting, ensure you have: - .NET 8 SDK installed - [Visual Studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) 2022 or Visual Studio Code - Basic knowledge of ASP.NET Core - JavaScript fundamentals ## Step 1: Create a New ASP.NET Core Project Create a new web application: ```cs dotnet new webapp -n SignalRChatApp cd SignalRChatApp ``` Run the application: ```cs dotnet run ``` ## Step 2: Add SignalR Package Install the SignalR package: ```cs dotnet add package Microsoft.AspNetCore.SignalR ``` For ASP.NET Core 3.0 and later, SignalR is included in the shared framework, but adding the package explicitly is acceptable. ## Step 3: Create a Chat Hub Create a folder named **Hubs** and add a file named **ChatHub.cs**. ```cs using Microsoft.AspNetCore.SignalR; namespace SignalRChatApp.Hubs { public class ChatHub : Hub { public async Task SendMessage(string user, string message) { await Clients.All.SendAsync( "ReceiveMessage", user, message); } } } ``` ### Understanding the Code `Hub` is the base SignalR class. - `SendMessage()` receives messages from clients. - `Clients.All.SendAsync()` broadcasts messages to all connected users. ## Step 4: Register SignalR Services Open **Program.cs** and register SignalR. ```cs using SignalRChatApp.Hubs; var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorPages(); builder.Services.AddSignalR(); var app = builder.Build(); app.UseStaticFiles(); app.UseRouting(); app.MapRazorPages(); app.MapHub("/chatHub"); app.Run(); ``` ### What Happened Here? ```cs builder.Services.AddSignalR(); ``` Registers SignalR services. ```cs app.MapHub("/chatHub"); ``` Creates a SignalR endpoint accessible at: ```plaintext https://localhost:5001/chatHub ``` ## Step 5: Add SignalR JavaScript Client Open your page and include the SignalR client library. ```html ``` ## Step 6: Create the Chat UI Add the following HTML: ```html
``` This creates: - User input - Message input - Send button - Message display area ## Step 7: Establish SignalR Connection Add the JavaScript code below. ```javascript const connection = new signalR.HubConnectionBuilder() .withUrl("/chatHub") .build(); ``` This creates a connection between the browser and the SignalR hub. ## Step 8: Receive Messages from Server Register a client-side method. ```javascript connection.on( "ReceiveMessage", function(user, message) { const li = document.createElement("li"); li.textContent = `${user}: ${message}`; document .getElementById("messagesList") .appendChild(li); }); ``` Whenever the server invokes: ```cs Clients.All.SendAsync( "ReceiveMessage", user, message); ``` This [JavaScript function](https://www.mindstick.com/forum/2027/insert-checkbox-value-into-db-with-javascript-function) executes. ## Step 9: Start the Connection ```javascript connection.start() .then(function() { console.log( "Connected successfully"); }) .catch(function(err) { console.error(err); }); ``` The client is now connected to the hub. ## Step 10: Send Messages to Server Attach a [click event](https://www.mindstick.com/forum/2307/why-link-button-does-not-fire-click-event-on-first-time-click-when-add-dynamicly) to the button. ```javascript document .getElementById("sendButton") .addEventListener("click", function(event) { const user = document.getElementById( "userInput").value; const message = document.getElementById( "messageInput").value; connection.invoke( "SendMessage", user, message) .catch(function(err) { console.error(err); }); event.preventDefault(); }); ``` ### How It Works User enters a message. - Client invokes `SendMessage()`. - Hub receives the message. - Hub broadcasts to all clients. - All connected users receive the update instantly. ## Step 11: Track User Connections SignalR provides lifecycle methods. ```cs public override async Task OnConnectedAsync() { Console.WriteLine( $"Connected: {Context.ConnectionId}"); await base.OnConnectedAsync(); } ``` Handle disconnections: ```cs public override async Task OnDisconnectedAsync( Exception? exception) { Console.WriteLine( $"Disconnected: {Context.ConnectionId}"); await base.OnDisconnectedAsync( exception); } ``` ### Use Cases - User presence - Online/offline tracking - Audit logging - Cleanup operations ![Implement SignalR for Chat Messages: A Step-by-Step Guide](https://answers.mindstick.com/blogs/74d4baf4-dec8-46d3-9668-0c45171f638b/images/6e60c256-e4e9-4515-8580-6663e5599275.png) ## Step 12: Send Messages to Specific Users Broadcasting to everyone is not always ideal. Send to a specific connection: ```cs await Clients.Client(connectionId) .SendAsync( "ReceiveMessage", user, message); ``` Send to multiple users: ```cs await Clients.Users(userIds) .SendAsync( "ReceiveMessage", user, message); ``` ## Step 13: Implement Chat Rooms Using Groups Add a user to a group: ```cs public async Task JoinRoom( string roomName) { await Groups.AddToGroupAsync( Context.ConnectionId, roomName); } ``` Send messages to a room: ```cs await Clients.Group(roomName) .SendAsync( "ReceiveMessage", user, message); ``` ### Examples - Team chats - Department channels - Project-based communication - Private discussion rooms ## Step 14: Enable Automatic Reconnection Improve reliability by enabling reconnects. ```javascript const connection = new signalR.HubConnectionBuilder() .withUrl("/chatHub") .withAutomaticReconnect() .build(); ``` Benefits: - Better [user experience](https://www.mindstick.com/articles/12731/the-importance-of-feedback-to-the-user-experience) - Reduced [connection failures](https://www.mindstick.com/forum/158719/how-to-handle-database-connection-failures-and-exceptions-in-asp-dot-net-mvc) - Automatic recovery after network interruptions ## Step 15: Security Best Practices ### Validate Input ```cs if(string.IsNullOrWhiteSpace(message)) { return; } ``` ### Use Authentication ```cs [Authorize] public class ChatHub : Hub { } ``` - **Sanitize User Content** - Prevent XSS attacks by encoding user-generated content before displaying it. - **Use HTTPS** - Always run SignalR over secure connections in production. ## Complete Message Flow ```plaintext Browser A | | invoke() v SignalR Hub | | SendAsync() v All Connected Clients | +--> Browser A +--> Browser B +--> Browser C ``` ## Performance Tips For large-scale applications: - Use Redis Backplane - Enable Azure SignalR Service - Avoid excessive broadcasts - Use groups whenever possible - Minimize payload size - Cache frequently accessed data ## Conclusion SignalR makes it incredibly easy to build real-time chat applications in ASP.NET Core. By creating a Hub, establishing client connections, and broadcasting messages, you can implement a fully functional chat system with surprisingly little code. --- Original Source: https://answers.mindstick.com/blog/329/implement-signalr-for-chat-messages-a-step-by-step-guide Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.