Tag Archive: Facebook


Background

Recently, while working on a project, I stumbled upon a requirement to implement some sort a notification or alert mechanism in a web application. Due to the criticality of performance factors, the final solution would have to be implemented in such a way that it must not consume much server/client resources itself. Without having another thought I decided to try and implement a push based notification mechanism that can send messages to all the connected client as and when required.

What is SignalR?

SignalR is a library from Microsoft that can be easily integrated into any ASP.NET application targeting .NET Framework 3.5+. The library provides easy to integrate interfaces for implementing a push-based notification server and its consumers. The library exposes both high-level and low-level APIs which makes it flexible enough to be used in different kinds of scenarios. You can communicate with a SignalR server through JQuery, .NET based console applications, windows services, desktop applications & WPF applications. This library makes it vert easy to implement any real-time functionality in a web application that needs to send messages to connected clients without implementing any sort of polling mechanism. For communication, the library uses WebSockets wherever available and falls back to other standard communication techniques if it finds that WebSockets aren’t supported. For further details about the library, go to this link.

Implementing the Notification Server

You can easily create a notification server by using Hubs which is a way to implement a listener class in your web application. The Hub class hides all the low level connection management detail and exposes useful, high-level properties and functions to make your life easier. I’ll be creating an MVC 4 application but it should work with MVC 3 as well.

Open the Visual Studio (I am using 2012 express edition for Web) and create a new MVC 4 project. On the project template dialog, select Basic. After the project is created, right click on References (in Solution Explorer) and select ‘Manage NuGet Pacakges’. In package manager window select online from left and search SignalR. Refer to the image below:

manage-nuget

You’ll have to install Microsoft ASP.NET SignalR into your project as shown. The package manager will install all the related dependencies as well.

Now, create a new folder in your MVC application and name it Hubs and create a new class in that folder. You can name the class any way you like but it should inherit from Hub class. I am naming it NotificationHub. The full implementation of the class is as seen below:

notification-hub

Here, I have created one method for registering a client on its request. I am doing it this way so that server knows where to send a message in response. The class is also maintaining a collection of all the connected clients for use later on. I have also added an AddNotification method taking message and username as parameters so that the server knows which user to send message to. The AddNotification method can be called from any other client which needs to notify the web application’s clients about some event.
Also take a note of this statement –  Clients.Caller.addMessage(“‘” + userName + “‘ registered.”). The Caller property is dynamic type and the addMessage is actually a client method that the server is trying to call through SignalR interfaces. The method will be implemented in the web client through JQuery in next section.

Implementing a JQuery/JS Client

In your MVC application, add a new controller. The controller just needs to implement a single action method for this demo. Here I have created an Index action that is not doing anything but just calling its view.

Now add a view for the action that you have just created. Add the following code in your view.

@{

ViewBag.Title = “Index”;

}

<script src=”@Url.Content(“~/signalr/hubs”)” type=”text/javascript”></script>

<!–  Following scripts are created dynamically at runt –>

<script src=”~/signalr/hubs” type=”text/javascript”></script>

<script type=”text/javascript”>

