Xamarin Android - A Quick Demonstration Of SignalR

Introduction

Last time, I had made a simple signalR chat client app. Today, I shall show you a quick demonstration of SignalR.

• Xamarin.Android - Create A Chat App Using ASP.NET And SignalR

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 sit tight for a client to request new data.

Prerequisites

You are required to have basic knowledge of asp.net web application and intermediate level of knowledge xamarin.android and basic idea of microsoft azure web app publishing.

1. Asp.Net Web Application
2. Microsoft Azure account
3. Xamarin Android app
4. SignalR Component

Server Side Application

Step 1

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

(ProjectName: SignalR_Service)

Step 2

Next go to Solution Explorer-> Project Name-> then Right Click to Add -> HTML Page.

(HtmlPage Name: Index)

Step 3

Again go to Solution Explorer-> Project Name-> then Right Click to Add -> New Item-> SignalR Hub Class (v2) with name ChatHub.cs. The hub class essentially is a type of connection that makes connectivity between server and client.

(Class Name: NewHub.cs)

Step 4

We need to add a Startup class so, go to Solution Explorer-> Project Name-> then Right Click to Add -> New Item-> OWIN Startup Class with name Startup.cs

(Class Name: Startup)

 

Now we need to configure owin startup class. Go to Solution Explorer-> Project Name-> Startup.cs and write following code in startup class. 

 

1. //Any Connection or Hub wire up and configuration should go here.
2. app.MapSignalR();
   

Step 5

Next go to Solution Explorer-> Project Name-> ChatHub then create a chathub class and replace following code with Hello method.

(File Name: ChatHub.cs)

public void Send(string name, string message)
{
    // Call the broadcastMessage method to update clients.
    Clients.All.broadcastMessage(name, message);
}
public void DragView(float rawX, float initX, float rawY, float initY)
{
    Clients.Others.UpdateView(rawX, initX, rawY, initY);
}

Step 7

Bulid and run the project. Web app publishing is a very simple method therefore, i am skipping these process.

Go to Solution Explorer-> Project Name-> then Right Click -> Publish.

 

This service successfully publish on microsoft azure. Now everyone can use and access this service from given url.

http://azuresignalrserver.azurewebsites.net/

Client Side

Step 1

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

(ProjectName: SignalR_Drag)

Step 2

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

(FileName: Main.axml)

AXML Code 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <View android:id="@+id/draggableView"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_green_dark"
android:layout_gravity="center" />
</FrameLayout>

Layout

 

Step 3

Go to Solution Explorer-> Components -> then Right Click-> Get More Components. In this way, you can move on xamarin components store then search SignalR and add to app.

Step 4

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

(FileName: MainActivity.cs)

MainActivity C# Code

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Views;
using Microsoft.AspNet.SignalR.Client;
using System;
namespace SignlR_Android {
    [Activity(Label = "SignlR_Drag", MainLauncher = true)]
    public class MainActivity: Activity {
        private FrameLayout mRoot;
        private View draggableView;
        private IHubProxy mhubProxy;
        private float XInit = 0;
        private float YInit = 0;
        protected async override void OnCreate(Bundle savedInstanceState) {
            base.OnCreate(savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            mRoot = FindViewById < FrameLayout > (Resource.Id.root);
            draggableView = FindViewById(Resource.Id.draggableView);
            draggableView.Touch += DraggableView_Touch;
            HubConnection hubConnection = new HubConnection("http://azuresignalrserver.azurewebsites.net/");
            mhubProxy = hubConnection.CreateHubProxy("ChatHub");
            try {
                await hubConnection.Start();
            } catch (Exception) {
                //Catch handle Errors.
            }
            mhubProxy.On < float, float, float, float > ("UpdateView", (rawX, initX, rawY, initY) => {
                RunOnUiThread(() => {
                    draggableView.Animate().X(rawX + initX).Y(rawY + initY).SetDuration(0).Start();
                    mRoot.Invalidate();
                });
            });
        }
        private async void DraggableView_Touch(object sender, View.TouchEventArgs e) {
            float x = e.Event.RawX;
            float y = e.Event.RawY;
            View touchedView = sender as View;
            switch (e.Event.Action) {
                case MotionEventActions.Down:
                    XInit = touchedView.GetX() - x;
                    YInit = touchedView.GetY() - y;
                    break;
                case MotionEventActions.Move:
                    touchedView.Animate().X(e.Event.RawX + XInit).Y(e.Event.RawY + YInit).SetDuration(0).Start();
                    break;
                default:
                    break;
            }
            mRoot.Invalidate();
            await mhubProxy.Invoke("DragView", new object[] {
                e.Event.RawX, XInit, e.Event.RawY, YInit
            });
        }
    }
}

Output

Finally, we have done our SignalR application, just rebuild and run the project. You will have the result like below.

 

Summary

• What is SiganlR
• Asp.Net Web Application
• Publish to Azure
• Xamrin.Android Application
• Add SignalR Component
• Output