This site works best in modern browsers. Looks like you're using an old one, you should upgrade if you can.

Consuming Server-Side SignalR Events in Universal Windows App Clients

In a previous article I wrote about creating server side SignalR timer events.

As part of my learning of SignalR I wanted to see how easy it would be to create a Universal Windows app consuming these server side events.

So first off I created a new blank Universal app:

creating universal app in Visual Studio screenshot

 

Next installed the SignalR NuGet package into both app projects: install-package Microsoft.AspNet.SignalR.Client

In the Windows 8.1 Store app project XAML I added a simple bound TextBlock that will display the server messages:

<Page
    x:Class="UpTimeUni.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UpTimeUni"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Viewbox>
            <TextBlock Text="{Binding Uptime}">please wait...</TextBlock>
        </Viewbox>
    </Grid>
</Page>

I also added similar XAML in the Windows Phone 8.1 main page.

In the code behind for both main pages I created a data context from a viewmodel class that is defined in the UpTimeUni.Shared project. This means it will be available from both apps.

public MainPage()
{
    this.InitializeComponent();

    DataContext = new MainViewModel();                
}

Next the viewmodel class looks like the following:

using System;
using System.Diagnostics;
using Windows.UI.Core;
using Microsoft.AspNet.SignalR.Client;
using Microsoft.AspNet.SignalR.Client.Transports;
using PropertyChanged;

namespace UpTimeUni
{
    [ImplementPropertyChanged]
    internal class MainViewModel
    {
        private readonly CoreDispatcher _dispatcher;

        public MainViewModel()
        {
            _dispatcher = CoreWindow.GetForCurrentThread().Dispatcher;

            var connection = new HubConnection("http://internetuptime.azurewebsites.net/signalr");

            var hubProxy = connection.CreateHubProxy("UptimeHub");
            hubProxy.On<string>("internetUpTime", UpdateTime);

            connection.Start(); 
        }

        public string Uptime { get; set; }

        private async void UpdateTime(string s)
        {
            await _dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => Uptime = s);
        }
    }
}

Here I’m using Fody to automatically implement all the INotifyPropertyChanged boilerplate code, hence the [ImplementPropertyChanged] attribute. This relies on installing the PropertyChanged.Fody NuGet package into both the app projects.

Now running the Windows Store app we can see the app updates with the Internet uptimes every second.

Windows 8.1 Store app running against SignalR server

 

So next I changed the startup project to the phone app and running showed just a blank screen.

At first I thought I had messed up the XAML binding but this was fine. I put a breakpoint in the viewmodel’s UpdateTime method but it never got hit, it was never getting called from SignalR.

I added some SignalR tracing code (based on this) to the viewmodel constructor to see what was going on:

public MainViewModel()
{
    _dispatcher = CoreWindow.GetForCurrentThread().Dispatcher;

    var connection = new HubConnection("http://internetuptime.azurewebsites.net/signalr");

    // Add some tracing help
    connection.TraceLevel = TraceLevels.All;
    connection.Closed += () => Debug.WriteLine("[Closed]");
    connection.ConnectionSlow += () => Debug.WriteLine("[ConnectionSlow]");
    connection.Error += (error) => Debug.WriteLine("[Error] {0}", error.ToString());
    connection.Received += (payload) => Debug.WriteLine("[Received] {0}", payload);
    connection.Reconnected += () => Debug.WriteLine("[Reconnected]");
    connection.Reconnecting += () => Debug.WriteLine("[Reconnecting]");
    connection.StateChanged +=
        (change) => Debug.WriteLine("[StateChanged] {0} {1}", change.OldState, change.NewState);


    var hubProxy = connection.CreateHubProxy("UptimeHub");
    hubProxy.On<string>("internetUpTime", UpdateTime);

    connection.Start(); 
}

And now running the phone app I could see debug messages such as:

[StateChanged] Disconnected Connecting
[StateChanged] Connecting Connected
[ConnectionSlow]
[StateChanged] Connected Reconnecting
[Reconnecting]
[StateChanged] Reconnecting Connected
[Reconnected]

After some searching online I found a Stack Overflow comment that suggested you need to configure SignalR to use long polling when running in the emulator. I don’t have a Windows Phone 8.1 device to check this on outside of the emulator at present.

So I added the following code to configure the phone app to use long polling:

#if WINDOWS_PHONE_APP
            // Doesn't work (just?) in emulator with default
            connection.Start(new LongPollingTransport()); 
#else
            connection.Start(); 
#endif

Running the phone app now works as expected.

SignalR running in WindowsPhone emulator

Once I update my phone to 8.1 I can see if this behaviour is just an emulator quirk.

If you strip away all the additional stuff, it’s effectively just 4 lines of code to receive SignalR messages, which is pretty amazing.

comments

Sorry, comments are closed.

about jason

My Bio Photo

Jason Roberts is a Journeyman Software Developer, Microsoft MVP, writer, Pluralsight author, open source contributor and Windows Phone & Windows 8 app author.

He holds a Bachelor of Science in computing and is an amateur music producer and landscape photographer.

MVP Logo

Pluralsight Author Badge

Sign up for the Don't Code Tired Newsletter

Disclaimer
The opinions expressed herein represent my personal opinions and do not represent my employer's views in any way.

© Copyright 2014, Jason Roberts