{"id":10711,"date":"2024-02-11T22:19:25","date_gmt":"2024-02-11T22:19:25","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=10711"},"modified":"2024-02-11T22:21:13","modified_gmt":"2024-02-11T22:21:13","slug":"signal-r-and-react","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/signal-r-and-react\/","title":{"rendered":"Signal R and React"},"content":{"rendered":"<p>I haven&#8217;t touched Signal R in a while. I wanted to see how to work with Signal R in a React app.<\/p>\n<p>Let&#8217;s start by creating a simple ASP.NET Core Web API server<\/p>\n<ul>\n<li>Create an ASP.NET Core Web API application, I&#8217;m going to use minimal API<\/li>\n<li>Add the NuGet package <em>Microsoft.AspNetCore.SignalR.Client<\/em><\/li>\n<li>Add the following to the Program.cs\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nbuilder.Services.AddSignalR();\r\nbuilder.Services.AddCors();\r\n<\/pre>\n<\/li>\n<li>We&#8217;ve added CORS support as we&#8217;re going to need tthis for testing locally, we&#8217;ll also need the following code\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\napp.UseCors(options =&gt;\r\n{\r\n  options.AllowAnyHeader()\r\n    .AllowAnyMethod()\r\n    .AllowCredentials()\r\n    .SetIsOriginAllowed(origin =&gt; true);\r\n});\r\n<\/pre>\n<\/li>\n<\/ul>\n<p>Before we can use Signal R we&#8217;ll need to add a <em>hub<\/em>, I&#8217;m going to add a file <em>NotificationHub.cs<\/em> with the following code<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\npublic class NotificationHub : Hub;\r\n<\/pre>\n<p>Now return to Program.cs and add the following<\/p>\n<ul>\n<li> We need to map our hub into the application using\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\napp.MapHub&lt;NotificationHub&gt;(&quot;\/notifications&quot;);\r\n<\/pre>\n<\/li>\n<li>Finally let&#8217;s map an endpoint to allow us to send messages via Swagger to our clients. After the line above, add the following\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\napp.MapGet(&quot;\/test&quot;, async (IHubContext&lt;NotificationHub&gt; hub, string message) =&gt;\r\n  await hub.Clients.All.SendAsync(&quot;NotifyMe&quot;,$&quot;Message: {message}&quot;));\r\n<\/pre>\n<\/li>\n<\/ul>\n<p>Now we need a client, so create yourself a React application (I&#8217;m using TypeScript as usual with mine).<\/p>\n<ul>\n<li>Add the package @microsoft\/signalr, i.e. from yarn <em>yarn add @microsoft\/signalr<\/em><\/li>\n<li>In the App.tsx we&#8217;re going to create the <em>HubConnectionBuilder<\/em> against out ASP.NET Core API server. We&#8217;ll then start the connection and finally watch for messages on the &#8220;NotifyMe&#8221; name as previously set up in the ASP.NET app, the code looks like this\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport { HubConnectionBuilder } from &#039;@microsoft\/signalr&#039;;\r\n\r\nfunction App() {\r\n  const &#x5B;message, setMessage] = useState(&quot;&quot;);\r\n\r\n  useEffect(() =&gt; {\r\n    const connection = new HubConnectionBuilder()\r\n      .withUrl(&quot;http:\/\/localhost:5021\/notifications&quot;)\r\n      .build();\r\n  \r\n    connection.start();  \r\n    connection.on(&quot;NotifyMe&quot;, data =&gt; {\r\n      setMessage(data);\r\n    });\r\n  }, &#x5B;])  \r\n\r\n  return (\r\n    &lt;div className=&quot;App&quot;&gt;\r\n      {message}\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n<\/pre>\n<\/li>\n<\/ul>\n<p>Make sure you start the ASP.NET server first, then start your React application. Now from the Swagger page we can send messages into the server and out to the React client&#8217;s connected to SignalR.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I haven&#8217;t touched Signal R in a while. I wanted to see how to work with Signal R in a React app. Let&#8217;s start by creating a simple ASP.NET Core Web API server Create an ASP.NET Core Web API application, I&#8217;m going to use minimal API Add the NuGet package Microsoft.AspNetCore.SignalR.Client Add the following to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[200,243,47],"tags":[],"class_list":["post-10711","post","type-post","status-publish","format-standard","hentry","category-asp-net-core","category-react","category-signalr"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/10711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=10711"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/10711\/revisions"}],"predecessor-version":[{"id":10715,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/10711\/revisions\/10715"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=10711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=10711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=10711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}