Pushing Messages from Server to Client Using SignalR2 and MVC5

One of the biggest disadvantages of any web client is that they are stateless. They don't know if anything happens in the server side unless they request the information again and again. In this article you will learn a very useful way of pushing updates from the server to the client using SignalR. The idea behind this concept is very simple; I need to find a way to inform the user that there will be some maintenance occurring shortly on the site and that I need them to close the browser to avoid any data loss. 

This is a very simple and elegant way using the ASP.NET library SignalR. This amazing library is designed to use the existing web transport layer (HTML5 Websockets and other technologies for old browsers) and it's capable of pushing the data to a wide array of clients like web pages, windows apps, mobile apps, etc. It's extremely easy to use, real-time and it allows Developers to focus on real problem leveraging the communication issues to SignalR.

Overview

The image above shows the idea behind the implementation of the SignalR ecosystem. We need to be able to push a notification from a client and that this message gets broadcasted to every single client that's listening to the SignalR Hub.

Install SignalR

In order to use this functionality, first we need to install the SignalR (v2.2.1) library via NuGet package:

Create a folder called "Hub" in your main MVC solution and then add a new SignalR Hub class called NotificationHub.cs as show below:

This will create a class that inherits from the Hub base class.

Creating the Notification Hub

Copy the following template to generate the notification Hub. This Hub needs a method "Broadcast Message to Clients" which accepts a message as a string a user as a string and that every client will receive. It uses the Clients.All property to access all of the clients that are currently connected to the server (hub). This function is just a client side callback function that we will call from the client JavaScript side.

	//The MIT License (MIT)
	//Copyright (c) 2017 Jordi Corbilla
	//Permission is hereby granted, free of charge, to any person obtaining a copy
	//of this software and associated documentation files (the "Software"), to deal
	//in the Software without restriction, including without limitation the rights
	//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	//copies of the Software, and to permit persons to whom the Software is
	//furnished to do so, subject to the following conditions:
	//The above copyright notice and this permission notice shall be included in
	//all copies or substantial portions of the Software.
	//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	//THE SOFTWARE.
	using Microsoft.AspNet.SignalR;
	namespace MessageSystem
	{
	/// <summary>
	/// Notification Hub
	/// </summary>
	public class NotificationHub : Hub
	{
	/// <summary>
	/// Method to broadcast messages to clients
	/// </summary>
	/// <param name="message"></param>
	public void BroadcastMessageToClients(string message, string user)
	{
	Clients.All.newNotificationReceived(message, user);
	}
	}
	}

view raw NotificationHub.cs hosted with ❤ by GitHub

Next step is to create your Startup class where you will be able to enable SignalR. Under App_Start folder, create a new class called Startup,cs and add the following code:

	//The MIT License (MIT)
	//Copyright (c) 2017 Jordi Corbilla
	//Permission is hereby granted, free of charge, to any person obtaining a copy
	//of this software and associated documentation files (the "Software"), to deal
	//in the Software without restriction, including without limitation the rights
	//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	//copies of the Software, and to permit persons to whom the Software is
	//furnished to do so, subject to the following conditions:
	//The above copyright notice and this permission notice shall be included in
	//all copies or substantial portions of the Software.
	//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	//THE SOFTWARE.
	using Microsoft.Owin;
	using Owin;
	[assembly: OwinStartup(typeof(MessageSystem.App_Start.Startup))]
	namespace MessageSystem.App_Start
	{
	public class Startup
	{
	public void Configuration(IAppBuilder app)
	{
	app.MapSignalR();
	}
	}
	}

view raw Startup.cs hosted with ❤ by GitHub

This will allow you to map the available hubs using the Owin startup. Now that the Hub is ready, we need to focus on the client that will display the message received by it.

Showing the notification on the client

