Integrating Live Web (AspNet Signal-R) in a Web Site - Part 1

 

In This Post

I've broken this topic into a few posts because there are several steps to successfully get up and running with Signal-R in a Visual Studio/AspNet Signal-R implementation.

In this post I'll be covering how to create the VS Solution/Project and importing the needed NuGet packages.

Introduction - Signal-R 101

I have a project that I want to integrate some elements of Live Web (Signal-R).  Signal-R is a technology that allows a client application (desktop, web, mobile) to  connect to server based Hub.  Once connected, the client can call methods on the Hub and the Hub can call methods on the client.  I guess in the old days we called this RPC (remote procedure calls).  The most typical implementation of Signal-R is to support live chat. In a live chat scenario, the parties connect to a common group on the Hub and then send messages (by calling a Hub method).  The Hub receives the message and then calls a client method for clients connected to the common group.  The client method handles the Hub call by displaying the message on the chat screen.  

Another common use of Signal-R is on-line gaming.  Game participants connect to a common group on the Hub and methods on the Hub and client allow them to experience the game together in real time.

Scope

I won't be going into the details of how Signal-R works (heck, I don't even know a lot of it).  I will instead be focused on how to implement the technology in a Visual Studio (v. 2022) web site running only HTML 5, CSS, JavaScript and C# with .Net WebApi 2.1 Controllers.  The target deployment for my application is Azure App Service - but the principles I'll be showing are generic enough to translate to a broad range of deployments.

Application Architecture

"Architecture" might be overstating it.  I do these projects, in large part, to force myself to learn and keep up with technology changes in my corner of the technology world (mostly, Microsoft stack).  NOTHING about the code you'll see or the approaches taken would reflect a production implementation.... 

Let's Get Started - Create a new Project in Visual Studio

As mentioned, I'm using VS 2022.  The screen shots you'll see are from that version.

First, create a new Project by opening VS and clicking the "Create a new project" button under "Get Started"

On the Template dialog, set the Languages drop down to C# and the Project Type drop down to Web.  There are a lot of choices, but if you want to follow along with the Blog, scroll down and double-click the ASP.NET Web Application (.Net Framework) template.

This brings you to the Configuration dialog. Here, you'll want to enter a Project Name (maybe something like MySignalRWebSite) and Solution Name (maybe SignalRProjects).  You can also designate a Location of your choice and the Framework version (my project is 4.7.2).  Click "Create" when you're ready.

The final dialog offers choices for building out the infrastructure to support various technologies.  On this dialog, select Empty and then check the Web Api option.  One of the things I wanted to experiment with on this project is "rolling my own" Single Page Application (SPA).  There are some great frameworks out there for accomplishing this (Angular, for example), but I wanted to see what it takes to create an SPA without an additional framework.  Click Create when you're ready.

Visual Studio will create the new project based on the choices you've made.  You should see an Overview tab like this

And the Solution Explorer should look like this

As you can see, Visual Studio built out the infrastructure needed to support WebApi 2.1 Controllers as well as other basics.

NuGet Packages

In order to support Signal-R, we'll have to import some NuGet Packages.  In the Solution Explorer, right click your Project and select Manage NuGet Packages...  The Package Manager defaults to show you the installed packages.  Click the Browse option in the upper left of the dialog and in the search bar enter Microsoft.AspNet.SignalR.  When the list filters, select Microsoft.AspNet.SignalR  and select Install.  

Installing Microsoft.AspNet.SignalR will likely also install the following required packages.  Check your list by clicking the Installed button and clearing the search box of any data.  

• jQuery
• Microsoft.AspNet.SignalR
  
• Microsoft.AspNet.SignalR.Core
• Microsoft.AspNet.SignalR.JS
• Microsoft.AspNet.SignalR.SystemWeb
• Microsoft.Owin
• Microsoft.Owin.Host.SystemWeb
• Microsoft.Owin.Security
• Newtonsoft.Json
• Owin

If you are missing any of these, you can install them individually by going back to the Browse section and searching for them.

Wrap up Part 1

That should do it!  In Part 2 of this series we'll take care of some application start-up configuration and the creation of the SignalR hub that our site will communicate with.