Introduction

In this blog, we are going to see how to update real-time data in Xamarin forms application. The term Real Time it has own definition, real time can be either 1 minute, 10 minutes, or 30 minutes the definition or real time data is depend upon the certain factors like a show frequent user require data, how frequent user is getting data from the respective source etc. Here we are going to see how to update the data to both the ends as on Server side and mobile side as well, here we are updating the data whenever the data gets updated on both side.

Description about problem

There are several ways to sync real time data on your device like as,

SignalR

RSS (Rich Site Summary)

Sync Thread

Pull to refresh etc.

All the above approaches are used by the developer to update the data on the mobile application, each approach has its own purpose like as,

SignalR will update the data whenever it gets changed.

RSS feed is used to update the data frequently like as for News, weather, scores etc.

Sync thread will update the data in a fixed time interval.

Pull to refresh allows user to update the data on demand i.e. whenever user wants to update the data it will update by using pull to refresh.

Solution

Here we are going to how to update the data frequently by using the SignalR, SignalR is a library which is used for bidirectional communication as we want to update the data frequently to the client and from the client we will use SignalR. Whenever the data gets updated the server will push the data to all the connected clients.

With Xamarin platform SignalR is used to update the data frequently on mobile app to provide user real time data, here it is divided into two parts as,

SignalR Server

SignalR Client

SignalR server will contain all the data regarding the application and all the clients (mobile devices) are connected with the SignalR server, all the SignalR clients (mobile devices) will subscribe the SignalR Server by using Server URL, whenever the data gets updated on server side the SignalR Server will broadcast the data to all the connected clients and on the client side the real time data gets reflected.

SignalR Server side Implementation:

For SignalR server side implementation visit http://signalr.net/

SignalR Client side (Xamarin Forms) Implementation:

Before staring implementation at mobile end, we need following things,

SignalR HUB URL

HUB Name

Here, the HUB URL defines the url of SignalR Server which will broadcasts the data to Client’s and HUB Name is the name of HUB which user wants to connect and receive the data. Now here are the steps to add SignalR in Xamarin Forms Application,

A. First of all add the Nuget package of SignalR into your solution, for details refer screenshot

Note: SignalR Nuget Package will be added in only Portable Project

B. Now go to App.cs file and add some code which is marked in screenshot,

Public static HubConnection HubConnection; Public static IHubProxy hubProxy; Public static SynchronizationContext SynchronizationContext;

Here,

HubConnection: It creates a connection to intract with the hub.

IHubProxy: A Client side proxy for a server side hub.

SynchronizationContext: A thread to sync the data.

And add following code in App Constructor

#region SignalR IntegrationCode SynchronizationContext = SynchronizationContext.Current; HubConnection = new HubConnection("http://testapi.testservice.com/signalr", false); hubProxy = HubConnection.CreateHubProxy("SampleApiHub"); HubConnection.Start().Wait(); #endregion

Here, the HubConnection will connect with the hub with given URL,

HubProxy will creates a proxy which receives real data with server,

If the connection wasn’t start of any exception occurs then we need to start the HubConnection again, for that find the following code,

HubConnection.Closed += async () => { Await HubConnection.Start(); };

C. Now the connection has been established with the SignalR Server, so whenever the data gets updated the hubProxy will receive the data

For receiving the data we need to write following lines of code,

first create the Collection to store the data in the list,

private ObservableCollection<SampleModel> _sampleList = new ObservableCollection<SampleModel>(); public ObservableCollection<PickZoneModel> sampleList { get { return _sampleList; } set { _sampleList = value; RaisePropertyChanged(() => sampleList); } }

Now write following code to get the updated data in the collection,

#region SignalR Integration Code Views.App.hubProxy.On<ApiResponse<List<SampleModel>>>("GetSampleData", (apiResult) => Views.App.SynchronizationContext.Post(_ => { if (apiResult != null && apiResult.Data.Count > 0) { if (sampleList != null && sampleList.Count > 0) BindData(apiResult.Data); } }, null) ); Views.App.hubProxy.Invoke("Subscribe", UserDetails).Wait(); #endregion

Here,

GetSampleData is the event name which the client has subscribed, whenever the data gets updated the event will receive updated list,

If there is no change in data it will not bind it to view.

Conclusion

In this blog we have learned how to sync real time data with the server (API) by using SignalR.

So, you have learned how to update real time data in Xamarin forms app. If anything in the code or post is unclear, let the team of Xamarin app development India know about it. You can make comments below.