Now that the server side code is done, we need to be able to display the notification received by it on the client side. To do this we just need to add the relevant script references and the following code to the _layout.cshtml page:

	@*//The MIT License (MIT)
	//Copyright (c) 2017 Jordi Corbilla
	//Permission is hereby granted, free of charge, to any person obtaining a copy
	//of this software and associated documentation files (the "Software"), to deal
	//in the Software without restriction, including without limitation the rights
	//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	//copies of the Software, and to permit persons to whom the Software is
	//furnished to do so, subject to the following conditions:
	//The above copyright notice and this permission notice shall be included in
	//all copies or substantial portions of the Software.
	//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	//THE SOFTWARE.*@
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>@ViewBag.Title - Message System</title>
	<script src="~/Scripts/jquery-2.2.1.min.js"></script>
	<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
	<script src="~/signalr/hubs/" type="text/javascript"></script>
	<script type="text/javascript">
	$(function () {
	var notificationHub = $.connection.notificationHub;
	$.connection.hub.start().done(function () {
	console.debug('Connected to the notificationHub...');
	})
	notificationHub.client.newNotificationReceived = function (message, user) {
	$('#notification').empty();
	$('#notification').append('From: ' + user + ' Message: ' + message);
	}
	});
	</script>
	@Styles.Render("~/Content/css")
	@Scripts.Render("~/bundles/modernizr")
	</head>
	<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	@Html.ActionLink("Message System", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
	</div>
	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li>@Html.ActionLink("Home", "Index", "Home")</li>
	</ul>
	</div>
	</div>
	</div>
	<div class="container body-content">
	@RenderBody()
	<hr />
	<footer>
	<p>&copy; @DateTime.Now.Year - by Jordi Corbilla</p>
	</footer>
	</div>
	@Scripts.Render("~/bundles/bootstrap")
	@RenderSection("scripts", required: false)
	</body>
	</html>

view raw _layout.cshtml hosted with ❤ by GitHub

This page contains the jQuery and SignalR scripts, the SignalR Hub and the proxy hub object using the "var notificationHub = $.connection.notificationHub;" command. Notice that notificationHub starts with lower case. This is actually very important! because if you don't write it in lower case the reference will not work!.

The code works in the following way. When the client connects to the hub, the message "connected to the notification hub" should be visible in your browser console and when a new message is received, the div #notificaiton should empty itself and populate itself with the message received. This div sits on a separate page:

	@*//The MIT License (MIT)
	//Copyright (c) 2017 Jordi Corbilla
	//Permission is hereby granted, free of charge, to any person obtaining a copy
	//of this software and associated documentation files (the "Software"), to deal
	//in the Software without restriction, including without limitation the rights
	//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	//copies of the Software, and to permit persons to whom the Software is
	//furnished to do so, subject to the following conditions:
	//The above copyright notice and this permission notice shall be included in
	//all copies or substantial portions of the Software.
	//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	//THE SOFTWARE.*@
	@{
	ViewBag.Title = "Home Page";
	}
	<div class="jumbotron">
	<h1>Notification Window</h1>
	<div id="notification" class="lead" style="background-color:yellow;"></div>
	</div>

view raw Index.cshtml hosted with ❤ by GitHub

This is the aspect of the page without any notification:

Sending the notification to the client

Now the interesting part. To send the notification to the client, we can either create a separate screen on our MVC application, or just create a small utility to send the message separately. In this case I will choose the latter as it looks to me like a cleaner approach. So here is the code of my submit message functionality (WinForms) which allows me to send push notifications to all the clients connected to the Hub with just one click:

	//The MIT License (MIT)
	//Copyright (c) 2017 Jordi Corbilla
	//Permission is hereby granted, free of charge, to any person obtaining a copy
	//of this software and associated documentation files (the "Software"), to deal
	//in the Software without restriction, including without limitation the rights
	//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	//copies of the Software, and to permit persons to whom the Software is
	//furnished to do so, subject to the following conditions:
	//The above copyright notice and this permission notice shall be included in
	//all copies or substantial portions of the Software.
	//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	//THE SOFTWARE.
	using System;
	using System.Windows.Forms;
	using Microsoft.AspNet.SignalR.Client;
	using System.Globalization;
	namespace NotificationSender
	{
	public partial class Form1 : Form
	{
	HubConnection hubConnection;
	IHubProxy hubProxy;
	public Form1()
	{
	InitializeComponent();
	hubConnection = new HubConnection("http://localhost/ClientSite/signalr/hubs/");
	hubProxy = hubConnection.CreateHubProxy("NotificationHub");
	hubProxy.On<string>("newNotificationReceived", (message) => listBox1.BeginInvoke((MethodInvoker)delegate () { listBox1.Items.Add(string.Format("{0} Message sent: {1}", DateTime.Now.ToString("G", CultureInfo.CurrentCulture), message)); }));
	hubConnection.Start().Wait();
	}
	private void button1_Click(object sender, EventArgs e)
	{
	hubProxy.Invoke("BroadcastMessageToClients", textBox1.Text, "User1").Wait();
	textBox1.Text = "";
	}
	}
	}

view raw Form1.cs hosted with ❤ by GitHub

Here is the simple screen:

Finally, if you want to see the system in action, see the animation below for reference:

With this approach, you will be able to inform all your connected users easily, irrespective of the client technology or platform. The source code of the project is still not available on my GitHub page, but I will make sure to make it available so you can test it locally and see it by yourselves.

Jordi.