Weather Notification App Using SignalR

Introduction

SignalR is a library for .NET developers for adding real time functionality to the applications made using .NET technology (ASP.NET applications, C# console applications, WPF applications, Windows phone applications etc.). It is open source and you can download it from GitHub.

Here, we are going to create a simple weather notification app that will instantly notify all connected users about the changed weather (in real time).

Prerequisites

You should have the basic knowledge of the following.

• C#
• ASP.NET
• JavaScript
• jQuery
• Socket Communication (not necessary). Check out this article, if you want to understand the basics of socket communication.

Let’s start.

Create a new project

Create a new web project with the name WeatherAppDemo, using .NET Framework version 4.5. I am using .NET 4.5 because this will let us use the latest SignalR 2.x version.

Please do not change the name as I am going to use this namespace throughout the article.



I am creating an ASP.NET MVC project but you can create Web form or any ASP.NET technology project.

Adding SignalR Library

1. Open NuGet Package Manager.
   
   
   
   
2. Search SignalR in NuGet search and click on the very first Search Result, i.e. Microsoft ASP.NET SignalR.
   
   
   
   It will install all the libraries needed for creating the SignalR application. It will add both the server libraries and JavaScript client libraries.
   
   You must have noticed that there are many results of SignalR search. So, the question is what will happen if you click on others? Actually, they are separate libraries of SignalR for different purposes but we need the complete package because we are going to create SignalR Server as well as Client.
   
   
3. Add new folder in the project with the name of SignalR
   
   
   
   We are doing this in order to keep the code related to SignalR in a different folder.

Configuring SignalR

1. Creating hub class
   
   Add a new class in the SignalR folder with the name ChatHub and paste the below code.
   
   1. using Microsoft.AspNet.SignalR;
   2. using Microsoft.AspNet.SignalR.Hubs;
   3. using System;
   4. using System.Collections.Generic;
   5. using System.Linq;
   6. using System.Web;
   7. namespace WeatherAppDemo.SignalR {
   8. public class ChatHub: Hub {
   9. [HubMethodName("change_weather")]
   10. public void ChangeWeather(int temperature) {
   11. //Clients is ConnectionContext, it holds the information
   12. //about all the connection.
   13. //Others in 'Clients.Others' is holding the list of all
   14. //connected user except the caller user
   15. //(the user which has called this method).
   16. //NotifyUser is a function on the clientside, you will
   17. //understand it later.
   18. Clients.Others.NotifyUser(temperature);
   19. }
   20. }
   21. }
   What we are doing here -
   
   
1. The class ChatHub is inheriting a hub class, that means we are making the ChatHub class to act like a hub of the communication.
   
2. We have defined a ChangeWeather function which is taking a parameter, temperature, and it is calling NotifyUser of the client side with this parameter.
   
   
2. Mapping hubs to the SignalR pipeline
   
   Add a new class in the SignalR folder with name StartUp and paste below code in the StartUp.cs
   
   1. using Microsoft.Owin;
   2. using Owin;
   3. using System;
   4. using System.Collections.Generic;
   5. using System.Linq;
   6. using System.Web;
   7. [assembly: OwinStartup(typeof(WeatherAppDemo.SignalR.StartUp))]
   8. namespace WeatherAppDemo.SignalR {
   9. public class StartUp {
   10. public void Configuration(IAppBuilder app) {
   11. app.MapSignalR();
   12. }
   13. }
   14. }
   What we are doing here -
   
   
1. We are calling OwinStartup with parameter WeatherAppDemo.SignalR.StartUp, which will initialize our StartUp class.
2. In the StartUp class, we are using app.MapSignalR() – it will map SignalR hubs to the app builder pipeline. Simply, what it does is that it will add the hubs to the SignalR pipeline, so that you can access it through a URL. The URL of the SignalR is in the form of- <websiteurlwithport>/signalr.
   
   e.g-abc.com/signalr

So basically, we are doing two things- we are first starting the StartUp class and adding the hubs to the SignalR pipeline.

Now, compile the code and append this "/signalr/hubs" at the URL. You will have to add some JavaScript code. If you are able to see the JavaScript code, then you have successfully configured a SignalR Server.



Creating Client

Now, we need to create two clients,

• The first will change the weather while the second one will receive the notification.

Steps to create a basic JavaScript Client

• Create an HTML page.
• Include jquery.js library into that page. (You will find jQuery in the script folder).
• Include signalr.js library into that page.(You will find SignalR in the script folder).
• Add a script with the src=”/signalr/hubs”. (It is a JavaScript proxy generated by SignalR Server).
• Write some JS code to talk with the SignalR Server (I am going to write this code in the next paragraph).

Create ChangeWeather Client (ChangeWeather.html)

Follow the steps to create a basic JavaScript client and in the last step, paste the below code in the script tag.