VizualBusiness: Penny Pinching in the Cloud: How to run a two day Virtual Conference for $10

Penny Pinching in the Cloud: How to run a two day Virtual Conference for $10:

We've just finished Day One of "DotNetConf" our community-run free online conference for developers who love the .NET development platform and open source!

The Conference Platform

It seems funny to call the software our conference runs on a "platform" as that sounds very "enterprisey" and official. In the past we've done aspConf and mvcConf with sponsors who helped pay for things. We used Channel 9 and had a studio and streamed either from Seattle or using Live Meeting.
However, this year we wanted to do it on the cheap and more distributed. We wanted speakers from ALL over in all time zones. How cheap? About USD$10ish we figure. I'll get a complete bill later, but we basically wanted to scale up, do the talks and scale down.

Video Broadcasting and Screen-sharing

This year we are using Google Hangouts with their "Hangouts On Air" feature. A "dotnetconf" Google Account invites the presenter to a Hang Out and check the "on air" box before start the hangout. Then we use the Hangout Toolbox to dynamically add on screen graphics and speaker labels. Everyone sets their resolution to 1280x768 and the live stream ends scaling down to 480p.
Once you hit "Start Broadcast" you're given a YouTube link to the live stream. When you hit End Broadcast, the resulting video is ready to go on your YouTube page within minutes. The hangout owner (me or Javier) then clicks "Hide in Broadcast" and fades away. You can see I'm faded away in the below screenshot. I'm there, but only if I need to be. When there's only one active presenter the Hangout turns into a full screen affair, which is what we want.
Important Note: Rather than an 8 hour Hangout, we started and stopped as each speaker did their talk. This means that our talks are already discrete on the YouTube page. The YouTube videos can have their start and end times trimmed so the start isn't so rough.

The Database

Surprise! There is no database. There is no need for one. We're running a two page site using ASP.NET Web Pages written in WebMatrix. It runs in the Azure cloud but since our dataset (speakers, schedule, the video stream location, etc) isn't changing a lot, we put all the data in XML files. It's data, sure, but it's a poor man's database. Why pay for more than we need?
How do we update the "database" during the talk? Get ready to have an opinion. The data is in Dropbox. (Yes, it could have been SkyDrive, or another URL, but we used DropBox)
Our Web App pulls the data from Dropbox URLs and caches it. Works pretty nice.

<appSettings>

   <add key="url.playerUrl" value="https://dl.dropboxusercontent.com/s/fancypantsguid/VideoStreams.xml" />

   <add key="url.scheduleUrl" value="https://dl.dropboxusercontent.com/s/fancypantsguid/Schedule.xml" />

   <add key="url.speakerUrl" value="https://dl.dropboxusercontent.com/s/fancypantsguid/Speakers.xml" />

   <add key="Microsoft.ServiceBus.ConnectionString" value="Endpoint=sb://[your namespace].servicebus.windows.net;SharedSecretIssuer=owner;SharedSecretValue=[your secret]" />

</appSettings>

The code is simple, as code should be. Wanna show the schedule? And yes , it's a TABLE. It's a table of the schedule. Nyah.

@foreach(var session in schedule) {

    var confTime = session.Time;

    var pstZone = TimeZoneInfo.FindSystemTimeZoneById("Pacific Standard Time");

    var attendeeTime = TimeZoneInfo.ConvertTimeToUtc(confTime, pstZone);

<tr>

    <td>

        <p>@confTime.ToShortTimeString() (PDT)</p>

        <p>@attendeeTime.ToShortTimeString() (GMT)</p>

    </td>

    <td>

        <div class="speaker-info">

            <h4>@session.Title</h4>

            <br>

            <span class="company-name"><a class="speaker-website" href="http://feeds.hanselman.com/~/t/0/0/scotthanselman/~www.hanselman.com/speakers.cshtml?speaker=@session.Twitter">@session.Name</a></span>

            <br>

            <p>@session.Abstract</p>

        </div>

    </td>

</tr>

}

Scaling Out

We've been on an extra small Azure Website and then switched to two large (and finally, two medium as large was totally overkill) web sites.
We scale up (and hence, pay) only during the conference and turn it down to Small when we're done. No need to spend money if we don't need to.
Scaling DotNetConf to Large

Updating the Site in Real-time with SignalR

