{"id":11889,"date":"2023-08-17T11:52:38","date_gmt":"2023-08-17T11:52:38","guid":{"rendered":"https:\/\/positiwise.com\/blog\/?p=11889"},"modified":"2023-09-19T13:19:02","modified_gmt":"2023-09-19T13:19:02","slug":"signalr-in-asp-net-core","status":"publish","type":"post","link":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core","title":{"rendered":"How to Implement SignalR in ASP.NET Core Web App and Angular 14?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong class=\"pw-highlight-text-color\"><em>Quick Overview:<\/em><\/strong><br><em>In the last three to four years, modern and trendy web apps with real-time communication have become a cornerstone for constructing engaging and interactive user experiences (UX). Enter SignalR, a powerful library in the .NET Core framework that empowers developers to establish real-time connections between clients and servers. Whether it&#8217;s instant messaging, live notifications, collaborative tools, or online gaming, SignalR facilitates seamless and bi-directional communication, eliminating the need for the traditional request-response model. This article dives into the world of SignalR, unraveling its key concepts, highlighting its remarkable benefits, and providing illuminating examples that showcase its capabilities.<\/em><\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey 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:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#A_Run-Through_NET_Core_vs_Nodejs\" >A Run-Through: .NET Core vs Node.js<\/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:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#NET_Core\" >.NET Core<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Pros_of_using_NET_Core\" >Pros of using .NET Core<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Nodejs\" >Node.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#A_Deep_Dive_into_NET_Core_vs_Nodejs\" >A Deep Dive into .NET Core vs. Node.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Processing_Approach_and_Performance\" >Processing Approach and Performance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Security\" >Security<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Scalability\" >Scalability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Platform_Adaptability\" >Platform Adaptability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Support_from_Community\" >Support from Community<\/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:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Comparison_Table_between_NET_Core_and_Nodejs\" >Comparison Table between .NET Core and Node.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\/#Wrapping_Up_on_NET_Core_vs_Nodejs\" >Wrapping Up on .NET Core vs Node.js<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\">SignalR on .NET 6 &#8211; The Complete Guide<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the dynamic world of software development, the concept of responsiveness takes center stage. End users hold the expectation that applications should swiftly respond in real-time to their interactions. Whether it involves witnessing a new message materialize within a chat interface or observing live updates unfold within a collaborative document, the demand for seamless and immediate reactions remains high. Similarly, receiving instant feedback while immersed in a multiplayer online game also contributes to this persistent demand.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But how can we make this happen? Especially since many of the applications we&#8217;ve used follow a conventional pattern, with a client-server architecture forming the fundamental structure. In this setup, the user interface (UI) or client takes the lead by commencing communication. It accomplishes this by dispatching a request to the server, which subsequently handles the request and delivers a corresponding response. While versatile, this setup falls short when rapid server-to-client updates are needed without a specific client request. So, how to overcome this limitation?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Introducing SignalR, a technological breakthrough that shines as a symbol of innovation within this context. It ushers in a new way of thinking by allowing communication to travel from the server to the client, all without the necessity of the client triggering a request. This shift marks a significant change in how communication functions in the software domain, presenting a solution that harmonizes better with human communication styles&#8217; dynamic and diverse tendencies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With this, I hope you got a fundamental idea of what SignalR is. If not, here&#8217;s a crisp explanation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is SignalR?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In lay terms, <a href=\"https:\/\/dotnet.microsoft.com\/en-us\/apps\/aspnet\/signalr\">SignalR, found within the Microsoft .NET environment<\/a>, is a library designed for real-time communication. This library helps (empowers) <a href=\"https:\/\/positiwise.com\/blog\/asp-net-core-framework-why-its-best-for-your-web-application-development\">developers to construct interactive and dynamic web applications<\/a> by establishing instantaneous connections between the server and its connected clients. The library proves especially valuable in situations where updates from the server to clients must be transmitted without requiring the clients to consistently query the server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Implement SignalR in ASP.NET Core 6 Web API and Angular 14?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The below-mentioned steps outline the implementation process of using SignalR with .NET Core 6 Web API and Angular 14 to create real-time communication between a server and clients. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For better understanding, we have divided it into two parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Backend implementation using .NET Core 6 Web API and SignalR, and<\/li>\n\n\n\n<li>A client application using Angular 14<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Backend implementation using .NET Core 6 Web API and SignalR<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1: <a href=\"https:\/\/positiwise.com\/blog\/a-guide-to-building-web-apis-with-entity-framework-core-in-net-7\">Create a .NET Core Web API application<\/a>:<\/strong> Begin by creating the foundation of your backend application.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"430\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/create-net-core-web-api-application.png\" alt=\"Create Net Core Web API Application\" class=\"wp-image-11902\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/create-net-core-web-api-application.png 840w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/create-net-core-web-api-application-300x154.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/create-net-core-web-api-application-768x393.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2:<\/strong> <strong>Configure your project:<\/strong> Set up the project configuration for further development.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"427\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/configure-your-project.png\" alt=\"Configure Your Project\" class=\"wp-image-11901\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/configure-your-project.png 840w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/configure-your-project-300x153.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/configure-your-project-768x390.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3: Additional Information:<\/strong> Add some additional information about your project.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"426\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/additional-information.png\" alt=\"Additional Information\" class=\"wp-image-11900\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/additional-information.png 840w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/additional-information-300x152.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/additional-information-768x389.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4:<\/strong> <strong>Install SignalR NuGet package:<\/strong> Integrate the SignalR library into your project to enable real-time communication.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"331\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-signalr-nuget-package.png\" alt=\"Install SignalR NuGet Package\" class=\"wp-image-11899\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-signalr-nuget-package.png 840w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-signalr-nuget-package-300x118.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-signalr-nuget-package-768x303.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5:<\/strong> <strong>Project Structure:<\/strong> Provide an overview of how the project is structured.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"303\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/project-structure.png\" alt=\"Project Structure\" class=\"wp-image-11898\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/project-structure.png 269w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/project-structure-266x300.png 266w\" sizes=\"auto, (max-width: 269px) 100vw, 269px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6:<\/strong> <strong>Define IMessageHubClient interface:<\/strong> Create an interface inside the &#8220;Hub&#8221; folder, outlining the methods for sending offers to users.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csharp&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C#&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;csharp&quot;}\">namespace SignalRDemo.Hub {\n    public interface IMessageHubClient {\n        Task SendOffersToUser(List &lt; string &gt; message);\n    }\n}<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7:<\/strong> <strong>Implement MessageHub class:<\/strong> Develop the actual SignalR hub that extends the IMessageHubClient interface. This class manages to send offers to clients.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csharp&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C#&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;csharp&quot;}\">using Microsoft.AspNetCore.SignalR;\nnamespace SignalRDemo.Hub {\n    public class MessageHub: Hub &lt; IMessageHubClient &gt; {\n        public async Task SendOffersToUser(List &lt; string &gt; message) {\n            await Clients.All.SendOffersToUser(message);\n        }\n    }\n}<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>8:<\/strong> <strong>Create ProductOfferController:<\/strong> Design a controller responsible for handling product offers. Inject the IHubContext to enable sending messages via SignalR.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csharp&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C#&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;csharp&quot;}\">using Microsoft.AspNetCore.Mvc;\nusing Microsoft.AspNetCore.SignalR;\nusing SignalRDemo.Hub;\nnamespace SignalRDemo.Controllers {\n    [Route(&quot;api\/[controller]&quot;)]\n    [ApiController]\n    public class ProductOfferController: ControllerBase {\n        private IHubContext &lt; MessageHub, IMessageHubClient &gt; messageHub;\n        public ProductOfferController(IHubContext &lt; MessageHub, IMessageHubClient &gt; _messageHub) {\n                messageHub = _messageHub;\n            }\n            [HttpPost]\n            [Route(&quot;productoffers&quot;)]\n        public string Get() {\n            List &lt; string &gt; offers = new List &lt; string &gt; ();\n            offers.Add(&quot;20% Off on IPhone 12&quot;);\n            offers.Add(&quot;15% Off on HP Pavillion&quot;);\n            offers.Add(&quot;25% Off on Samsung Smart TV&quot;);\n            messageHub.Clients.All.SendOffersToUser(offers);\n            return &quot;Offers sent successfully to all users!&quot;;\n        }\n    }\n}<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>9:<\/strong> <strong>Register services and CORS policy:<\/strong> In the Program.cs class set up services related to SignalR and Cross-Origin Resource Sharing (CORS) policy.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csharp&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C#&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;csharp&quot;}\">using SignalRDemo.Hub;\nvar builder = WebApplication.CreateBuilder(args);\n\/\/ Add services to the container.\nbuilder.Services.AddSignalR();\nbuilder.Services.AddCors(options =&gt; {\n    options.AddPolicy(&quot;CORSPolicy&quot;, builder =&gt; builder.AllowAnyMethod().AllowAnyHeader().AllowCredentials().SetIsOriginAllowed((hosts) =&gt; true));\n});\nbuilder.Services.AddControllers();\n\/\/ Learn more about configuring Swagger\/OpenAPI at https:\/\/aka.ms\/aspnetcore\/swashbuckle\nbuilder.Services.AddEndpointsApiExplorer();\nbuilder.Services.AddSwaggerGen();\nvar app = builder.Build();\n\/\/ Configure the HTTP request pipeline.\nif (app.Environment.IsDevelopment()) {\n    app.UseSwagger();\n    app.UseSwaggerUI();\n}\napp.UseCors(&quot;CORSPolicy&quot;);\napp.UseRouting();\napp.UseAuthorization();\napp.UseEndpoints(endpoints =&gt; {\n    endpoints.MapControllers();\n    endpoints.MapHub &lt; MessageHub &gt; (&quot;\/offers&quot;);\n});\napp.UseHttpsRedirection();\napp.MapControllers();\napp.Run();<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>10:<\/strong> <strong>Run the application:<\/strong> Execute the application, and you should see the Swagger UI and API endpoints for sending messages.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"277\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/run-the-application.png\" alt=\"Run the Application\" class=\"wp-image-11897\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/run-the-application.png 840w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/run-the-application-300x99.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/run-the-application-768x253.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">A Client Application using Angular 14?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Create an Angular application:<\/strong> Begin by generating an Angular application named &#8220;SignalRClient.&#8221;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng new  SignalRClient<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Install SignalR library:<\/strong> Add the SignalR library to your client application to enable interaction with the server.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @microsoft\/signalr --save<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Install Bootstrap:<\/strong> Integrate Bootstrap to enhance the user interface of the application. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng add @ng-bootstrap\/ng-bootstrap<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then, include the bootstrap script within the scripts and styles section of the angular.json file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"styles\": &#91;\n             \"src\/styles.css\",\n             \".\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css\"\n           ],\n           \"scripts\": &#91;\n             \".\/node_modules\/bootstrap\/dist\/js\/bootstrap.min.js\"\n           ]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Configure app.component.ts:<\/strong> In this TypeScript file, create a HubConnection instance, set up the connection with the server, and define the logic to receive and display offers.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { Component } from '@angular\/core';\nimport { HubConnection, HubConnectionBuilder, LogLevel } from '@microsoft\/signalr';\n\n@Component({\n    selector: 'app-root',\n    templateUrl: '.\/app.component.html',\n    styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent {\n    title = 'SignalRClient';\n    private hubConnectionBuilder!: HubConnection;\n    offers: any[] = [];\n    constructor() {}\n    ngOnInit(): void {\n        this.hubConnectionBuilder = new HubConnectionBuilder().withUrl('https:\/\/localhost:7219\/offers').configureLogging(LogLevel.Information).build();\n        this.hubConnectionBuilder.start().then(() =&gt; console.log('Connection started.......!')).catch(err =&gt; console.log('Error while connect with server'));\n        this.hubConnectionBuilder.on('SendOffersToUser', (result: any) =&gt; {\n            this.offers.push(result);\n        });\n    }\n}<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Create app.component.html:<\/strong> Add the HTML snippet to portray (display) the offers acquired from the server.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;markdown&quot;,&quot;mime&quot;:&quot;text\/x-markdown&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Markdown&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;markdown&quot;}\">&lt;h2&gt;Data loaded from the Web API:&lt;\/h2&gt;\n&lt;div *ngIf=&quot;offers.length&gt;0&quot; class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;\n    &lt;li *ngFor=&quot;let item of offers&quot;&gt;\n      Offers: {{item}}\n    &lt;\/li&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Run the client app:<\/strong> Now, utilize the npm start command to initiate the client application.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm start<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7. Access the client app:<\/strong> In a browser, open the client application URL (http:\/\/localhost:4200\/) to view the application interface.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"687\" height=\"222\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/access-the-client-app.png\" alt=\"Access the Client App\" class=\"wp-image-11910\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/access-the-client-app.png 687w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/access-the-client-app-300x97.png 300w\" sizes=\"auto, (max-width: 687px) 100vw, 687px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>8. Hit the server API endpoint:<\/strong> Use the Swagger UI of the backend application to send offers to clients.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"309\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/hit-the-server-api-endpoint.png\" alt=\"Hit the Server API Endpoint\" class=\"wp-image-11909\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/hit-the-server-api-endpoint.png 840w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/hit-the-server-api-endpoint-300x110.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/hit-the-server-api-endpoint-768x283.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>9. See the offer message:<\/strong> After hitting the server API endpoint, the offer message should be displayed in the client application.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"841\" height=\"444\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/see-the-offer-message.png\" alt=\"See the Offer Message\" class=\"wp-image-11908\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/see-the-offer-message.png 841w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/see-the-offer-message-300x158.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/see-the-offer-message-768x405.png 768w\" sizes=\"auto, (max-width: 841px) 100vw, 841px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The steps above provide a comprehensive guide for implementing real-time communication using SignalR in ASP.NET Core Web API and Angular client application. It covers both the backend and frontend aspects of the implementation, detailing the setup, configuration, code creation, and final execution.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Examples of SignalR ASP.NET Core Usage<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Real-Time Chat Application:<\/strong> Construct a chat platform where users can instantaneously engage in live conversations, sending and receiving messages without manually refreshing the page.<\/li>\n\n\n\n<li><strong>Live Notifications:<\/strong> Establish a notification system that promptly informs users about significant events, like new emails, friend requests, or system upgrades.<\/li>\n\n\n\n<li><strong>Collaborative Drawing App:<\/strong> Develop an application for collaborative drawing, enabling &#8220;n&#8221; number of users to sketch on a shared canvas simultaneously in real time.<\/li>\n\n\n\n<li><strong>Stock Market Updates:<\/strong> Generate a dashboard that provides traders and investors with minute-by-minute updates on stock prices and market trends, ensuring they stay well-informed and up-to-date.<\/li>\n\n\n\n<li><strong>Online Gaming:<\/strong> Design multiplayer games that demand real-time interaction and synchronization among players for an immersive gaming experience.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Key Concepts of ASP.NET Core SignalR<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hubs:<\/strong> A hub is a high-level programming model in SignalR that abstracts the low-level communication details. It provides methods that clients can call and broadcast messages to all connected clients.<\/li>\n\n\n\n<li><strong>Groups:<\/strong> It allows clients to be grouped together, enabling targeted message delivery to specific sets of clients.<\/li>\n\n\n\n<li><strong>Persistent Connections:<\/strong> It supports both persistent connections and WebSockets, providing flexibility in real-time communication between the server and clients.<\/li>\n\n\n\n<li><strong>Connection Management<\/strong>: It manages the lifecycle of connections, handling connection establishment, reconnection, and disconnection scenarios gracefully. This helps maintain a stable communication channel even in the face of network disruptions.<\/li>\n\n\n\n<li><strong>Transport Protocols:<\/strong> SignalR automatically chooses the best transport protocol available, which can include WebSockets, Server-Sent Events, and long polling, depending on the capabilities of the client and server.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of Using SignalR .NET Core<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bi-Directional Communication:<\/strong> SignalR facilitates your application with bi-directional communication capabilities, i.e., not only can the server send data to clients, but clients can also send data back to the server in real-time. This opens up possibilities for dynamic interactions and seamless exchanges of information.<\/li>\n\n\n\n<li><strong>Creating Real-Time Chatroom Applications:<\/strong> SignalR shines when it comes to building real-time chatroom applications. With its ability to instantly push messages to participants, you can create chat platforms where messages appear in real-time as they&#8217;re sent, fostering lively conversations and engagement.<\/li>\n\n\n\n<li><strong>Cost-Free Solution:<\/strong> One significant perk of SignalR is that it&#8217;s free. You can combine its powerful real-time communication features into your .NET Core application without extra cost, making it a budget-friendly choice.<\/li>\n\n\n\n<li><strong>Fallback to SSE (Server-Sent Events): <\/strong>It is built to adapt. If newer transport mechanisms like WebSockets aren&#8217;t available, SignalR gracefully falls back to older ones, such as Server-Sent Events. This ensures compatibility across different browsers and platforms, guaranteeing a smooth experience for all users.<\/li>\n\n\n\n<li><strong>User-Friendly Implementation:<\/strong> It is designed with simplicity in mind. Its user-friendly API and intuitive concepts make it moderately straightforward to incorporate real-time functionality into your app. This reduces the learning curve for developers and accelerates the development process. <\/li>\n\n\n\n<li><strong>Broadcasting Messages:<\/strong> SignalR makes broadcasting messages a breeze. You can send messages to specific or multiple clients simultaneously as needed. This opens doors to scenarios like targeted notifications, group chats, and global announcements.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group border rounded bg-light has-global-padding is-layout-constrained wp-container-core-group-is-layout-71df2e02 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-text-align-center fs-2 text-blue lh-sm has-contrast-color has-text-color wp-block-paragraph\"><strong>Let&#8217;s Design the Perfect ASP.NET Application for Your Enterprise Business<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center mt-2 wp-block-paragraph\">Bring your unique software &amp; web application vision to a team of ASP.NET experts for Enterprise business. Our dedicated .NET developers design and build custom .NET app solutions for your needs.<\/p>\n\n\n\n<div class=\"wp-block-buttons mt-3 is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-20959078 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-base-color has-text-color has-background wp-element-button\" href=\"https:\/\/positiwise.com\/hire-asp-net-developers\" style=\"border-radius:100px;background-color:#ed7923;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px\"><strong>Hire Best ASP.NET Developers<\/strong><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion on SignalR in ASP.NET Core<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At its core, SignalR simplifies implementing real-time web functionality by handling compatibility across browsers and platforms. It supports modern transport mechanisms like WebSockets and Server-Sent Events and fallback options like long polling when needed. This allows your .NET Core developer to choose the most appropriate transport based on client capabilities and network conditions. The versatility of SignalR empowers your developer to ensure a consistent real-time experience for all your users. So, when looking to <a href=\"https:\/\/positiwise.com\/hire\/hire-dot-net-core-developers\">hire .NET Core developers<\/a> with SignalR experience for implementing robust and seamless real-time communication in your web apps.<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\".Net Core vs. Java \u2013 Which One You Should Use for Your Projects?\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-java-technology\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\".Net Core vs. Java \u2013 Which One You Should Use for Your Projects?\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1.jpg 1200w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1-300x200.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1-1024x683.jpg 1024w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1-768x512.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\".Net Core vs. Java \u2013 Which One You Should Use for Your Projects?\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-java-technology\">\r\n        .Net Core vs. Java \u2013 Which One You Should Use for Your Projects?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Precise Road Map for ASP.NET Developers\" href=\"https:\/\/positiwise.com\/blog\/roadmap-for-asp-dot-net-developers\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/dealership-1200x800-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Hire ASP.NET Developers - A Precise Road Map to Employ ASP.NET Developers\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/dealership-1200x800-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/dealership-1200x800-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/dealership-1200x800-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Precise Road Map for ASP.NET Developers\" href=\"https:\/\/positiwise.com\/blog\/roadmap-for-asp-dot-net-developers\">\r\n        Precise Road Map for ASP.NET Developers  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\".NET Core vs Node.js: The Difference Explained by Web Expert\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/NET-Core-VS-Node-js-jpg.webp\" class=\"attachment-full size-full wp-post-image\" alt=\"NET-Core-VS-Node-js\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/NET-Core-VS-Node-js-jpg.webp 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/NET-Core-VS-Node-js-300x182.webp 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/NET-Core-VS-Node-js-768x467.webp 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\".NET Core vs Node.js: The Difference Explained by Web Expert\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-node-js\">\r\n        .NET Core vs Node.js: The Difference Explained by Web Expert  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Quick Overview:In the last three to four years, modern and trendy web apps with real-time communication have become [&hellip;]<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\".Net Core vs. Java \u2013 Which One You Should Use for Your Projects?\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-java-technology\">\r\n\r\n      <img width=\"1200\" height=\"800\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\".Net Core vs. Java \u2013 Which One You Should Use for Your Projects?\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1.jpg 1200w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1-300x200.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1-1024x683.jpg 1024w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/web-security-partner-1-768x512.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\".Net Core vs. Java \u2013 Which One You Should Use for Your Projects?\" href=\"https:\/\/positiwise.com\/blog\/net-core-vs-java-technology\">\r\n        .Net Core vs. Java \u2013 Which One You Should Use for Your Projects?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Precise Road Map for ASP.NET Developers\" href=\"https:\/\/positiwise.com\/blog\/roadmap-for-asp-dot-net-developers\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/dealership-1200x800-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Hire ASP.NET Developers - A Precise Road Map to Employ ASP.NET Developers\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/dealership-1200x800-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/dealership-1200x800-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/dealership-1200x800-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Precise Road Map for ASP.NET Developers\" href=\"https:\/\/positiwise.com\/blog\/roadmap-for-asp-dot-net-developers\">\r\n        Precise Road Map for ASP.NET Developers  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"A Descriptive Guide to .NET Framework\" href=\"https:\/\/positiwise.com\/blog\/a-descriptive-guide-to-dot-net-framework\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/a-descriptive-guide-to-dot-net-framework.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"A Descriptive Guide to .NET Framework\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/a-descriptive-guide-to-dot-net-framework.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/a-descriptive-guide-to-dot-net-framework-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/a-descriptive-guide-to-dot-net-framework-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"A Descriptive Guide to .NET Framework\" href=\"https:\/\/positiwise.com\/blog\/a-descriptive-guide-to-dot-net-framework\">\r\n        A Descriptive Guide to .NET Framework  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"author":3,"featured_media":12003,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-11889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dot-net-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Implement SignalR in ASP.NET Core Web App?<\/title>\n<meta name=\"description\" content=\"Learn seamless integration of SignalR in ASP.NET Core and Angular 14 for real-time communication. Step-by-step guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Implement SignalR in ASP.NET Core Web App?\" \/>\n<meta property=\"og:description\" content=\"Learn seamless integration of SignalR in ASP.NET Core and Angular 14 for real-time communication. Step-by-step guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core\" \/>\n<meta property=\"og:site_name\" content=\"Positiwise\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/positiwise\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-17T11:52:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-19T13:19:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/signalr-in-asp-net-core.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1021\" \/>\n\t<meta property=\"og:image:height\" content=\"621\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Parag Mehta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@positiwise\" \/>\n<meta name=\"twitter:site\" content=\"@positiwise\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Parag Mehta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core\"},\"author\":{\"name\":\"Parag Mehta\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/b4b3d9970ea94f5914a615f70345353a\"},\"headline\":\"How to Implement SignalR in ASP.NET Core Web App and Angular 14?\",\"datePublished\":\"2023-08-17T11:52:38+00:00\",\"dateModified\":\"2023-09-19T13:19:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core\"},\"wordCount\":1538,\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/signalr-in-asp-net-core.jpg\",\"articleSection\":[\".NET Development\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core\",\"name\":\"How to Implement SignalR in ASP.NET Core Web App?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/signalr-in-asp-net-core.jpg\",\"datePublished\":\"2023-08-17T11:52:38+00:00\",\"dateModified\":\"2023-09-19T13:19:02+00:00\",\"description\":\"Learn seamless integration of SignalR in ASP.NET Core and Angular 14 for real-time communication. Step-by-step guide.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core#primaryimage\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/signalr-in-asp-net-core.jpg\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/signalr-in-asp-net-core.jpg\",\"width\":1021,\"height\":621,\"caption\":\"SignalR in ASP.NET Core\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/signalr-in-asp-net-core#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/positiwise.com\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Implement SignalR in ASP.NET Core Web App and Angular 14?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"name\":\"Positiwise\",\"description\":\"Providing Full-cycle Software Development Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"alternateName\":\"Positiwise Software Pvt Ltd\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\",\"name\":\"Positiwise\",\"alternateName\":\"Positiwise Software Pvt Ltd\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"width\":202,\"height\":29,\"caption\":\"Positiwise\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/positiwise\\\/\",\"https:\\\/\\\/x.com\\\/positiwise\",\"https:\\\/\\\/github.com\\\/positiwise\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/positiwise\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/b4b3d9970ea94f5914a615f70345353a\",\"name\":\"Parag Mehta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g\",\"caption\":\"Parag Mehta\"},\"description\":\"Parag Mehta, the CEO and Founder of Positiwise Software Pvt Ltd has extensive knowledge of the development niche. He is implementing custom strategies to craft highly-appealing and robust applications for its clients and supporting employees to grow and ace the tasks. He is a consistent learner and always provides the best-in-quality solutions, accelerating productivity.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/paragcmehta\"],\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/author\\\/parag-mehta\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Implement SignalR in ASP.NET Core Web App?","description":"Learn seamless integration of SignalR in ASP.NET Core and Angular 14 for real-time communication. Step-by-step guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core","og_locale":"en_US","og_type":"article","og_title":"How to Implement SignalR in ASP.NET Core Web App?","og_description":"Learn seamless integration of SignalR in ASP.NET Core and Angular 14 for real-time communication. Step-by-step guide.","og_url":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core","og_site_name":"Positiwise","article_publisher":"https:\/\/www.facebook.com\/positiwise\/","article_published_time":"2023-08-17T11:52:38+00:00","article_modified_time":"2023-09-19T13:19:02+00:00","og_image":[{"width":1021,"height":621,"url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/signalr-in-asp-net-core.jpg","type":"image\/jpeg"}],"author":"Parag Mehta","twitter_card":"summary_large_image","twitter_creator":"@positiwise","twitter_site":"@positiwise","twitter_misc":{"Written by":"Parag Mehta","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core#article","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core"},"author":{"name":"Parag Mehta","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/b4b3d9970ea94f5914a615f70345353a"},"headline":"How to Implement SignalR in ASP.NET Core Web App and Angular 14?","datePublished":"2023-08-17T11:52:38+00:00","dateModified":"2023-09-19T13:19:02+00:00","mainEntityOfPage":{"@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core"},"wordCount":1538,"publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"image":{"@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/signalr-in-asp-net-core.jpg","articleSection":[".NET Development"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/positiwise.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core","url":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core","name":"How to Implement SignalR in ASP.NET Core Web App?","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core#primaryimage"},"image":{"@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/signalr-in-asp-net-core.jpg","datePublished":"2023-08-17T11:52:38+00:00","dateModified":"2023-09-19T13:19:02+00:00","description":"Learn seamless integration of SignalR in ASP.NET Core and Angular 14 for real-time communication. Step-by-step guide.","breadcrumb":{"@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core#primaryimage","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/signalr-in-asp-net-core.jpg","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/signalr-in-asp-net-core.jpg","width":1021,"height":621,"caption":"SignalR in ASP.NET Core"},{"@type":"BreadcrumbList","@id":"https:\/\/positiwise.com\/blog\/signalr-in-asp-net-core#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/positiwise.com\/blog"},{"@type":"ListItem","position":2,"name":"How to Implement SignalR in ASP.NET Core Web App and Angular 14?"}]},{"@type":"WebSite","@id":"https:\/\/positiwise.com\/blog\/#website","url":"https:\/\/positiwise.com\/blog\/","name":"Positiwise","description":"Providing Full-cycle Software Development Services","publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"alternateName":"Positiwise Software Pvt Ltd","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/positiwise.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/positiwise.com\/blog\/#organization","name":"Positiwise","alternateName":"Positiwise Software Pvt Ltd","url":"https:\/\/positiwise.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","width":202,"height":29,"caption":"Positiwise"},"image":{"@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/positiwise\/","https:\/\/x.com\/positiwise","https:\/\/github.com\/positiwise","https:\/\/www.linkedin.com\/company\/positiwise"]},{"@type":"Person","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/b4b3d9970ea94f5914a615f70345353a","name":"Parag Mehta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g","caption":"Parag Mehta"},"description":"Parag Mehta, the CEO and Founder of Positiwise Software Pvt Ltd has extensive knowledge of the development niche. He is implementing custom strategies to craft highly-appealing and robust applications for its clients and supporting employees to grow and ace the tasks. He is a consistent learner and always provides the best-in-quality solutions, accelerating productivity.","sameAs":["https:\/\/www.linkedin.com\/in\/paragcmehta"],"url":"https:\/\/positiwise.com\/blog\/author\/parag-mehta"}]}},"_links":{"self":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/11889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/comments?post=11889"}],"version-history":[{"count":22,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/11889\/revisions"}],"predecessor-version":[{"id":13623,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/11889\/revisions\/13623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media\/12003"}],"wp:attachment":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media?parent=11889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/categories?post=11889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/tags?post=11889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}