Azure Developer Challenge – YouConf – Day 12 (May 10)

Today I spend most of my time writing up the final article content for challenge two. I also implemented the SignalR functionality for keeping the live video url up-to-date as below.


Keeping the live video feed url up to date with SignalR

SignalR is a great tool for providing realtime updates to clients, and the Jabbr chat site provides a great example of how to harness this technology. For live conference page I used SignalR in a similar way to dotNetConf to ensure that if a conference presenter updated the Google Hangout id for the conference, viewers would be provided with the updated url without having to refresh their page.

To install SignalR, I installed the SignalR Nuget package as below:


I then set about building a SignalR hub and client. My main issue came with how to push the notification to my SignalR hub from the Conference Controller. To give some context, here’s my YouConfHub class:

public class YouConfHub : Hub
    public Task UpdateConferenceVideoUrl(string conferenceHashTag, string url)
        //Only update the clients for the specific conference
        return Clients.All.updateConferenceVideoUrl(url);
    public Task Join(string conferenceHashTag)
        return Groups.Add(Context.ConnectionId, conferenceHashTag);

and my client javascript code:

<script type="text/javascript" src=""></script>
<script type="text/javascript">
// <![CDATA[$.signalR || document.write('<scr' + 'ipt src="~/scripts/jquery.signalr-1.0.1.min.js")></sc' + 'ript>');
// ]]>
<script type="text/javascript" src="~/signalr/hubs"></script>
<script type="text/javascript">
        $(function () {
            $.connection.hub.logging = true;
            var youConfHub = $.connection.youConfHub;
            youConfHub.client.updateConferenceVideoUrl = function (hangoutId) {
                $("#video iframe").attr("src",
                   "" + hangoutId + "?autoplay=1");
            var joinGroup = function () {
            //Once connected, join the group for the current conference.
            $.connection.hub.start(function () {
            $.connection.hub.disconnected(function () {
                setTimeout(function () {
                }, 5000);


See the UpdateVideoUrl method in the Hub? I wanted to call that from my ConferenceController when a user updated the conference hangout id/url, and thought I could do so by getting an instance of the Hub, then calling the method on it. E.g.

var context = GlobalHost.ConnectionManager.GetHubContext();
context.UpdateConferenceVideoUrl("[conference hashtag]", "[new hangout id]");

Sadly, it turns out that you can’t actually call methods on the hub from outside the hub pipeline 😦 You can, however, call methods on the Hub clients, and groups. So, in my conference controller’s edit method, I was able to use the following code to notify all clients for the specific conference that they should update their url as follows:

if (existingConference.HangoutId != conference.HangoutId)
    //User has changed the conference hangout id, so notify any listeners/viewers
    // out there if they're watching (e.g. during the live conference streaming)
    var context = GlobalHost.ConnectionManager.GetHubContext();

Not too bad in the end eh?

Article progress

My article is now almost complete, with just a few touchups required. I’ll probably spend the next day or two tidying up the site’s css, javascript etc and making sure I haven’t missed anything!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s