Real-Time Android and iOS Apps using SignalR Core (ASP.NET Core 2.0)

Last year I tried and make an article on Windows 10 UWP app for Desktop and Windows Mobile (a.k.a. Windows Phone) to work with ASP.NET Core SignalR (the early version). As currently the ASP.NET Core team released the SignalR Core 1.0.0-alpha1-final and the .NET team has released the remarkable and awesome .NET Core 2.0, .NET Standard 2.0 and the latest Xamarin 2.4.0 that is compatible with .NET Standard 2.0, I would like to try this in Xamarin mobile apps that is for Android and iOS.

It turn out awesome and I love it. The demo that I created is a very simple UI (User Interface) of Label and Slider controls. Project on the solution:

 

Real-time hub API SignalR Core 1.0.0-alpha1-final ASP.NET Core 2.0
Mobile Client
(Android and iOS)
Xamarin.Forms Xamarin 2.4.0
.NET Standard 2.0

Tools that I use for building this project:

Dev Tools/IDE Visual Studio 2017 (Preview) Version 15.4 Preview 3.0
Hosting (Web App) Microsoft Azure App Services

And here is what you will get from this experiment.

Here is the link to the entire solution on my GitHub.

https://github.com/rizamarhaban/xamarinsignalrcore

Real-Time Hub API

First of all, create an ASP.NET Core 2.0 Web API project on Visual Studio as shown here:

Delete the Controllers folder and add Hubs folder. You don’t have to do this way, but I certainly would like to group hubs on a folder.

Add the SignalR Core packages through NuGet manager or console.

PM> Install-Package Microsoft.AspNetCore.SignalR.Core -Version 1.0.0-alpha1-final

Add a new class file, in my case I just name it MySignalRHub.cs and add these code:

This is the SignalR hub API and here what you would similar can do.

Before deploying this, we also need to do small configure the ASP.NET Core middleware in the Startup.cs file to use SignalR, CORS and Web Socket and here is what you need to do:

As you can see I also enable Web Sockets which leads us to enable it on Azure as well later.

Compile the project and you can test it by accessing the SignalR endpoint, in my case is:

http://localhost:5000/updater

If you manage to make to this point, we can now deploy this to cloud (Microsoft Azure) by Right-Click the project and choose Publish. You can either use Azure App Services or to your own VM if you already have one. In my case I just create a new Azure App Service (Web App).

As I mentioned earlier, we need to do one thing on Azure which is to enable the Web Sockets. In case of using Azure App Service, just go to your Web App and choose Application Settings. Select ‘On‘ for Web Sockets as shown below.

That’s all for the SignalR hub API and we are now have SignalR Core using ASP.NET Core 2.0 running on Microsoft Azure App Service.

Mobile Client (Xamarin.Forms)

Now, let’s make the mobile app and consume the SignalR hub. First things first is to create a new Cross-Platform project which is Xamarin.Forms using PCL. I name the solution as “MobileClient“.

And choose Blank App with Portable Class Library option for now. Later we convert this PCL to use .NET Standard 2.0.

I was hoping we have this option (just a simple idea). Let’s make a wish we have this option so we don’t have to manually tweak the project.

Also, in this solution, I canceled for the Windows UWP project creation. I only want to target Android and iOS for this demo.

.NET Standard 2.0 option idea

UPDATE: Luckily, I just get the answer from James Montemagno himself regarding this option.

 
Anyway, let’s update the project to use .NET Standard 2.0 for now. Add a new .NET Standard project on the solution, just name it anything you want. In my case, I just name it first as “MobileClientStandard“.

Secondly, move all the files from “MobileCient” PCL project to the “MobileClientStandard” project. That includes all the XAML files. Here are the steps we need to do:

  1. Delete the class1.cs file on the “MobileClientStandard“.
  2. Move all files (including all the XAML files) from “MobileCient” PCL project to “MobileClientStandard” project.
  3. Then, remove (delete) the “MobileClient” PCL project from the solution.
  4. Then, rename the “MobileClientStandard” back to “MobileClient“. This to make the Assembly name the same as the deleted PCL project.

Lastly, we need to replace the Xamarin.Forms library to the latest version that support .NET Standard. Open the NuGet packages for Solutions level,

And find Xamarin.Forms package and choose the latest Stable version. In my case is version 2.4.0.280 when this blog was created. (latest update: stable version 2.4.0.282).

Once everything done, we can add some codes now. First, add the SignalR client services and the View Model. Here is the folder structure that I made on the .NET Standard 2.0 class library project.

And here is the codes for SignalRClient.cs, ValueChangedEventArgs.cs and MainPageViewModel.cs.

 
SignalRClient.cs

 
ValueChangedEventArgs.cs

 
MainPageViewModel.cs

You just need to add one line of code on the MainPage.xaml.cs code behind file. this is like this:
 
MainPage.xaml.cs

The last part is the Xamarin.Forms XAML file. We only need to bind the SlideValue. Here is the code:
 
MainPage.xaml

Before you do test deploy to your mobile, make sure the SignalR endpoint is pointing to your Azure App Service web app. See the InitializeSignalR() method in SignalRClient.cs file.

And there you go! I hope you like it and happy coding… Enjoy!

 

Leave a Reply

Your email address will not be published. Required fields are marked *