{"id":2105,"date":"2015-11-16T00:00:00","date_gmt":"2015-11-03T00:00:00","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/using-signalr-to-create-mobile-applications\/"},"modified":"2021-06-03T16:47:10","modified_gmt":"2021-06-03T16:47:10","slug":"using-signalr-to-create-mobile-applications","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/using-signalr-to-create-mobile-applications\/","title":{"rendered":"Using SignalR to Create Mobile Applications"},"content":{"rendered":"
\n

SignalR is a powerful, open source library that allows developers to quickly and easily implement real-time communications across different platforms. Although SignalR is predominantly used in web applications, the library is versatile enough to be used in mobile apps as well. This means that you can implement native real-time connected applications without requiring the use of a web view. SignalR provides client libraries for .NET, JavaScript, Windows Phone, Windows Universal applications, iOS and Android.:p><\/p>\n

There are two ways to add SignalR to cross-platform mobile applications. For .NET developers, there is the option to “write-once deploy-everywhere, leveraging the power of C# and Xamarin. Xamarin is a 3rd party library that takes advantage of the .NET framework and provides a unified SDK that binds directly to the native libraries in order develop mobile applications. Because Xamarin works on top of the .NET framework, it means that all that’s needed in order to use SignalR is to add the necessary .dll to the solution, usually through NuGet.<\/p>\n

If you don’t want to go down the route of Xamarin, there are also native ports of the SignalR library both in Objective-C and Java. For iOS development you can use this port (SignalR-ObjC)<\/a>, <\/span> and for Android development there’s this port (SignalR\/java-client)<\/a>. There is, however, a small caveat when using these ports: because these two libraries are not officially supported by the SignalR community, there is a chance that they may be out of date or have features missing.<\/p>\n

In this article, we are going to develop a sample Windows Universal Application (store and mobile) and implement basic real-time communications between the application and a back-end service using SignalR. <\/p>\n

The Server setup<\/span><\/p>\n

To demonstrate the real-time communication framework, we are going to implement a sample stock price service.  Clients that are connected through SignalR will receive real-time stock prices when these are updated on the server. The server will use just a mock service to generate dummy prices for the purpose of this demo. In a production environment, this data would be coming from a real API.<\/p>\n

The SignalR hub will be installed on a WebAPI 2.0 running on top of ASP.NET 4.5. The hub will only have one public method which will be used to broadcast the data to all connected clients. <\/p>\n

On a new, empty WebAPI solution in Visual Studio, open the NuGet console manager and run the following command:<\/p>\n

Install-Package Microsoft.AspNet.SignalR<\/pre>\n
 This will  install SignalR along with the necessary dependencies such as Owin (ASP.NET’s  middleware framework). Owin is used to bootstrap SignalR and route all incoming  SignalR requests to the hub.<\/p>\n
 By default,  SignalR hubs are configured to reject incoming request from external  domains. This means that if your SignalR hub (WebAPI) is running under the  https:\/\/contoso.com and clients are trying to connect from https:\/\/mydomain.com,  then the requests will fail with an HTTP 500 error.  To fix this problem, we  can configure Owin to accept cross-domain requests (CORS).  Go back to the NuGet  console manager and run the following command:<\/p>\n
Install-Package Microsoft.Owin.Cors<\/pre>\n
 With the  dependencies installed, we can now start configuring the hub. Right-click on the  WebAPI project and add a new class. Name the class Startup.cs<\/b> and paste the following code:<\/p>\n
using Microsoft.AspNet.SignalR;\nusing Microsoft.Owin.Cors;\nusing Owin;\n\nnamespace SignalRService\n{\n    public class Startup\n    {\n         public void Configuration(IAppBuilder app)\n        {\n            app.Map(\"\/signalr\", map =>\n            {\n                map.UseCors(CorsOptions.AllowAll);\n                var hubConfiguration = new HubConfiguration { };\n                map.RunSignalR(hubConfiguration);\n            });\n        }\n    }\n}\n<\/pre>\n
 This code  bootstraps SignalR and configures CORS in order to allow cross-domain clients to  connect. At the moment all external clients can hit the hub because we defined CorsOption.AllowAll<\/b>. Unless you wish  to create a truly open API, it is advisable that you restrict access to the  service.<\/p>\n
 Before we  create the hub, we need a mock service to feed stock data to the clients. Add a  new class to the project and name it  StockService. <\/b>Paste the following code in it:<\/p>\n
using Microsoft.AspNet.SignalR;\nusing Newtonsoft.Json;\nusing System;\nusing System.Collections.Concurrent;\nusing System.Threading;\n\nnamespace SignalRService\n{\n    public class StockService\n    {\n         private static Timer timer;\n         private static Random random;\n         public ConcurrentDictionary<string, decimal> Stocks;\n         private static int interval = 5000;\n\n         public StockService()\n        {\n            random = new Random();\n            timer = new Timer(UpdateStockPrices, null, interval, interval);\n            Stocks = new ConcurrentDictionary<string, decimal>();\n\n            Stocks.TryAdd(\"GOOG\", new decimal(2.50));\n            Stocks.TryAdd(\"MSFT\", new decimal(3.15));\n            Stocks.TryAdd(\"APPL\", new decimal(4.57));\n        }\n\n         private void UpdateStockPrices(object state)\n        {\n            foreach (var stock in Stocks.Keys)\n            {\n                Stocks[stock] = random.NextDecimal();\n            }\n            BroadcastStockPriceChanges();\n        }\n\n         public void BroadcastStockPriceChanges()\n        {\n            var hub = GlobalHost.ConnectionManager.GetHubContext<StocksHub>();\n            hub.Clients.All.sendStockData(JsonConvert.SerializeObject(Stocks));\n        }\n    }\n}\n<\/pre>\n
 The service  is pretty basic. It creates a timer which is used to push stock data at a 5  second interval. There are a couple of extension methods that are used to  generate random decimals. Add a new class to your project and name it Extensions<\/b>. Paste the following code:<\/p>\n
using System;\n\nnamespace SignalRService\n{\n    public static class Extensions\n    {\n         public static int NextInt32(this Random rng)\n        {\n            unchecked\n            {\n                int firstBits = rng.Next(0, 1 << 4) << 28;\n                int lastBits = rng.Next(0, 1 << 28);\n                return firstBits | lastBits;\n            }\n        }\n\n         public static decimal NextDecimal(this Random rng)\n        {\n            byte scale = (byte)rng.Next(29);\n            bool sign = rng.Next(2) == 1;\n            return new decimal(rng.NextInt32(),\n                               rng.NextInt32(),\n                               rng.NextInt32(),\n                               sign,\n                               scale);\n        }\n    }\n}\n<\/pre>\n
 With the  service in place, the last step in creating the service process is adding the  SignalR hub to relay data to and from the clients. Right-click on the WebAPI  project and add a new class. Name it  StocksHub<\/b> and paste the following code: <\/p>\n
using Microsoft.AspNet.SignalR;\n\nnamespace SignalRService\n{\n    public class StocksHub : Hub\n    {\n         private readonly StockService stockService;\n\n         public StocksHub()\n        {\n            stockService = new StockService();\n        }\n    }\n}\n<\/pre>\n
 I understand  your surprise. The hub is, in fact, empty. We only use it to instantiate the StockService<\/b>. This is the beauty of  SignalR. The hub can act as the conduit -passing information back and forth  between the client and some arbitrary back-end service. This is all we need to  do to get a functional hub. Next, we’ll look into what’s required to allow a  Windows Universal application to receive data from the SignalR hub.<\/p>\n
The Client Setup<\/h2>\n
The steps  used to enable SignalR on the Windows Universal apps are the exact same steps  you would follow if you were working on a Xamarin application. Open up Visual  Studio and create a new Windows Universal app. In the end, the solution should  consist of 3 projects:<\/p>\n
    \n
  •  Windows Phone Application<\/li>\n
  • Windows Desktop Application<\/li>\n
  • Shared project<\/li>\n<\/ul>\n
     We will use  the shared project to add the common logic, such as the SignalR client and  configuration settings. The individual projects will have only the UI specific  logic necessary to display the data retrieved through SignalR.<\/p>\n
     We’ll start  by adding the SignalR packages. Open the NuGet console manager and run the  following command:<\/p>\n
    Install-Package Microsoft.AspNet.SignalR.Client<\/pre>\n
     Next, open up App.xaml.cs<\/b> and add the following  public property and private method in the class:<\/p>\n
    public SignalRClient Client { get; set; }\nprivate async Task StartHub()\n{\n    Client = new SignalRClient();\n    await Client.Connect();\n}\n<\/pre>\n
     Change the OnLaunched()<\/b> method to be async<\/b> by changing the method  declaration like this:<\/p>\n
    protected override async void OnLaunched(LaunchActivatedEventArgs e) <\/pre>\n
     and add the  following line anywhere in the body of the method:<\/p>\n
    await StartHub();<\/pre>\n
     The above  code will start up the client and connect to the remote hub in order to start  receiving data. Next, since we’re working with XAML, we can take advantage of  data binding so that we can update the UI asynchronously and automatically when  new data is received. In the shared project, create a new class and name it PageData. <\/b>Add the following code:<\/p>\n
    using System.ComponentModel;\n\nnamespace SignalRApp\n{\n    public class PageData : INotifyPropertyChanged\n    {\n         private double _GOOG;\n         private double _MSFT;\n         private double _APPL;\n\n         public event PropertyChangedEventHandler PropertyChanged;\n\n         public double GOOG\n        {\n            get { return _GOOG; }\n            set\n            {\n                _GOOG = value;\n                NotifyPropertyChanged(\"GOOG\");\n            }\n        }\n\n         public double MSFT\n        {\n            get { return _MSFT; }\n            set\n            {\n                _MSFT = value;\n                NotifyPropertyChanged(\"MSFT\");\n            }\n        }\n\n         public double APPL\n        {\n            get { return _APPL; }\n            set\n            {\n                _APPL = value;\n                NotifyPropertyChanged(\"APPL\");\n            }\n        }\n\n         public void NotifyPropertyChanged(string propertyName)\n        {\n            if (PropertyChanged != null)\n            {\n                PropertyChanged(this,\n                    new PropertyChangedEventArgs(propertyName));\n            }\n        }\n    }\n}\n<\/pre>\n
     In a proper  application, we would opt in for proper MVVM framework that can eliminate most  of the above boiler plate code. Nonetheless, this is a demo app with limited  requirements so there’s no reason to complicate the design and add unnecessary  dependencies. Finally, we need to create the SignalR client. Add a new class to  the shared project and name it  SignalRClient. <\/b>Paste the code below:<\/p>\n
    using Microsoft.AspNet.SignalR.Client;\nusing Microsoft.AspNet.SignalR.Client.Transports;\nusing System;\nusing System.Threading.Tasks;\n\nnamespace SignalRApp\n{\n    public class SignalRClient\n    {\n         private readonly HubConnection connection;\n         private readonly IHubProxy proxy;\n\n         public event EventHandler<dynamic> OnDataReceived;\n\n         public SignalRClient()\n        {\n            connection = new HubConnection(\"http:\/\/localhost:9246\");\n            proxy = connection.CreateHubProxy(\"StocksHub\");\n        }\n\n         public async Task Connect()\n        {\n            await connection.Start(new WebSocketTransport());\n\n            proxy.On(\"sendStockData\", (dynamic data) => \n            {\n                if (OnDataReceived != null)\n                {\n                    OnDataReceived(this, data);\n                }\n            });\n        }\n    }\n}\n<\/pre>\n
     In the code  above, we create a proxy and then we define an event handler that listens for a  “sendStockData()<\/b>” method. Notice how  this event name matches exactly the StockService <\/b>method we defined in our hub on the server. This  instructs the client to raise an event every time the server calls that method. <\/p>\n
     At the point  of writing this, ‘Windows Universal apps’ seems to also suffer from a small bug  when connecting to a hub. The connection process is particularly slow due to  protocol failures. To resolve this problem, we need to define the transport  protocol during our attempt to instantiate the connection. This is achieved here  by requesting that the connection uses the Web Sockets protocol:<\/p>\n
    await connection.Start(new WebSocketTransport());<\/pre>\n
     Finally, it’s  worth noting that when creating a new  HubConnection()<\/b> we need to pass the hub URL, which is the same as the WebAPI  URL. Make sure you use the right URL otherwise your connection will fail.<\/p>\n
     The last step  is to update the UI in the phone and desktop apps to use the SignalR data. On  the Windows phone project, open the  MainWindow.xaml<\/b> and replace the  <Grid><\/Grid><\/b> root element with the code below:<\/p>\n
    \n
      <Grid.RowDefinitions><\/p>\n
                    <RowDefinition  Height=”150″><\/RowDefinition><\/p>\n
                    <RowDefinition  Height=”*”><\/RowDefinition><\/p>\n
                 <\/Grid.RowDefinitions><\/p>\n
                 <TextBlock  Grid.Row=”0″  Style=”{StaticResource  HeaderTextBlockStyle}”  Margin=”25,0,0,0″>STOCK  PRICES<\/TextBlock><\/p>\n
                 <StackPanel  Grid.Row=”1″  Margin=”25,0,0,0″><\/p>\n
                    <StackPanel  Orientation=”Horizontal”><\/p>\n
                        <TextBlock  Style=”{StaticResource  BodyTextBlockStyle}”  Width=”70″>GOOG:<\/TextBlock><\/p>\n
                        <TextBlock  Style=”{StaticResource  BodyTextBlockStyle}”  Text=”{Binding  GOOG  }”><\/TextBlock><\/p>\n
                    <\/StackPanel><\/p>\n
                    <StackPanel  Orientation=”Horizontal”><\/p>\n
                        <TextBlock  Style=”{StaticResource  BodyTextBlockStyle}”  Width=”70″>MSFT:<\/TextBlock><\/p>\n
                        <TextBlock    Style=”{StaticResource  BodyTextBlockStyle}”  Text=”{Binding  MSFT}”><\/TextBlock><\/p>\n
                    <\/StackPanel><\/p>\n
                    <StackPanel  Orientation=”Horizontal”><\/p>\n
                        <TextBlock  Style=”{StaticResource  BodyTextBlockStyle}”  Width=”70″>APPL:<\/TextBlock><\/p>\n
                        <TextBlock  Style=”{StaticResource  BodyTextBlockStyle}”  Text=”{Binding  APPL}”><\/TextBlock><\/p>\n
                    <\/StackPanel><\/p>\n
                 <\/StackPanel><\/p>\n<\/p><\/div>\n
     We also need  to add the necessary code to retrieve and bind the data to the UI View, so open MainView.xaml.cs<\/b> and paste the code  below:<\/p>\n
    using Newtonsoft.Json;\nusing Windows.UI.Core;\nusing Windows.UI.Xaml.Controls;\nusing Windows.UI.Xaml.Navigation;\n\nnamespace SignalRApp\n{\n    public sealed partial class MainPage : Page\n    {\n         private PageData pageData;\n         public MainPage()\n        {\n            this.InitializeComponent();\n\n            this.NavigationCacheMode = NavigationCacheMode.Required;\n            pageData = new PageData();\n            this.DataContext = pageData;\n            var app = App.Current as App;\n            app.Client.OnDataReceived += Client_OnDataReceived;\n        }\n\n         private void Client_OnDataReceived(object sender, dynamic e)\n        {\n              Dispatcher.RunAsync(CoreDispatcherPriority.Normal,\n              () =>\n              {\n                  var result = JsonConvert.DeserializeObject<PageData>(e);\n                  pageData.APPL = result.APPL;\n                  pageData.GOOG = result.GOOG;\n                  pageData.MSFT = result.MSFT;\n              });\n        }\n    }\n}\n<\/pre>\n
     Since this is  a universal application, we need to apply similar code changes to the Windows  Store project. Go to the MainView.xaml<\/b>  and paste the following code, which should replace the root <Grid><\/Grid><\/b> element:<\/p>\n
    \n
      <Grid  Background=”{ThemeResource  ApplicationPageBackgroundThemeBrush}”><\/p>\n
                 <Grid.RowDefinitions><\/p>\n
                    <RowDefinition  Height=”150″><\/RowDefinition><\/p>\n
                    <RowDefinition  Height=”*”><\/RowDefinition><\/p>\n
                 <\/Grid.RowDefinitions><\/p>\n
                 <TextBlock  Grid.Row=”0″  Style=”{StaticResource  HeaderTextBlockStyle}”  Margin=”25,20,0,0″>STOCK  PRICES<\/TextBlock><\/p>\n
                 <StackPanel  Grid.Row=”1″  Margin=”25,0,0,0″><\/p>\n
                    <StackPanel  Orientation=”Horizontal”><\/p>\n
                        <TextBlock  Style=”{StaticResource  SubheaderTextBlockStyle}”  Width=”120″>GOOG:<\/TextBlock><\/p>\n
                        <TextBlock  Style=”{StaticResource  SubheaderTextBlockStyle}”  Text=”{Binding  GOOG  }”><\/TextBlock><\/p>\n
                    <\/StackPanel><\/p>\n
                    <StackPanel  Orientation=”Horizontal”><\/p>\n
                        <TextBlock  Style=”{StaticResource  SubheaderTextBlockStyle}”  Width=”120″>MSFT:<\/TextBlock><\/p>\n
                        <TextBlock    Style=”{StaticResource  SubheaderTextBlockStyle}”  Text=”{Binding  MSFT}”><\/TextBlock><\/p>\n
                    <\/StackPanel><\/p>\n
                    <StackPanel  Orientation=”Horizontal”><\/p>\n
                        <TextBlock  Style=”{StaticResource  SubheaderTextBlockStyle}”  Width=”120″>APPL:<\/TextBlock><\/p>\n
                        <TextBlock  Style=”{StaticResource  SubheaderTextBlockStyle}”  Text=”{Binding  APPL}”><\/TextBlock><\/p>\n
                    <\/StackPanel><\/p>\n
                 <\/StackPanel><\/p>\n
            <\/Grid><\/p>\n<\/p>\n<\/div>\n
     And the  equivalent code-behind to provide the data for the view:<\/p>\n
    using Newtonsoft.Json;\nusing Windows.UI.Core;\nusing Windows.UI.Xaml.Controls;\n\nnamespace SignalRApp\n{\n    public sealed partial class MainPage : Page\n    {\n         private PageData pageData;\n         public MainPage()\n        {\n            this.InitializeComponent();\n\n            pageData = new PageData();\n            this.DataContext = pageData;\n            var app = App.Current as App;\n            app.Client.OnDataReceived += Client_OnDataReceived;\n        }\n\n         private void Client_OnDataReceived(object sender, dynamic e)\n        {\n            Dispatcher.RunAsync(CoreDispatcherPriority.Normal,\n            () =>\n            {\n                var result = JsonConvert.DeserializeObject<PageData>(e);\n                pageData.APPL = result.APPL;\n                pageData.GOOG = result.GOOG;\n                pageData.MSFT = result.MSFT;\n            });\n        }\n    }\n}\n\n\n<\/pre>\n
     To test the  whole system, run the WebAPI first and then run the Windows Phone and Store apps  in the order you like. The end result should look like this:<\/p>\n
     \"2301-imgE4.jpg\"<\/p>\n
      \"2301-clip_image004.jpg\"<\/p>\n
     Conclusion<\/h2>\n
     In this article, we saw how easy it is to get started with real-time communication across  platforms using SignalR. It doesn’t matter if you’re targeting web, mobile or  desktop platforms. In the end, we’ve proved that SignalR requires minimal code  to provide something that in the past was clunky, unreliable and very hard to  implement. I would like to close with Arthur C. Clarke’s quote - “Any  sufficiently advanced technology is indistinguishable from magic<\/i>“. SignalR  is advanced enough to make real-time communications seem like magic.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
    SignalR isn’t just for web applications. It can also provide the basic real-time communications for a connected Windows Universal Application or even iOS and Android applications. Christos Matskas demonstrates how to get started with creating applications across a range of platforms that require real-time communication using SignalR…<\/p>\n","protected":false},"author":38246,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538],"tags":[4143,4178,4359,4896],"coauthors":[],"class_list":["post-2105","post","type-post","status-publish","format-standard","hentry","category-dotnet-development","tag-net","tag-bi","tag-development","tag-mobile"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/38246"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=2105"}],"version-history":[{"count":6,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2105\/revisions"}],"predecessor-version":[{"id":91250,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2105\/revisions\/91250"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=2105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=2105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=2105"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=2105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}