The Old Dev Guy: Integrating Live Web (AspNet Signal-R) in a Web Site

In This Post

This will be the final post of the AspNet SignalR series. In this post, we will create a controller class that can be used to send messages from a REST WebApi to clients connected to our SignalR hub (via our default.html web page).

Looking Back

In the first three posts of this series (links below), we created an AspNet empty web site with support for SignalR and WebApi. When the default.html page opens, the user is automatically joined to a Hub group called All. The hub responds by returning a list of all users currently joined to the All group and the web page displays that list. We can enter messages into a text box and see those messages displayed in a simple DIV - like a chat application.

Now it's time to look ahead....

Create a New Controller Class

Open your SignalRProjects solution in Visual Studio and right click the the Controllers folder under the MySignalRWebSite project (if you used different names, proceed accordingly). In the right click context menu, select Add >> Web Api Controller Class (v 2.1). Name the class SignalRController.cs.

Controller Class Code

Here is the code for the new controller class:

 using System;  
 using System.Collections.Generic;  
 using System.Web.Http;  
 using System.Configuration;  
 using Microsoft.AspNet.SignalR;  
 using Newtonsoft.Json;  
 namespace MySignalRWebSite.Controllers  
 {  
   public class SignalRController : ApiController  
   {  
     [HttpPost]  
     [AllowAnonymous]  
     public void PostHubMessage(HubMessage msg)   
     {  
       //this is the object the client web page is expecting  
       var sendMsg = new  
       {  
         groupName = msg.MessageToGroup,  
         userName = msg.MessageFrom,  
         message = msg.Message  
       };  
       //create the connection to the hub  
       IHubContext context = GlobalHost.ConnectionManager.GetHubContext<SignalRHub>();  
       //send the message by calling the client proxy method for all users connected to the group  
       context.Clients.Group(msg.MessageToGroup).processChatMessage(sendMsg);  
     }  
   }  
   public class HubMessage  
   {  
     public string Message { get; set; }   
     public string MessageFrom { get; set; }   
     public string MessageToGroup { get; set; }  
   }  
 }

You'll notice above that I have, for clarity, deleted the out-of-box template functions from the new class - you don't need to do that if you don't want to, but they are not needed for our purposes.

In place of those methods, we have added the PostHubMessage method. We have also added a simple data class (HubMessage) that defines the payload expected by the action whenever it is called.

There are 3 simple steps here:

Populate a new object from the incoming data
Connect to our SignalR Hub
Use the connection to call the client side processChatMessage proxy function

The client proxy function will call a local JavaScript function that will in turn display the message

Testing the Api

We're going to test our Api using Postman - a great tool for this purpose. If you have other ways of testing, have at it!

If you don't have Postman and want to use it to test, download it from

https://www.postman.com

Once downloaded and installed, running the test is easy. First, run the VS site in debug mode. You may have to right click the default.html file and select Set Start Page from the menu. The site will open a browser window with a URL address something like

https://localhost:12345/default.html

Next, open Postman and click File >> New Tab. A new Tab will open looking like this

Change GET to POST. Copy the root of the URL from your browser and paste it into the Enter request URL textbox.

Add the following to the root URL you just copied

/api/SignalR/PostHubMessage

If you changed any of the naming suggested when we created the controller, you'll have to use your names here.

The last step before we test is to create a mock payload. Immediately below the URL you just entered, you'll see a Body option - click that. Click raw and select JSON from the select option that defaulted to Text. Now we can compose the payload in JSON format like this

 {  
   "Message":"Test from the SignalR controller",  
   "MessageFrom": "SignalR Controller",  
   "MessageToGroup": "All"  
 }

The screen should now look something like this

With your VS web site running, click the Send button. If everything is set up correctly we should see the message from Postman work its way through the SignalR controller and on to the client!

If this didn't work, go back through the SignalR controller and make sure that the code matches, allowing for any naming differences you may have implemented.

Full Demo

Wrap Up

In this series, we covered a lot of ground but at a very simplified level.

Created a New Solution/Project in Visual Studio

AspNet Framework, Empty, WebApi

Downloaded the necessary NuGet packages to support desired functionality
Created C# classed for to support our SignalR hub

Startup.cs
SignalRHub.cs

Created an HTML page (default.html) with JavaScript to interact with the SignalR Hub
Created a C# SignalR controller (SignalRController.cs) to interact with connected users
Tested the API with Postman

At the end of this series, you should have a functioning SignalR-ready web site (however simple) that can allows communication between users and external clients through the Hub or the API.

Series Links

PostMan: https://www.postman.com