Because the YouTube link changes with each Hangout, we had the problem that attendees of the conference would have to hit refresh themselves to get the new URL. There's a number of solutions to this that I'm sure you're already thinking about. We could meta refresh, refresh on a timer, but these aren't on demand. We also wanted to show a few videos during the downtime. One of us preps the next speaker while the other queues up videos to watch.
We realized this was a problem at about 10pm PST last night. Javier and I got on Skype and came up with this late night hack.
What if everyone had SignalR running while their were watching the videos? Then we could push out the next YouTube video from an admin console.
So visualize this. There's the watcher (you), there's a admin (me) and there's the server (the Hub).
The watcher has this on their main page after including the /signalr/hub JavaScript:

$(function () {

    var youtube = $.connection.youTubeHub;

    $.connection.hub.logging = true;



    youtube.client.updateYouTube = function (message, password) {

        $("#youtube").attr("src", "http://www.youtube.com/embed/" + message + "?autoplay=1");

    };

    $.connection.hub.start();



    $.connection.hub.disconnected(function () {

        setTimeout(function () {

            $.connection.hub.start();

        }, 5000);

    });

});

The watcher is listening, er, watching, for a SignalR message from the server with the YouTube video short code. When we get it, we swap out the iFrame. Simple and it works.
Here's the admin console where we put in the next YouTube code (I'm using Razor in ASP.NET Web Pages in WebMatrix, so this is mixed HTML/JS):

<div id="container">

        <input type="text" id="videoId" name="videoId"><br/>

        <input type="text" id="password" name="passsword" placeholder="password"><br/>

        <button id="playerUpdate" name="playerUpdate">Update Player</button>

</div>



@section SignalR {

<script>    

    $(function () {

        var youtube = $.connection.youTubeHub;

        $.connection.hub.logging = true;



        $.connection.hub.start().done(function () {

            $('#playerUpdate').click(function () {

                youtube.server.update($('#videoId').val(), $('#password').val());

            });

        });

        $.connection.hub.disconnected(function() {

          setTimeout(function() {

              $.connection.hub.start();  

        }, 5000);

});

    });

</script>

}

We put in the short code, the password and update. All this must be complex eh? What's the powerful SignalR backend up running in the cloud backed by the power of Azure and Service Bus look like? Surely that code must be too complex to show on a simple blog, eh? Strap in, friends.

public class YouTubeHub : Microsoft.AspNet.SignalR.Hub

{

    public void update(string message, string password)

    {

        if (password.ToLowerInvariant() == "itisasecret")

        {

            Clients.All.updateYouTube(message);

            ConfContext.SetPlayerUrl(message);

        }

    }

}

This is either a purist's nightmare or a pragmatists dream. Either way, we've been running it all day and it works. Between talks we pushed in pre-recorded talks and messages, then finally when the live talk started we pushed that one as well.
We also updated the DropBox links with the current Video Stream so that new visitors showing up would get the latest video, as new site visitors wouldn't have been connected when the video "push" message went out.

What about scale out? We sometimes have two machines in the farm so we need the SignalR "push updated youtube video message" to travel across a scale-out backplane. That took another 10 minutes.

Scaling out with SignalR using the Azure Service Bus

We used the SignalR 1.1 Beta plus the Azure Service Bus Relay and made an Azure Service Bus. Our app startup changed, adding this call to UseServiceBus():

string poo = "Endpoint=sb://dotnetconf-live-bus.servicebus.windows.net/;SharedSecretIssuer=owner;SharedSecretValue=g57totalserets=";   

GlobalHost.DependencyResolver.UseServiceBus(poo,"dotnetconf");

RouteTable.Routes.MapHubs();

Now SignalR uses the Service Bus to pass notifications between the two web servers. I can push a new video from Web 1 and it is sent to everyone on Web 1 and Web 2 (or Web N) via SignalR's realtime persistent connection.

We'll delete this Relay as soon as we are done. Messages are $0.01 per 10,000 or $0.10 per 100 relay hours so this bill could get up into the nickels.

Thank you to the Community!

Big thanks to designer Jin Yang who created the dotnetConf logo and design. Tweet @jzy and tell him you think he is special.
Kudos and thanks to Javier Lozano for his coding, his organizing, his brainstorming and his tireless hard work. It was also cool for him to sit with me for hours last night while we hacked on SignalR and the DotNetConf.net site.
Thanks to David Fowler for saying "it'll just take 10 minutes to add Service Bus."
Thanks to Erik Hexter and Jon Galloway for their organizational abilities and generous gifts of time on all the *conf events!
But mostly, thanks to the speakers who volunteered their time and presented and the community who showed up to watch, interact and play with us!

Sponsor: The Windows Azure Developer Challenge is on. Complete 5 programming challenges for a chance at spot prizes, Stage prizes and the Grand Prize. Over $16,000 is up for grabs with 65 chances to win!