Creating Manual Javascript SignalR Client

Introduction

The SignalR automatically creates the JavaScript proxy script, which helps us to create the SignalR client in JavaScript, but sometimes we don't want to use the proxy script or we are not able to use the proxy script.

Example

1. When the client is not running at the same Server, we want to write the proxy script by itself.
   
2. For security reasons, the SignalR Server is configured not to generate the proxy script.
   
3. You want to customize your SignalR client and want full control over your implementation etc.

Hence, I am going to explain how you can create the JavaScript SignalR client on your own without using the generated proxy.

I am going to create a weather app. It will be the same as my previous implementation of weather app, but instead of using the generated proxy script, I will write my own.

If you have not checked my previous article about – Creating a weather app, using SignalR, check it out at the link, given below.

• C#
• ASP.NET
• JavaScript
• jQuery
• Socket Communication (Not necessary)

Let’s start.

Create a new project

Create a new Web project with the name WeatherAppDemo with .NET framewrok 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 because I am going to use this namespace throughout the article.



Adding signalr Library

1. Open NuGet Package Manager.
   
   
   
   
2. Search SignalR in NuGet search and click on First Search Result.
   
   
   
   It will install all the libraries needed to create SignalR Application. It will add both the Server library and JavaScript client library.
   You will notice there are many results of SignaR search, so the question will be- 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 name SignalR.
   
   
   

I am doing this because I want to keep the code related to SignalR to a different folder.

Configuring signalr

1. Creating hub class
   Add a new class in the SignalR folder with the name ChatHub and paste the code, given below.
   
   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;
   8. namespace WeatherAppDemo.SignalR {
   9. public class ChatHub: Hub {
   10. [HubMethodName("change_weather")]
   11. public void ChangeWeather(int temperature) {
   12. //Clients is ConnectionContext, it holds the information about all the connection.
   13. //Others in 'Clients.Others' is holding the list of all connected user except the caller user
   14. //(the user which has called this method).
   15. //NotifyUser is a function on the clientside, you will understand it later.
   16. Clients.Others.NotifyUser(temperature);
   17. }
   18. }
   19. }
   WHAT WE ARE DOING HERE
   
   The class ChatHub is inhereting a hub class, that means we are making the ChatHub class act like hub of the communication.
   
   We have defined a ChangeWeather function, which is taking a parameter temperature and it is calling NotifyUser of the client side with the parameter temperature.
   
   
2. Mapping hubs to the SignalR pipeline
   Add a new class in the SignalR folder with the name StartUp and paste the code, given below, 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 the 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 with URL. The URL of the SignalR is in the form of- /SignalR.
   
   e.g abc.com/signalr
   
   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 some JavaScript code.

If you are able to see JavaScript code, then you have successfully configured a SignalR Server.



Creating Client

Hence, we need to create two clients, which are-

• First, who will change the weather?
• Second, who will receive the notification?

STEP TO CREATE A BASIC JAVASCRIPT CLIENT

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

CREATE CHANGEWEATHER CLIENT

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