{"id":222,"date":"2025-07-24T06:42:04","date_gmt":"2025-07-24T06:42:04","guid":{"rendered":"https:\/\/www.dotnetdevelopers.us\/blogs\/?p=222"},"modified":"2025-08-05T06:46:02","modified_gmt":"2025-08-05T06:46:02","slug":"dot-net-apps","status":"publish","type":"post","link":"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/","title":{"rendered":"How to Use SignalR for Real-Time Communication in .NET Apps"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#What_is_SignalR\" >What is SignalR?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#_Why_Use_SignalR\" >&nbsp;Why Use SignalR?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#_Real-Time_Communication_Use_Cases\" >&nbsp;Real-Time Communication Use Cases<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#Step-by-Step_Tutorial_Build_a_Real-Time_Chat_App_with_SignalR\" >Step-by-Step Tutorial: Build a Real-Time Chat App with SignalR<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#_Step_1_Create_a_New_ASPNET_Core_MVC_Project\" >&nbsp;Step 1: Create a New ASP.NET Core MVC Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#_Step_2_Install_the_SignalR_NuGet_Package\" >&nbsp;Step 2: Install the SignalR NuGet Package<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#_Step_3_Create_a_SignalR_Hub\" >&nbsp;Step 3: Create a SignalR Hub<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#_Step_4_Update_Programcs_to_Register_SignalR\" >&nbsp;Step 4: Update Program.cs to Register SignalR<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#_Step_5_Add_JavaScript_Frontend_for_SignalR\" >&nbsp;Step 5: Add JavaScript Frontend for SignalR<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#_Step_6_Run_the_App\" >&nbsp;Step 6: Run the App<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#Advanced_Features_in_SignalR\" >Advanced Features in SignalR<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#1_SignalR_Groups\" >1. SignalR Groups<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#2_Private_Messaging\" >2. Private Messaging<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#3_Authentication_Integration\" >3. Authentication Integration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#4_Scale-out_with_Redis_or_Azure\" >4. Scale-out with Redis or Azure<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#Common_Issues_How_to_Fix_Them\" >Common Issues &amp; How to Fix Them<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#Can_I_use_SignalR_in_Blazor\" >Can I use SignalR in Blazor?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#Does_SignalR_work_on_mobile\" >Does SignalR work on mobile?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#What_if_WebSockets_arent_supported\" >What if WebSockets aren\u2019t supported?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#Can_I_broadcast_messages_to_specific_users\" >Can I broadcast messages to specific users?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.dotnetdevelopers.us\/blogs\/dot-net-apps\/#Conclusion\" >Conclusion&nbsp;<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_SignalR\"><\/span><strong>What is SignalR?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>SignalR is a Microsoft library that enables your web app to send and receive messages instantly,&nbsp; without requiring page reloads.<\/p>\n\n\n\n<p>Think of it like walkie-talkies between the server and your users. The moment something changes (such as someone sending a message), all connected users see it immediately.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Why_Use_SignalR\"><\/span><strong>&nbsp;Why Use SignalR?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No need for constant page refresh<br><\/li>\n\n\n\n<li>Built into ASP.NET Core<br><\/li>\n\n\n\n<li>Uses the best communication method available (WebSockets, Server-Sent Events, or Long Polling)<br><\/li>\n\n\n\n<li>Works great with JavaScript, Blazor, Xamarin, and even mobile apps<br><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Real-Time_Communication_Use_Cases\"><\/span><strong>&nbsp;Real-Time Communication Use Cases<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You\u2019d use SignalR in scenarios where speed and freshness of data matter:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Use Case<\/strong><\/td><td><strong>Description<\/strong><\/td><\/tr><tr><td>Chat Apps<\/td><td>Send and receive messages in real-time<\/td><\/tr><tr><td>Live Dashboards<\/td><td>Stock prices, system monitoring, or real-time analytics<\/td><\/tr><tr><td>Notifications<\/td><td>Alert users instantly when something happens<\/td><\/tr><tr><td>Collaborative Platforms<\/td><td>Google Docs-style co-editing features<\/td><\/tr><tr><td>Multiplayer Games<\/td><td>Real-time movement, chat, and scores<\/td><\/tr><tr><td>IoT Monitoring Systems<\/td><td>Display sensor data as it updates<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step-by-Step_Tutorial_Build_a_Real-Time_Chat_App_with_SignalR\"><\/span><strong>Step-by-Step Tutorial: Build a Real-Time Chat App with SignalR<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let&#8217;s build a real-time chat app using SignalR in .NET 6+ and JavaScript. We\u2019ll go slow and explain each part.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Step_1_Create_a_New_ASPNET_Core_MVC_Project\"><\/span><strong>&nbsp;Step 1: Create a New ASP.NET Core MVC Project<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Using Visual Studio:<\/strong><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open Visual Studio<br><\/li>\n\n\n\n<li>Go to File > New > Project.<br><\/li>\n\n\n\n<li>Choose ASP.NET Core Web App (Model-View-Controller)<br><\/li>\n\n\n\n<li>Click Next, name it SignalRChatApp, then click Create<br><\/li>\n\n\n\n<li>Choose <a href=\"https:\/\/www.dotnetdevelopers.us\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/www.dotnetdevelopers.us\/\" rel=\"noreferrer noopener\">.NET<\/a> 6.0 (Long-term support) and click Create.<br><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Step_2_Install_the_SignalR_NuGet_Package\"><\/span><strong>&nbsp;Step 2: Install the SignalR NuGet Package<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If it&#8217;s not already added, install it:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Using Package Manager Console:<\/strong><\/h4>\n\n\n\n<p>powershell<\/p>\n\n\n\n<p>CopyEdit<\/p>\n\n\n\n<p>Install-Package Microsoft.AspNetCore.SignalR<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Or via .NET CLI:<\/strong><\/h4>\n\n\n\n<p>bash<\/p>\n\n\n\n<p>CopyEdit<\/p>\n\n\n\n<p>dotnet add package Microsoft.AspNetCore.SignalR<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Step_3_Create_a_SignalR_Hub\"><\/span><strong>&nbsp;Step 3: Create a SignalR Hub<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Add a new folder called Hubs. Inside it, create a class named ChatHub.cs.<\/p>\n\n\n\n<p>csharp<\/p>\n\n\n\n<p>CopyEdit<\/p>\n\n\n\n<p>using Microsoft.AspNetCore.SignalR;<\/p>\n\n\n\n<p>namespace SignalRChatApp.Hubs<\/p>\n\n\n\n<p>{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;public class ChatHub: Hub<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public async Task SendMessage(string user, string message)<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await Clients.All.SendAsync(&#8220;ReceiveMessage&#8221;, user, message);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>&nbsp;<strong>Explanation<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hub: A central place where the server and clients talk.<br><\/li>\n\n\n\n<li>SendMessage: Called by the client to broadcast a message.<br><\/li>\n\n\n\n<li>Clients.All.SendAsync(&#8230;): Sends the message to everyone connected.<br><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Step_4_Update_Programcs_to_Register_SignalR\"><\/span><strong>&nbsp;Step 4: Update Program.cs to Register SignalR<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Open your Program.cs and update it like this:<\/p>\n\n\n\n<p>csharp<\/p>\n\n\n\n<p>CopyEdit<\/p>\n\n\n\n<p>using SignalRChatApp.Hubs;<\/p>\n\n\n\n<p>var builder = WebApplication.CreateBuilder(args);<\/p>\n\n\n\n<p>builder.Services.AddControllersWithViews();<\/p>\n\n\n\n<p>builder.Services.AddSignalR(); \/\/ Add SignalR services<\/p>\n\n\n\n<p>var app = builder.Build();<\/p>\n\n\n\n<p>app.UseStaticFiles();<\/p>\n\n\n\n<p>app.UseRouting();<\/p>\n\n\n\n<p>app.MapControllerRoute(<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;name: &#8220;default&#8221;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;pattern: &#8220;{controller=Home}\/{action=Index}\/{id?}&#8221;);<\/p>\n\n\n\n<p>app.MapHub&lt;ChatHub&gt;(&#8220;\/chathub&#8221;); \/\/ Register the SignalR hub<\/p>\n\n\n\n<p>app.Run();<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Step_5_Add_JavaScript_Frontend_for_SignalR\"><\/span><strong>&nbsp;Step 5: Add JavaScript Frontend for SignalR<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Open Views\/Home\/Index.cshtml and replace the body with this code:<\/p>\n\n\n\n<p>html<\/p>\n\n\n\n<p>CopyEdit<\/p>\n\n\n\n<p>&lt;div class=&#8221;container&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;SignalR Real-Time Chat&lt;\/h2&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&#8221;text&#8221; id=&#8221;userInput&#8221; placeholder=&#8221;Enter your name&#8221; \/&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&#8221;text&#8221; id=&#8221;messageInput&#8221; placeholder=&#8221;Type a message&#8221; \/&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onclick=&#8221;sendMessage()&#8221;&gt;Send&lt;\/button&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id=&#8221;messagesList&#8221;&gt;&lt;\/ul&gt;<\/p>\n\n\n\n<p>&lt;\/div&gt;<\/p>\n\n\n\n<p>&lt;script src=&#8221;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/microsoft-signalr\/6.0.0\/signalr.min.js&#8221;&gt;&lt;\/script&gt;<\/p>\n\n\n\n<p>&lt;script&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;const connection = new signalR.HubConnectionBuilder()<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.withUrl(&#8220;\/chathub&#8221;)<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.build();<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;Connection.on(&#8220;ReceiveMessage&#8221;, function (user, message) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const msg = document.createElement(&#8220;li&#8221;);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg.textContent = `${user}: ${message}`;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#8220;messagesList&#8221;).appendChild(msg);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;});<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;connection.start().catch(function (err) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return console.error(err.toString());<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;});<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;function sendMessage() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const user = document.getElementById(&#8220;userInput&#8221;).value;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const message = document.getElementById(&#8220;messageInput&#8221;).value;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection.invoke(&#8220;SendMessage&#8221;, user, message)<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.catch(function (err) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return console.error(err.toString());<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&lt;\/script&gt;<\/p>\n\n\n\n<p>&nbsp;This script does three main things:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Connects to the hub<br><\/li>\n\n\n\n<li>Listens for incoming messages<br><\/li>\n\n\n\n<li>Sends messages when the user clicks &#8220;Send&#8221;<br><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Step_6_Run_the_App\"><\/span><strong>&nbsp;Step 6: Run the App<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Press F5 or click the green play button in Visual Studio.<br><\/li>\n\n\n\n<li>Open two browser tabs with the app running.<br><\/li>\n\n\n\n<li>Send a message in one tab, and it appears in the other immediately.<br><\/li>\n<\/ol>\n\n\n\n<p>&nbsp;You just made your first real-time app using SignalR!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Advanced_Features_in_SignalR\"><\/span><strong>Advanced Features in SignalR<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Once you\u2019re comfy with the basics, try these:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_SignalR_Groups\"><\/span><strong>1. SignalR Groups<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can add users to specific groups (e.g., rooms or channels):<\/p>\n\n\n\n<p>csharp<\/p>\n\n\n\n<p>CopyEdit<\/p>\n\n\n\n<p>await Groups.AddToGroupAsync(Context.ConnectionId, &#8220;Admins&#8221;);<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Private_Messaging\"><\/span><strong>2. Private Messaging<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Send a message to a specific user:<\/p>\n\n\n\n<p>csharp<\/p>\n\n\n\n<p>CopyEdit<\/p>\n\n\n\n<p>await Clients.User(userId).SendAsync(&#8220;ReceiveMessage&#8221;, message);<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Authentication_Integration\"><\/span><strong>3. Authentication Integration<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>SignalR works with ASP.NET authentication and identity, allowing secure messaging between users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Scale-out_with_Redis_or_Azure\"><\/span><strong>4. Scale-out with Redis or Azure<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To support multiple users across servers, consider using Redis or Azure SignalR Service.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Issues_How_to_Fix_Them\"><\/span><strong>Common Issues &amp; How to Fix Them<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Problem<\/strong><\/td><td><strong>Solution<\/strong><\/td><\/tr><tr><td>JavaScript error: connection not defined<\/td><td>Ensure the SignalR script is loaded before your custom script<\/td><\/tr><tr><td>404 error on \/chathub<\/td><td>Double-check the MapHub route in Program.cs<\/td><\/tr><tr><td>Messages not showing<\/td><td>Confirm the client on() method matches the server method name<\/td><\/tr><tr><td>Not working on production<\/td><td>Ensure WebSockets are enabled on the server or use Azure SignalR<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong>FAQs<\/strong><\/p>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1753338591338\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_use_SignalR_in_Blazor\"><\/span><strong>Can I use SignalR in Blazor?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes! SignalR is actually what powers Blazor Server. You can also use it in Blazor WebAssembly via JavaScript interop.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1753338609483\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Does_SignalR_work_on_mobile\"><\/span><strong>Does SignalR work on mobile?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Absolutely. You can connect using Xamarin, MAUI, Android, and iOS using platform-specific SignalR client libraries.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1753338622487\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_if_WebSockets_arent_supported\"><\/span><strong>What if WebSockets aren\u2019t supported?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No worries, SignalR automatically falls back to Server-Sent Events or Long Polling, depending on what the browser\/server supports.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1753338640907\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_broadcast_messages_to_specific_users\"><\/span><strong>Can I broadcast messages to specific users?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes! You can send messages to a specific user, group, or connection using:<br \/>csharp<br \/>CopyEdit<br \/>Clients.User(&#8220;userId&#8221;).SendAsync(&#8230;);<br \/>Clients.Group(&#8220;groupName&#8221;).SendAsync(&#8230;);<br \/>Clients.Client(&#8220;connectionId&#8221;).SendAsync(&#8230;);<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion&nbsp;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>SignalR is one of those tools that can take your app from \u201cjust functional\u201d to \u201cmind-blowingly interactive.\u201d Whether you\u2019re building a chat app, a stock tracker, or a notification system, SignalR&#8217;s got your back.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is SignalR? SignalR is a Microsoft library that enables your web app to send and receive messages instantly,&nbsp; without requiring page reloads. Think of it like walkie-talkies between the server and your users. The moment something changes (such as someone sending a message), all connected users see it immediately. &nbsp;Why Use SignalR? &nbsp;Real-Time Communication Use Cases You\u2019d use SignalR in scenarios where speed and freshness of data matter: Use Case Description Chat Apps Send and receive messages in real-time Live Dashboards Stock prices, system monitoring, or real-time analytics Notifications Alert users instantly when something happens Collaborative Platforms Google Docs-style co-editing features Multiplayer Games Real-time movement, chat, and scores IoT Monitoring Systems Display sensor data as it updates Step-by-Step Tutorial: Build a Real-Time Chat App with SignalR Let&#8217;s build a real-time chat app using SignalR in .NET 6+ and JavaScript. We\u2019ll go slow and explain each part. &nbsp;Step 1: Create a New ASP.NET Core MVC Project Using Visual Studio: &nbsp;Step 2: Install the SignalR NuGet Package If it&#8217;s not already added, install it: Using Package Manager Console: powershell CopyEdit Install-Package Microsoft.AspNetCore.SignalR Or via .NET CLI: bash CopyEdit dotnet add package Microsoft.AspNetCore.SignalR &nbsp;Step 3: Create a SignalR Hub Add a new folder called Hubs. Inside it, create a class named ChatHub.cs. csharp CopyEdit using Microsoft.AspNetCore.SignalR; namespace SignalRChatApp.Hubs { &nbsp;&nbsp;&nbsp;&nbsp;public class ChatHub: Hub &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public async Task SendMessage(string user, string message) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await Clients.All.SendAsync(&#8220;ReceiveMessage&#8221;, user, message); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} } &nbsp;Explanation: &nbsp;Step 4: Update Program.cs to Register SignalR Open your Program.cs and update it like this: csharp CopyEdit using SignalRChatApp.Hubs; var builder = WebApplication.CreateBuilder(args); builder.Services.AddControllersWithViews(); builder.Services.AddSignalR(); \/\/ Add SignalR services var app = builder.Build(); app.UseStaticFiles(); app.UseRouting(); app.MapControllerRoute( &nbsp;&nbsp;&nbsp;&nbsp;name: &#8220;default&#8221;, &nbsp;&nbsp;&nbsp;&nbsp;pattern: &#8220;{controller=Home}\/{action=Index}\/{id?}&#8221;); app.MapHub&lt;ChatHub&gt;(&#8220;\/chathub&#8221;); \/\/ Register the SignalR hub app.Run(); &nbsp;Step 5: Add JavaScript Frontend for SignalR Open Views\/Home\/Index.cshtml and replace the body with this code: html CopyEdit &lt;div class=&#8221;container&#8221;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;SignalR Real-Time Chat&lt;\/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&#8221;text&#8221; id=&#8221;userInput&#8221; placeholder=&#8221;Enter your name&#8221; \/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&#8221;text&#8221; id=&#8221;messageInput&#8221; placeholder=&#8221;Type a message&#8221; \/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button onclick=&#8221;sendMessage()&#8221;&gt;Send&lt;\/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id=&#8221;messagesList&#8221;&gt;&lt;\/ul&gt; &lt;\/div&gt; &lt;script src=&#8221;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/microsoft-signalr\/6.0.0\/signalr.min.js&#8221;&gt;&lt;\/script&gt; &lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;const connection = new signalR.HubConnectionBuilder() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.withUrl(&#8220;\/chathub&#8221;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.build(); &nbsp;&nbsp;&nbsp;&nbsp;Connection.on(&#8220;ReceiveMessage&#8221;, function (user, message) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const msg = document.createElement(&#8220;li&#8221;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg.textContent = `${user}: ${message}`; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#8220;messagesList&#8221;).appendChild(msg); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;connection.start().catch(function (err) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return console.error(err.toString()); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;function sendMessage() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const user = document.getElementById(&#8220;userInput&#8221;).value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const message = document.getElementById(&#8220;messageInput&#8221;).value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection.invoke(&#8220;SendMessage&#8221;, user, message) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.catch(function (err) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return console.error(err.toString()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &lt;\/script&gt; &nbsp;This script does three main things: &nbsp;Step 6: Run the App &nbsp;You just made your first real-time app using SignalR! Advanced Features in SignalR Once you\u2019re comfy with the basics, try these: 1. SignalR Groups You can add users to specific groups (e.g., rooms or channels): csharp CopyEdit await Groups.AddToGroupAsync(Context.ConnectionId, &#8220;Admins&#8221;); 2. Private Messaging Send a message to a specific user: csharp CopyEdit await Clients.User(userId).SendAsync(&#8220;ReceiveMessage&#8221;, message); 3. Authentication Integration SignalR works with ASP.NET authentication and identity, allowing secure messaging between users. 4. Scale-out with Redis or Azure To support multiple users across servers, consider using Redis or Azure SignalR Service. Common Issues &amp; How to Fix Them Problem Solution JavaScript error: connection not defined Ensure the SignalR script is loaded before your custom script 404 error on \/chathub Double-check the MapHub route in Program.cs Messages not showing Confirm the client on() method matches the server method name Not working on production Ensure WebSockets are enabled on the server or use Azure SignalR FAQs Conclusion&nbsp; SignalR is one of those tools that can take your app from \u201cjust functional\u201d to \u201cmind-blowingly interactive.\u201d Whether you\u2019re building a chat app, a stock tracker, or a notification system, SignalR&#8217;s got your back.<\/p>\n","protected":false},"author":1,"featured_media":264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/posts\/222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/comments?post=222"}],"version-history":[{"count":1,"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/posts\/222\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/posts\/222\/revisions\/224"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/media\/264"}],"wp:attachment":[{"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/media?parent=222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/categories?post=222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotnetdevelopers.us\/blogs\/wp-json\/wp\/v2\/tags?post=222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}