$(function () {

$(“#sendControls”).hide(“fast”);

// Proxy created on the fly

var notificationHub = $.connection.notificationHub;

// Declare a function on the hub so the server can invoke it

notificationHub.client.addMessage = function (message) {

$(‘#messages’).append(“<li>” + message + “</li>”);

};

// Start the connection

$.connection.hub.start().done(function () {

$(“#register”).click(function () {

// Register client.

notificationHub.server.registerClient($(“#user”).val());

$(“#registration”).hide(“fast”);

$(“#sendControls”).show(“fast”);

});

$(“#send”).click(function () {

// Call the method on the server

notificationHub.server.addNotification($(“#msg”).val(), $(“#toUsr”).val());

});

});

});

</script>

<div>

<div id=”registration”>

<label>Username: </label>

<input type=”text” id=”user” />

<input type=”button” id=”register” value=”Register” /><br />

</div>

<div id=”sendControls”>

<label>To (Username): </label>

<input type=”text” id=”toUsr” /><br />

<label>Message (Username): </label>

<input type=”text” id=”msg” />

<input type=”button” id=”send” value=”Send” />

</div>

<ul id=”messages”>

</ul>

</div>

Some of the scripts that provide communication interfaces are generated dynamically. See the following script include:

<script src=”~/signalr/hubs” type=”text/javascript”></script>

You’ll also have to include the signalR js file (jquery.signalR-1.1.0.min.js) in order for the client to work properly.

The client creation steps are straight forward. First, you have to get the instance of the server hub which is done through the following statement:

var notificationHub = $.connection.notificationHub;

This line actually creates a Hub Proxy (see SignalR documentation to find out more about it). Since I named my server hub class as NotificationHub, the above statement uses $.connection.notificationHub. If your class name is Abc then you should use $.connection.abc (notice the change in first letter case of class name). After getting the instance of proxy, you’ll have to register all the client methods that you want your server to interact with. Here I have added only one method called addMessage. After that, you’ll need to start the hub connection. SignalR also exposes a done event which helps in registering a callback when the client has successfully established the connection to server. In that event, I have written a statement which is calling the server’s RegisterClient method. Notice how the case of the functions has changed to ‘registerClient’ instead of ‘RegisterClient’.

Here you go, you have written a client that can now interact with server by calling a method in the hub class. Also the server is able to call the client’s JS method whenever it wants.

To test the output, run the application. Enter a user name to register and click register. Open your application link in another browser window, type another username and click register. Now you can communicate between the two client application using the provided input controls. Each client window calls the Hub’s method at server and that method in return pushes some message to another client window by calling a JavaScript function at the client side. See the screenshot below.

running-app

Implementing a .Net Client

The .NET client application is similar to what we have done in the JQuery/JS client. I have created the following helper class that can easily be integrated to any .NET based client that needs to call a SignalR based Hub.

class NotificationClient

{

HubConnection _connection;

IHubProxy _proxy;

public bool IsConnectionOpen { get; set; }

public NotificationClient(string url, string hubName)

{

_connection = new HubConnection(url);

_proxy = _connection.CreateHubProxy(hubName);

}

public void AddClientMethod(string methodName, Action method)

{

if (IsConnectionOpen)

throw new InvalidOperationException(“Client methods cannot be added after a hub connection has been opened.”);

_proxy.On(methodName, method);

}

public void AddClientMethod<T1>(string methodName, Action<T1> method)

{

if (IsConnectionOpen)

throw new InvalidOperationException(“Client methods cannot be added after a hub connection has been opened.”);

_proxy.On(methodName, method);

}

public void AddClientMethod<T1, T2>(string methodName, Action<T1, T2> method)

{

if (IsConnectionOpen)

throw new InvalidOperationException(“Client methods cannot be added after a hub connection has been opened.”);

_proxy.On(methodName, method);

}

public void AddClientMethod<T1, T2, T3>(string methodName, Action<T1, T2, T3> method)

{

if (IsConnectionOpen)

throw new InvalidOperationException(“Client methods cannot be added after a hub connection has been opened.”);

_proxy.On(methodName, method);

}

public void AddClientMethod<T1, T2, T3, T4>(string methodName, Action<T1, T2, T3, T4> method)

{

if (IsConnectionOpen)

throw new InvalidOperationException(“Client methods cannot be added after a hub connection has been opened.”);

_proxy.On(methodName, method);

}

public void AddClientMethod<T1, T2, T3, T4, T5>(string methodName, Action<T1, T2, T3, T4, T5> method)

{

if (IsConnectionOpen)

throw new InvalidOperationException(“Client methods cannot be added after a hub connection has been opened.”);

_proxy.On(methodName, method);

}

public void AddClientMethod<T1, T2, T3, T4, T5, T6>(string methodName, Action<T1, T2, T3, T4, T5, T6> method)

{

if (IsConnectionOpen)

throw new InvalidOperationException(“Client methods cannot be added after a hub connection has been opened.”);

_proxy.On(methodName, method);

}

public void AddClientMethod<T1, T2, T3, T4, T5, T6, T7>(string methodName, Action<T1, T2, T3, T4, T5, T6, T7> method)

{

if (IsConnectionOpen)

throw new InvalidOperationException(“Client methods cannot be added after a hub connection has been opened.”);

_proxy.On(methodName, method);

}

public void CallServerMethod(string methodName, params object[] parameters)

{

if (!IsConnectionOpen)

throw new InvalidOperationException(“Hub connection must be opened before calling a server method.”);

_proxy.Invoke(methodName, parameters);

}

public T CallServerMethod<T>(string methodName, params object[] parameters)

{

if (!IsConnectionOpen)

throw new InvalidOperationException(“Hub connection must be opened before calling a server method.”);

return _proxy.Invoke<T>(methodName, parameters).Result;

}

public void OpenConnection()

{

_connection.Start().Wait();

IsConnectionOpen = true;

}

}

It is very easy to use the class in order to communicate with the SignalR Hub. See the following code:

NotificationClient client = new NotificationClient(“http://localhost/Notifications&#8221;, “NotificationHub”);
client.CallServerMethod(“AddNotification”, “Message”, “username”);

As you can see, implementing a real-time RPC calls from server-to-client and client-to-server becomes very much easier using SignalR library. The library is getting mature and current release is very much stable and provides enough funtionality for these type of scenarios.

We have been working since past few weeks on a new version of Sports Eye that is specific to the game of Soccer (Football). We have just released that version in the Android Market. The app follows freemium model having a less-featured free version and a Full version that’s ad-free and have more features.

Here’s the description text from the market:

“Follow the thrilling game of soccer (football) on your own Android phone. Get latest updates from famous news sources, expert opinions through top blogs and live scores at your fingertips. Find what your favorite players are up to by following them, track your favorite team in ranking tables and find upcoming matches through various schedules provided by the app. Share the updates with your friends on Facebook, Twitter and through email and SMS.

Tournaments: FIFA World Cup, UEFA, Premier League, La Liga, League One, League Two, FA Cup, Spanish Primera and others.
Players: Andres Iniesta,Carles Puyol,Carlos Tevez ,Cesc Fabregas,Cristiano Ronald,David Beckham,Diego Forlan,Fernando Torres ,Frank Lampard ,Johan Djourou,Kaka ,Lionel Messi ,Lukas Podolski,Nicolas Anelka,Robin Van Persie,Ronaldinho Gaucho,Ryan Babel,Steven Gerrard,Thierry Herny,Wayne Rooney,Xabi Alonso,Zlatan Ibrahimovic
Teams: Brazil, England, France, Italy, Australia, Spain, Germany, Argentina
Leagues: Arsenal, Manchester United, Chelea, Barcelona, Real Madrid, Liverpool
News Sources: ESPN, FIFA, Soccer League, Soccer News, UEFA News
Blogs: 101 Great Goals, EPL Talk, Kickette, NY Times, Pitch Invasion, Reuters, Soccer Lens
Live Scores: ESPN, Flash Score, Soccer Way, Sky Sports
Schedules: ESPN, BBC, Sky Sports
Tables: Sky Sports, BBC Sports”

Links to the market after the break.

Full Version: http://tinyurl.com/66zjr59
Lite Version: http://tinyurl.com/5szhhmf

Hit the following link to checkout the full review and guide to use the app.

http://www.sportsgeekery.com/2011/01/16/follow-the-australian-open-on-android-phone-with-sports-eye-tennis-special/#comment-1480

We have just released upgrades for both the Lite and Free versions of Sports Eye – Tennis app. The application now features a dashboard interface along with action bar for easy navigation and usability. User can now share the news item through virtually unlimited choices including Facebook, Twitter, SMS, MMS, Email and others.

Checkout the screenshots after the break.

 

DashboardNewsHelpScoresPreferences

eXcelarz Interactive just released another App in the Android Market. Made exclusively for cricket enthusiasts, this app features cricket news, live scores, blogs, player tweets, match schedules and various sharing options. Checkout the video walkthrough after the break.

 

Sports Eye Cricket Special–Feature Walkthrough

The first Grand Slams event of the year is about to begin in a few days time and with it, comes the eXcelarz’s Sports Eye Tennis Special app. The Tennis Special app retains the feature of the Sports Eye such as the ability to view news from various sources, read experts opinion through their blogs and stay in touch with players’ activities and staying updated with matches’ progress using Live Scores. Additionally, focusing on the Australian Open features such as Draws, Schedule of Play and tweets from official Tennis sources such as Australian Open, ATP, WTA and Tennis Channel have been added.

Now, you can relive the moments of Australian Open directly from your cell phone by downloading the app from market either by searching the title ‘Sports Eye Tennis Special’ or using the QR code given below. For complete feature list check Press Release section. The app is available in both lite and paid version.

Sports Eye Tennis Special Lite

Sports Eye Tennis Special Lite

Sports Eye Tennis Special Full

Sports Eye Tennis Special Full