Huh that is a looong title for a blog post :). It is easier for me to write these all in one post since they are related the code in this case. So here I go, bear with me, it’s going to be alot of stuff and code.
The codes and examples here are from the own personal technology workbench project hosted in Azure. More code and examples how these features and functionality work can be found here.
I will go in the following order with the topics covered in this post:
- Notification Hub
- Setting up the Azure Service Bus – Notification Hub
- Connecting with a .NET Client and sending messages
- Connecting and listening to messages with an Android device client
- SignalR Hub
- Setting up a Azure hosted SignalR hub
- Connecting and listening to activities with the following clients:
- Connecting with the .NET Client
- Connecting with the JavaScript client
- Connecting with the Android client
Notification Hub
Some links to get you started:
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-push-notifications-app-users/
Setting up the Azure Service Bus – Notification Hub
I wont go into much details here. Microsoft has done a great job documenting these steps, I recommend you go to the following link and follow the first part of these instructions:
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/
What you will need for my code example is a Google Developer account and a API Key from google to be able to send and receive GCM messages to Android devices. Of course you will also need a Azure account to be able to create the notification hub.
Add the following Nugget package:
Microsoft Azure Service Bus
Connecting with a .NET Client and sending messages
The code below will connect from a .NET Client to the Notification Hub. This is done in the class constructor. At the moment this code can only send GCM messages to Android devices. Note that these operations are asynchronous.
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessTrackerLibrary/ServiceBus/NotificationGateway.cs
But you could use a "central" hub from where to send these messages which will handle sending messages to different devices through a WebAPI:
https://github.com/lionadi/MyFitnessTracker/tree/master/FitTrackerHubCentral
https://github.com/lionadi/MyFitnessTracker/blob/master/FitTrackerHubCentral/FitTrackerHubCentral/Controllers/NotificationsController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.ServiceBus.Notifications;
namespace MyFitnessTrackerLibrary.ServiceBus
{
// TODO: Replace this with a connection to the notification central hub, do not sent message directly from here in the future!!!!
public class NotificationGateway
{
private NotificationHubClient hub = null;
private static NotificationGateway _notificationGateway;
public NotificationGateway()
{
hub = NotificationHubClient.CreateClientFromConnectionString(MyFitnessTrackerLibrary.Globals.MyFitAppSettings.NotificationHubConnectionString, MyFitnessTrackerLibrary.Globals.MyFitAppSettings.NotificationHubName);
}
~NotificationGateway()
{
}
public async Task<NotificationOutcome> SendMessage(string message)
{
var toast = "{ \"data\" : {\"message\":\"" + "From : " + message + "\"}}";
return await hub.SendGcmNativeNotificationAsync(toast);
}
public static NotificationGateway GetInstance()
{
if(_notificationGateway == null)
{
_notificationGateway = new NotificationGateway();
}
return _notificationGateway;
}
}
}
Connecting and listening to messages with an Android device client
The Android side is a bit more complicated and annoying. You have to do more work here.
At the first you need two Microsoft java libraries to be able to connect to a notification hub:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/libs/notification-hubs-0.4.jar
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/libs/notifications-1.0.1.jar
After this you need to add them to your Android Studio gradle file:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/build.gradle
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:21.0.3'
compile 'com.google.android.gms:play-services:6.5.87'
compile 'com.google.code.gson:gson:2.3.1'
compile files('libs/signalr-client-sdk.jar')
compile files('libs/notifications-1.0.1.jar')
compile files('libs/notification-hubs-0.4.jar')
compile files('libs/Java-WebSocket-1.3.0.jar')
compile project(':signalr-client-sdk-android-release')
}
Please remember to follow these instructions to setup your Android Studio project in a correct manner, more details here:
http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/
http://azure.microsoft.com/fi-fi/documentation/articles/notification-hubs-aspnet-backend-android-notify-users/
The most important piece of code is the class named MyHandler in this case which will handle your notifications once your device is registered to the notification hub:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MyHandler.java
package com.example.adriansimionescu.myfitnessandroidapp;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.NotificationCompat;
import com.microsoft.windowsazure.notifications.NotificationsHandler;
public class MyHandler extends NotificationsHandler {
public static final int NOTIFICATION_ID = 1;
private NotificationManager mNotificationManager;
NotificationCompat.Builder builder;
Context ctx;
static public MainActivity mainActivity;
@Override
public void onReceive(Context context, Bundle bundle) {
ctx = context;
String nhMessage = bundle.getString("message");
sendNotification(nhMessage);
mainActivity.DialogNotify("Received Notification",nhMessage);
}
private void sendNotification(String msg) {
mNotificationManager = (NotificationManager)
ctx.getSystemService(Context.NOTIFICATION_SERVICE);
PendingIntent contentIntent = PendingIntent.getActivity(ctx, 0,
new Intent(ctx, MainActivity.class), 0);
NotificationCompat.Builder mBuilder =
new NotificationCompat.Builder(ctx)
.setContentTitle("Notification Hub Demo")
.setStyle(new NotificationCompat.BigTextStyle()
.bigText(msg))
.setContentText(msg);
mBuilder.setContentIntent(contentIntent);
mNotificationManager.notify(NOTIFICATION_ID, mBuilder.build());
}
}</pre>
<pre>
You also need a class that will register you device to the notification hub:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/RegisterClient.java
package com.example.adriansimionescu.myfitnessandroidapp;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Set;
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.methods.HttpPut;
import org.apache.http.client.methods.HttpUriRequest;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.content.Context;
import android.content.SharedPreferences;
import android.util.Log;
public class RegisterClient {
private static final String PREFS_NAME = "ANHSettings";
private static final String REGID_SETTING_NAME = "ANHRegistrationId";
private String Backend_Endpoint;
SharedPreferences settings;
protected HttpClient httpClient;
private String authorizationHeader;
public RegisterClient(Context context, String backendEnpoint) {
super();
this.settings = context.getSharedPreferences(PREFS_NAME, 0);
httpClient = new DefaultHttpClient();
Backend_Endpoint = backendEnpoint + "/api/register";
}
public String getAuthorizationHeader() {
return authorizationHeader;
}
public void setAuthorizationHeader(String authorizationHeader) {
this.authorizationHeader = authorizationHeader;
}
public void register(String handle, Set<String> tags) throws ClientProtocolException, IOException, JSONException {
String registrationId = retrieveRegistrationIdOrRequestNewOne(handle);
JSONObject deviceInfo = new JSONObject();
deviceInfo.put("Platform", "gcm");
deviceInfo.put("Handle", handle);
deviceInfo.put("Tags", new JSONArray(tags));
int statusCode = upsertRegistration(registrationId, deviceInfo);
if (statusCode == HttpStatus.SC_OK) {
return;
} else if (statusCode == HttpStatus.SC_GONE){
settings.edit().remove(REGID_SETTING_NAME).commit();
registrationId = retrieveRegistrationIdOrRequestNewOne(handle);
statusCode = upsertRegistration(registrationId, deviceInfo);
if (statusCode != HttpStatus.SC_OK) {
Log.e("RegisterClient", "Error upserting registration: " + statusCode);
throw new RuntimeException("Error upserting registration");
}
} else {
Log.e("RegisterClient", "Error upserting registration: " + statusCode);
throw new RuntimeException("Error upserting registration");
}
}
private int upsertRegistration(String registrationId, JSONObject deviceInfo)
throws UnsupportedEncodingException, IOException,
ClientProtocolException {
HttpPut request = new HttpPut(Backend_Endpoint+"/"+registrationId);
request.setEntity(new StringEntity(deviceInfo.toString()));
request.addHeader("Authorization", "Basic "+authorizationHeader);
request.addHeader("Content-Type", "application/json");
HttpResponse response = httpClient.execute(request);
int statusCode = response.getStatusLine().getStatusCode();
return statusCode;
}
private String retrieveRegistrationIdOrRequestNewOne(String handle) throws ClientProtocolException, IOException {
if (settings.contains(REGID_SETTING_NAME))
return settings.getString(REGID_SETTING_NAME, null);
HttpUriRequest request = new HttpPost(Backend_Endpoint+"?handle="+handle);
request.addHeader("Authorization", "Basic "+authorizationHeader);
HttpResponse response = httpClient.execute(request);
if (response.getStatusLine().getStatusCode() != HttpStatus.SC_OK) {
Log.e("RegisterClient", "Error creating registrationId: " + response.getStatusLine().getStatusCode());
throw new RuntimeException("Error creating Notification Hubs registrationId");
}
String registrationId = EntityUtils.toString(response.getEntity());
registrationId = registrationId.substring(1, registrationId.length()-1);
settings.edit().putString(REGID_SETTING_NAME, registrationId).commit();
return registrationId;
}
}
After all these steps and setups you can finally go to your activity and add the following pieces of codes to fire up the connection and start listening to messages:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MainActivity.java
import com.microsoft.windowsazure.messaging.*;
import com.microsoft.windowsazure.notifications.NotificationsManager;
// Define this properties in you activity class</pre>
<pre>private RegisterClient registerClient;
private String SENDER_ID = "";
private GoogleCloudMessaging gcm;
private NotificationHub hub;
private String HubName = "fittracker";
private String HubListenConnectionString = "";</pre>
<pre>
@SuppressWarnings("unchecked")
private void registerWithNotificationHubs() {
new AsyncTask() {
@Override
protected Object doInBackground(Object... params) {
try {
String regid = gcm.register(SENDER_ID);
DialogNotify("Registered Successfully", "RegId : " +
hub.register(regid).getRegistrationId());
} catch (Exception e) {
DialogNotify("Exception",e.getMessage());
return e;
}
return null;
}
}.execute(null, null, null);
}
/**
* A modal AlertDialog for displaying a message on the UI thread
* when theres an exception or message to report.
*
* @param title Title for the AlertDialog box.
* @param message The message displayed for the AlertDialog box.
*/
public void DialogNotify(final String title,final String message)
{
final AlertDialog.Builder dlg;
dlg = new AlertDialog.Builder(this);
runOnUiThread(new Runnable() {
@Override
public void run() {
AlertDialog dlgAlert = dlg.create();
dlgAlert.setTitle(title);
dlgAlert.setButton(DialogInterface.BUTTON_POSITIVE,
(CharSequence) "OK",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
dlgAlert.setMessage(message);
dlgAlert.setCancelable(false);
dlgAlert.show();
}
});
}</pre>
<pre>
So the first function will register you device and the next one will create a notification with a message in your device. Next you create the connection with this piece of code:
<pre>MyHandler.mainActivity = this;
NotificationsManager.handleNotifications(this, SENDER_ID, MyHandler.class);
gcm = GoogleCloudMessaging.getInstance(this);
hub = new NotificationHub(HubName, HubListenConnectionString, this);
registerWithNotificationHubs();</pre>
Notice how you pass your activity instance you the myhandler class. This is important.
And that’s it :D. Simple yet alot of work. Luckily Microsoft has made a good job documenting these steps. If in trouble don’t hesitate to look up on some documentation.
SignalR Hub
Implementing SignalR on the .NET side is rather easy BUT there is so much automation that it simply feel weird :). Everything seems to work if you just follow the instuctions but as I noticed one you poke around custom authentication and authorization you can really mess thing up. For example I wanted to add to my SignalR hun web project EDM mapping to a database or a custom authentication, well I made the mistake of choosing to use Entity Framework version 6.0 which uses a different version of Newtonsoft.json library which caused all sorts of problems. Another issue which I ran into was that I create a connection identification by client ID to be able to notify the client devices and services of changes within my system. At one point I did a simple mistake of forgeting to pass on the identification information which lead to weird errors on the client side browser such as IE and Chrome. The errors had nothing to do with the fact that the connection failed on the server side because the user ID was missing. The browsers expressed errors related to CORS which made no sense since I configured CORS support. So just be careful.Setting up a
Azure hosted SignalR hub
Start by looking at this source:
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr
To host my SignalR hub in Azure I simply created an empty web application and followed the instructions in the link above. Sample code:
https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/ChatHub.cs
https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/index.html
Also include the following SignalR nuget package:
Microsoft ASP .NET SignalR (to be able to host)
Microsoft ASP .NET Cross-Origin Support
Windows Azure Storage
Lets look at bit more closely at the ChartHub:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using SignalRGateway.AzureTableStorage;
using System.Configuration;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Table;
using MyFitnessTrackerLibrary.Globals;
namespace SignalRGateway
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
var queryResult = this.SendMessageTo(name, message);
foreach (var entity in queryResult)
{
Clients.Client(entity.RowKey).broadcastMessage(name, message);
}
}
public void IsDataUpdateRequiredForWeb(string name, bool isRequired, string message)
{
var queryResult = this.SendMessageTo(name, message);
foreach (var entity in queryResult)
{
Clients.Client(entity.RowKey).isDataUpdateRequiredForWeb(name, isRequired, message);
}
Clients.All.isDataUpdateRequiredForWeb(name, isRequired, message);
}
public void IsDataUpdateRequiredForMobileClient(string name, bool isRequired, string message)
{
var queryResult = this.SendMessageTo(name, message);
foreach (var entity in queryResult)
{
Clients.Client(entity.RowKey).isDataUpdateRequiredForMobileClient(name, isRequired, message);
}
}
private List<ConnectionEntity> SendMessageTo(String who, String message)
{
//var name = Context.User.Identity.Name;
var name = this.GetConnectionUser();
if (!String.IsNullOrEmpty(name))
{
var table = GetConnectionTable();
// Notice that the partition keys are stored in azure storage as lower case
var query = new TableQuery<ConnectionEntity>()
.Where(TableQuery.GenerateFilterCondition(
"PartitionKey",
QueryComparisons.Equal,
who.ToLowerInvariant()));
var queryResult = table.ExecuteQuery(query).ToList();
if (queryResult.Count == 0)
{
Clients.Caller.showErrorMessage("The user is no longer connected.");
}
else
{
// Load only once the host application connections to display the data there
if(queryResult.Count(o=>o.PartitionKey.Equals(Constants.SignalR_HostApplicationUserName.ToLowerInvariant())) <= 0)
queryResult.AddRange(this.SendMessageTo(Constants.SignalR_HostApplicationUserName, message));
return queryResult;
}
}
return new List<ConnectionEntity>();
}
// This assumes that "normmaly" all others clients than the host SignalR web application (this app) will use header named as username for user identification. The SignalR web app will user querystring.
private String GetConnectionUser()
{
var name = Context.Headers[Constants.SignalR_HeaderID_Username];
if (String.IsNullOrEmpty(name))
{
name = Context.QueryString[Constants.SignalR_HeaderID_Username];
}
if (String.IsNullOrEmpty(name))
return null;
// Notice that the partition keys are stored in azure storage as lower case
return name.ToLowerInvariant();
}
public override Task OnConnected()
{
//var name = Context.User.Identity.Name;
var name = this.GetConnectionUser();
if(!String.IsNullOrEmpty(name))
{
var table = GetConnectionTable();
var created = table.CreateIfNotExists();
var entity = new ConnectionEntity(
name.ToLower(),
Context.ConnectionId);
var insertOperation = TableOperation.InsertOrReplace(entity);
table.Execute(insertOperation);
}
return base.OnConnected();
}
public override Task OnDisconnected(bool stopCalled)
{
//var name = Context.User.Identity.Name;
var name = this.GetConnectionUser();
if (!String.IsNullOrEmpty(name))
{
var table = GetConnectionTable();
var deleteOperation = TableOperation.Delete(
new ConnectionEntity(name, Context.ConnectionId) { ETag = "*" });
table.Execute(deleteOperation);
}
return base.OnDisconnected(stopCalled);
}
private CloudTable GetConnectionTable()
{
var storageAccount =
CloudStorageAccount.Parse(
MyFitnessTrackerLibrary.Globals.MyFitAppSettings.AzureTableStorageConnectionString);
var tableClient = storageAccount.CreateCloudTableClient();
var table = tableClient.GetTableReference("connection");
return table;
}
}
}
In my code example connections are stored and managed in Azure Table Storage(check the link below how to create one):
http://azure.microsoft.com/en-us/documentation/articles/storage-dotnet-how-to-use-tables/
When you connect to the hub you will enter the OnConnected() function. Here my implementation seeks for the username header value or QueryString username value(this is to just go around a problem in JavaScript client which I did not want to spend to much time on). After this we connect to the Azure Table Storage and add a new connection to the table.
When disconnecting the reverse is done to the Azure Storage Table.
The GetConnectionTable() function will open a connection to the storage table(check from azure management web console for your connection data).
The SignlarR has threee function which will send information to listening clients based on connection IDs:
- Send
- IsDataUpdateRequiredForWeb
- IsDataUpdateRequiredForMobileClient
The SendMessageTo() function is used to get all of the connection for a user name which needs to be notified of updates.
The code is pretty simple an easy. Microsoft has done a great job documenting this: http://www.asp.net/signalr
Last thing which I recommend to do is to configure CORS support:
https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/Startup.cs
// Branch the pipeline here for requests that start with "/signalr"
app.Map("/signalr", map =>
{
// Setup the CORS middleware to run before SignalR.
// By default this will allow all origins. You can
// configure the set of origins and/or http verbs by
// providing a cors options with a different policy.
map.UseCors(CorsOptions.AllowAll);
var hubConfiguration = new HubConfiguration
{
// You can enable JSONP by uncommenting line below.
// JSONP requests are insecure but some older browsers (and some
// versions of IE) require JSONP to work cross domain
// EnableJSONP = true
};
// Run the SignalR pipeline. We're not using MapSignalR
// since this branch already runs under the "/signalr"
// path.
map.RunSignalR(hubConfiguration);
});
Simply copy&paste the code above to get it to work but notice that it will allow requests from all possible connections.
http://www.asp.net/signalr/overview/security/introduction-to-security#csrf
Connecting and listening to activities with the following clients:
You will need to import the following libraries in Visual Studio to get you clients to work on SignalR:
Microsoft ASP .NET SignalR .NET Client
Microsoft ASP .NET SignalR JavaScript Client
Connecting with the .NET Client
The .NET Client code is pretty easy to understand:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Client;
using System.Threading.Tasks;
using MyFitnessTrackerLibrary.ServiceBus;
using MyFitnessTrackerLibrary.Globals;
namespace MyFitnessTrackerLibrary.SignalRLogic
{
public class HubGateway
{
private String hubLocation = MyFitAppSettings.SignalRHubHostLocation;
private static HubGateway _hubGateway = null;
private String hubProxyName = MyFitAppSettings.SignalRHubProxy;
private IHubProxy hubProxy = null;
private HubConnection hubConnection = null;
private String sourceID = "NO ID";
public IHubProxy HubProxyPoint
{
get { return this.hubProxy; }
}
public String SourceID
{
get
{
return this.sourceID;
}
set
{
this.sourceID = value;
}
}
public HubGateway()
{
hubConnection = new HubConnection(this.hubLocation);
hubProxy = hubConnection.CreateHubProxy(hubProxyName);
}
~HubGateway()
{
this.Stop();
}
public async Task SendNormalMessage(String name, String message)
{
await this.Start(name);
await this.HubProxyPoint.Invoke("Send", name, message + " #Source ID: " + this.sourceID);
}
public async Task IsDataUpdateRequiredForWeb(String name, bool isRequired, String message)
{
await this.Start(name);
await this.HubProxyPoint.Invoke("IsDataUpdateRequiredForWeb", name, isRequired, message + " #Source ID: " + this.sourceID);
await NotificationGateway.GetInstance().SendMessage("New data was added. Your UI is updated/updating.");
}
public async Task IsDataUpdateRequiredForMobileClient(String name, bool isRequired, String message)
{
await this.Start(name);
await this.HubProxyPoint.Invoke("IsDataUpdateRequiredForMobileClient", name, isRequired, message + " #Source ID: " + this.sourceID);
await NotificationGateway.GetInstance().SendMessage("New data was added. Your UI is updated/updating.");
}
public static HubGateway GetInstance()
{
if( _hubGateway == null)
{
_hubGateway = new HubGateway();
}
return _hubGateway;
}
public async Task Start(String userName)
{
if (hubConnection.State == ConnectionState.Disconnected)
{
if(!this.hubConnection.Headers.ContainsKey(Constants.SignalR_HeaderID_Username))
this.hubConnection.Headers.Add(new KeyValuePair<string, string>(Constants.SignalR_HeaderID_Username, userName));
await hubConnection.Start();
}
}
public void Stop()
{
hubConnection.Stop();
}
}
}
The important part in this code in when you call the Invoke() function to invoke in the SignalR hub the needed function and notify registered clients of updates.
The second important part is the Start() function. We add the username data in the connection, this way the hub knows where to send the messages/updates requests. Yes I know there is a bug in the code above, only one user will receive messages from this piece of code. I haven’t got around to fix this in my original project but it’s a simple matter.
Connecting with the JavaScript client
</pre>
<pre>
var connection = $.hubConnection(Constants.SignalRGatewayLocation);
connection.qs = { "username": CookieHelper.UserName };
var contosoChatHubProxy = connection.createHubProxy(Constants.SignalRHubProxyName);
contosoChatHubProxy.on(Constants.SignalRHubMethod_IsDataUpdateRequiredForWeb, function (name, isRequired, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
//var encodedMsg = $('<div />').text("isDataUpdateRequiredForWeb is Update Required: " + isRequired + " Message: " + message).html();
var encodedMsg = $('<div />').text("Updating UI. New data from the mobile app.").html();
// Add the message to the page.
$('#notifications').append('<ul><li><strong>' + encodedName
+ '</strong>: ' + encodedMsg + '</li></ul>');
highChartsController.LoadProperChartByUserSelection();
});
connection.start()
.done(function () {
console.log('Now connected, connection ID=' + connection.id
);
})
.fail(function () {
console.log('Could not connect');
});
The code above is rather simple. You create a connection, define the hub name, register to a function on the SignalR hub and start the connection.
The only “weird” part is that the username is passed in the QueryString and not in the header. This was due to a problem which I could not fix and had to go around. There might be a better solution out there.
Connecting with the Android client
Now here comes the hard part. Getting SignalR to work on android was a pain in the but :). Lots of weird problems and lack or proper documentation.
To start with you will need this library downloaded and compiled in Android Studio(or some other Java development tool you are using).
https://github.com/SignalR/java-client
You also might need the following library:
http://java-websocket.org/
Then a good place to go next would be:
https://whathecode.wordpress.com/2014/03/20/getting-started-with-the-java-signalr-sdk/
BUT the example above did not work for me as it was stated in the example. Here what I had to do:
Add to your Android project these libraries:
signalr-client-sdk.jar
Java-WebSocket-1.3.0.jar
signalr-client-sdk-android-release.aar
The following libraries can be added from Android Studio UI: File -> Project Structure. Then add a new library from the plus icon and in the new popup select the “import .JAR or .AAR Package”.
Your gradle file should look something like this:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:21.0.3'
compile 'com.google.android.gms:play-services:6.5.87'
compile 'com.google.code.gson:gson:2.3.1'
compile files('libs/signalr-client-sdk.jar')
compile files('libs/notifications-1.0.1.jar')
compile files('libs/notification-hubs-0.4.jar')
compile files('libs/Java-WebSocket-1.3.0.jar')
compile project(':signalr-client-sdk-android-release')
}
The next step is to start to create a background service in Android that will be able to communicate with your desired activity.
We Start this by defining a interface which is implemented in the activity:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/ServiceCallbacks.java
package com.example.adriansimionescu.myfitnessandroidapp;
public interface ServiceCallbacks {
void updateUI();
}</pre>
<pre>// To implement it in your activity:</pre>
<pre>public class MainActivity extends ActionBarActivity implements ServiceCallbacks {
...
}
Next we create the background service:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/SignalRService.java
package com.example.adriansimionescu.myfitnessandroidapp;
import android.app.IntentService;
import android.app.Service;
import android.content.Intent;
import android.os.Binder;
import android.os.IBinder;
import android.util.Log;
import android.widget.Toast;
import java.util.concurrent.ExecutionException;
import microsoft.aspnet.signalr.client.SignalRFuture;
import microsoft.aspnet.signalr.client.hubs.HubConnection;
import microsoft.aspnet.signalr.client.hubs.HubProxy;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler1;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler2;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler3;
import microsoft.aspnet.signalr.client.transport.ClientTransport;
import microsoft.aspnet.signalr.client.transport.ServerSentEventsTransport;
public class SignalRService extends Service {
// Binder given to clients
private final IBinder binder = new LocalBinder();
// Registered callbacks
private ServiceCallbacks serviceCallbacks;
// Class used for the client Binder.
public class LocalBinder extends Binder {
SignalRService getService() {
// Return this instance of MyService so clients can call public methods
return SignalRService.this;
}
}
@Override
public IBinder onBind(Intent intent) {
return binder;
}
@Override
public void onCreate() {
super.onCreate();
}
public void setCallbacks(ServiceCallbacks callbacks) {
this.serviceCallbacks = callbacks;
}
@SuppressWarnings("deprecation")
@Override
public void onStart(Intent intent, int startId) {
super.onStart(intent, startId);
Toast.makeText(this, "Service Start", Toast.LENGTH_LONG).show();
String server = Constants.SignalRGateway;
HubConnection connection = new HubConnection(server);
connection.getHeaders().put("username", UserDataContainer.LoginData.userName);
HubProxy proxy = connection.createHubProxy(Constants.SignalRHubName);
//SignalRFuture<Void> awaitConnection = connection.start();
// This was added to get around a websocket problem with Android devices to the SignalR hub hosted in Azure
ClientTransport transport = new ServerSentEventsTransport(connection.getLogger());
SignalRFuture<Void> awaitConnection = connection.start(transport);
try {
awaitConnection.get();
proxy.subscribe(this );
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ExecutionException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//--------------------------------------------------------------------------------
}
public void Send( String name, String message )
{
final String fmessage = message;
final String fname = name;
}
public void IsDataUpdateRequiredForMobileClient( String name, boolean isRequired, String message ) {
final String fmessage = message;
final String fname = name;
final boolean fisrequired = isRequired;
if (serviceCallbacks != null) {
serviceCallbacks.updateUI();
}
}
@Override
public void onDestroy() {
super.onDestroy();
}
}
There are a few important function.
onBind() => Use this to bind the actual instance of the service from your activity
setCallbacks() => use this to create a connection to the activity class interface so that we can call a desired method in the activity when a singalr message is received.
To bind to the SignalR function and message you need to define methods that use the same names as in the hub.
IsDataUpdateRequiredForMobileClient() and Send()
After the connection in made you need to call the subscribe method in the proxy class and pass the service class as a parameter. This will allow the binding between the defined methods above with the one in the SignalR hub.
The last part of the puzzle is that we call the interface function updateUI() which will trigger the same function in the activity to trigger and allow you to perform something in the activity.
Then all you have to do is to create the service instance in the activity, bind it and start it:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MainActivity.java
private SignalRService signalRService;</pre>
<pre>@Override
protected void onStart() {
super.onStart();
// Bind to LocalService
Intent intent = new Intent(this, SignalRService.class);
bindService(intent, serviceConnection, Context.BIND_AUTO_CREATE);
// Do this to avoid starting multiple service, only one is needed
if(this.signalRService == null) {
this.startService(intent);
}
}
@Override
protected void onStop() {
super.onStop();
// Unbind from service
if (bound) {
this.signalRService.setCallbacks(null); // unregister
unbindService(serviceConnection);
bound = false;
}
}
/** Callbacks for service binding, passed to bindService() */
private ServiceConnection serviceConnection = new ServiceConnection() {
@Override
public void onServiceConnected(ComponentName className,
IBinder service) {
// cast the IBinder and get MyService instance
SignalRService.LocalBinder binder = (SignalRService.LocalBinder) service;
signalRService = binder.getService();
bound = true;
signalRService.setCallbacks(MainActivity.this); // register
}
@Override
public void onServiceDisconnected(ComponentName arg0) {
bound = false;
}
};
/* Defined by ServiceCallbacks interface */
@Override
public void updateUI() {
// update your UI here
}
In the OnStart() and OnStop() functions we bind and start the service.
In the serviceConnection class instance we do the actual binding and notice how the code maps the activity to the service to be able to call the updateUI() function below.
The End
Huh, a long post but I hope you got the idea how to use notification hub, azure table storage and singnalr to communicate between different service and devices in different manner. SignalR is pretty cool what you can do with it. Especially with games and backend stuff. Cool 🙂