Creating Live Scoring using SignalR, BootStrap CSS, HMTL5 and jQuery

ASP.NET SignalR is a library for ASP.NET developers that enables real-time communication on the web or desktop. It uses WebSockets of HTML5 API to enable bi-directional communication between the browser and server.

Applications SignalR can build:

• Chat
• customer support
• Gaming
• Live Scoring
• Live Trending (stock pricing, air flights, rates, exchange rates, survey)
• and many more…

In this article, we will be building online Live Scoring. The Scores will be feed in by an administrator and will be viewed by any client connected to the web.

Where is the Finished Product?



Screen Shots

Let us take a look at the LiveScore Application that we will be building.

The Admin Panel	The Viewer Panel

Technology Used

1. Visual Studio 2012/2013 (I used VS 2012 here but your can use VS 2013)
2. Microsoft.AspNet.SignalR (the version uses here is 2.1.0)
3. Asp.Net Empty Web Application
4. BootStrap.css
5. BootStrap.js
6. Glyphicons font
7. jQuery
8. CSS
9. Html

How to get SignalR?

Go to Package Manager Console and type Install-Package Microsoft.AspNet.SignalR or go to Package Manager (Manage Nuget Package) and select Microsoft ASP.NET SignalR.

SignalR Version
The version we will using here is Microsoft.AspNet.SignalR 2.1.0.

How Do We Build It?

1. First, created new project, use C#, ASP.NET Empty Web Application.
2. Install the Microsoft.AspNet.SignalR.
3. Start coding.

The Server Side

Create the Startup.cs

This class will simply start the SignalR api.

Startup.cs
Create the Proxy Hub

This is the class that client sides call upon whenever it pushes data. The server(ScoreHub.cs) can also call and pushes data on the client side by invoking the Clients class.

Note: When calling Client methods in c#, it should be in camel case.
eg: Clients.Caller.getScore(_score);

ScoreHub.cs

The Score.cs

This is a model where the score data will be stored.
Score.cs


The Client Side

We need 2 Html files and 1 JavaScript file.

• index.html = Viewers page
• admin.html = Admin page
• site.js  = Use in index.hml. It is use to communicate with the server(Hub Proxy) and vice versia.
• admin.js  = Use in admin.html. It is use to to communicate with the server(Hub Proxy) and vice versia.

index.html
admin.Html

The site.js

There is only one client method that the server can call (but you can add more) :

scoreHub.client.getScore

and there are 2 server methods that the site.js can call:

• Connect
• GameConfigure
• UpdateScore
• SendScore

Note: When calling Server methods in JavaScript, it should be in camel case.
eg: scoreHub.server.connect();

site.js



The admin.js

The admin use to configure game and send scores to viewers. There are 4 server methods that the admin.js can call:

• Connect
• GameConfigure
• UpdateScore
• SendScore

admin.js

Thank you! Hope this will help you make your web application "real time". Share it with friends...