Xamarin.Android - Realtime App with SignalR ASP.Net Core

Introduction

 

This article is all about developing real-life mobile applications in Xamarin.Android with SignalR ASP.Net Core.

 

 

 

What is SignalR?

 

SignalR is a library for asp.net developers that revamps the path toward adding progressing web value to applications. Consistent web convenience is the ability to have server code push substance to related clients immediately as it twists up recognizably available, rather than having the server site for a client to request new data.

 

Prerequisites

 

You are required to have basic knowledge of ASP.NET Core Web Application and intermediate level of knowledge Xamarin. Android and a basic idea of Microsoft Azure web app publishing.

1. SignalR browser Library
2. Microsoft Azure Account
3. Microsoft.AspNetCore.SignalR.Client
4. ASP.Net Core 2.2 or Above

Server Side Application

 

Step 1: - Create a Xamarin Android Project

 

Open Visual Studio-> New Project-> Templates-> Visual C#-> Web -> ASP.NET Core Web Application. Give the project name SignalRCoreServer and select Web Application.

 

(ProjectName: SignalRCoreServer)

 

Step 2: - Add Client-Side Library

 

Next, go to Solution Explorer-> Project Name-> then Right Click to Add and Select Client-Side Library.

 

 

Step 3: - Create Hubs Class

 

Next, go to Solution Explorer-> Project Name-> then Right Click to Add New Folder with name Hubs and inside this folder add a new class with name ViewHub.

 

(Folder Name: Hubs, File: ViewHub)

public class ViewHub : Hub
    {
        public async Task MoveFromServer(float x, float y)
        {
            Console.WriteLine("Receive position from Server: " + x + "/"+ y);
            await Clients.Others.SendAsync("ReceiveNewPosition", x, y);
        }
    }

Step 4 : - Configure Startup Class

 

Go to Startup.cs and Add the SignalR service to ConfigureServices Method and also add the following code to the configure method.

//Add to ConfigureServices Method

services.AddSignalR();

//Add to Configure Method

app.UseSignalR(routes =>
{
   routes.MapHub<ViewHub>("/movehub");
});

Step 5 : - Publish To Azure

 

For the sake of accessing this web app from anywhere, we will deploy to Microsoft Azure cloud by right-clicking on the project and hitting Publish.

 

 

 

This service successfully publishes on Microsoft Azure. Now everyone can use and access this service from the given URL.

 

http://signalrcoreserver.azurewebsites.net/

 

Client-Side

 

Step 1: - Create a Xamarin Android Project

 

Open Visual Studio-> New Project-> Templates-> Visual C#-> Android-> Blank app and give the project name XamarinSignalR.

 

(ProjectName: XamarinSignalR)

 

Step 2: - Add NuGet Package

 

After creating a blank project, first, add Microsoft.AspNetCore.SignalR.Client NuGet packages to this project by right-clicking on References and select manage NuGet packages.

 

Step 3: - Create a Layout

 

Next, open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open activity_main.axml file and add following code.

 

(FileName: activity_main.axml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<Button
       android:id="@+id/btn_start"
       android:text="START"
       android:layout_alignParentBottom="true"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>
    <View
        android:id="@+id/view_move"
        android:background="@color/colorAccent"
        android:layout_width="100dp"
        android:layout_height="100dp"/>
</RelativeLayout>

Step 4 : - Main Activity

 

Now, go to solution Explorer-> Project Name-> MainActivity file and add the following code and use appropriate namespaces.

 

(FileName: MainActivity.cs)

public class MainActivity : AppCompatActivity, IOnTouchListener
    {
        Button btn_start;
        View view_move;

        HubConnection hubConnection;
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            SetContentView(Resource.Layout.activity_main);

            btn_start = FindViewById<Button>(Resource.Id.btn_start);
            view_move = FindViewById<View>(Resource.Id.view_move);

            hubConnection = new HubConnectionBuilder().WithUrl("https://signalrcoreserver.azurewebsites.net/movehub").Build();

            hubConnection.On<float, float>("ReceiveNewPosition", (x, y) =>
             {
                 view_move.SetX(x);
                 view_move.SetY(y);
             });

            btn_start.Click += async delegate
            {
                if (btn_start.Text.ToLower().Equals("start"))
                {
                    if(hubConnection.State == HubConnectionState.Disconnected)
                    {
                        try
                        {
                            await hubConnection.StartAsync();
                            btn_start.Text = "stop";
                        }
                        catch (System.Exception){}
                    }
                }
                else if (btn_start.Text.ToLower().Equals("stop"))
                {
                    if (hubConnection.State == HubConnectionState.Connected)
                    {
                        try
                        {
                            await hubConnection.StopAsync();
                            btn_start.Text = "start";
                        }
                        catch (System.Exception) { }
                    }
                }
            };

            view_move.SetOnTouchListener(this);
        }

        public bool OnTouch(View v, MotionEvent e)
        {
            view_move.SetX(e.RawX);
            view_move.SetY(e.RawY);

            if(hubConnection.State == HubConnectionState.Connected)
            {
                hubConnection.SendAsync("MoveFromServer", e.RawX, e.RawY);
            }
            return true;
        }
    }

Step 5 : - Permissions From Device

 

We need permission from the device because we can use the device’s INTERNET. Please add internet permission to your AndroidManifest.xml.Let's open Solution Explorer-> Properties-> AndroidManifest and let's add the code inside application tags.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

OUTPUT 

 

 

 

Summary

 

This was the process of creating a Realtime app with SignalR ASP.Net Core in Xamarin.Android, using Visual Studio. Please share your comments and feedback.