Two primary options are available for building the SignalR server-side aspects. The first is a persistent connection and the second is a hub. The persistent connection option is pretty similar to what we’ve seen in the Fleck and IIS 8 web socket server implementations provided in this chapter.

As you’ll see, it doesn’t take much code to get this set up. You start by installing the SignalR NuGet package. After that, it’s a simple matter of adding a custom route map and implementing a class that derives from PersistentConnection. A snippet from a Global.fs file with the new code emphasized is shown in the following example:

type Global() =
    inherit System.Web.HttpApplication() 

    static member RegisterRoutes(routes:RouteCollection) =
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
        routes.MapRoute("Default", 
                        "{controller}/{action}/{id}", 
                        { controller = "Home"; action = "Index"
                          id = UrlParameter.Optional } )

    member this.Start() =
        RouteTable.Routes
            .MapConnection<ChartServer>("chartserver", 
                                        "chartserver/{*operation}") |> ignore

        AreaRegistration.RegisterAllAreas()
        Global.RegisterRoutes(RouteTable.Routes)

The new class that inherits PersistentConnection is shown in the next example. As I mentioned, it’s not that much different from the previously shown IIS 8 web socket server examples. Here we’re simply overriding the OnReceivedAsync method rather than the OnMessage method:

module SignalRExample

open System
open SignalR
open Newtonsoft.Json

// Code from previous examples removed for brevity

type ChartServer() =
    inherit PersistentConnection()

    override x.OnReceivedAsync(request, connectionId, data) = 
        votesAgent.PostAndReply(fun reply -> Message.Vote(data, reply))   
        |> Seq.map(fun v -> { language = fst v; count = snd v } )
        |> JsonConvert.SerializeObject 
        |> base.Connection.Broadcast

The client-side aspects of SignalR change slightly depending on whether the client is using JavaScript or F# as well as whether the server is using PersistentConnection or Hub. Additionally, the JavaScript option is a little bit different from the previously seen web socket client-related JavaScript. This difference is partially due to the jQuery plug-in that helps SignalR do its magic. Here is a JavaScript example for the PersistentConnection that we built in the earlier example:

/* Some code removed for brevity */
    
var connection = $.connection("/chartserver");

connection.received(function (data) {
    updateChart($.parseJSON(data));
});

$('#vote').click(function (event) {
    var vote = $('input:radio[name=langOption]:checked');

    if (vote.length) {
        connection.send(vote.val());
    };

    $pages.hide();
    $("#results").toggle();

    event.preventDefault();
});

connection.start();

Using the client and server together results in the same effect we achieved in the previous web socket examples. The output looks just like Figure 4-2.

What if you want to connect to a SignalR server from F# instead of JavaScript? That’s no problem at all. The next example shows an F# console application that can cast a vote for a favorite programming language.

To build this, create a new F# console application, install the SignalR.Client NuGet package, and add code such as the following:

module SignalRExample

open System
open SignalR.Client

let connection = 
    Connection "http://localhost:2920/chartserver"

connection.Start().Wait()

connection.Send "F#" 
|> Async.AwaitIAsyncResult 
|> Async.Ignore 
|> ignore

connection.Stop() |> ignore

printfn "Vote cast for F#"
Console.ReadLine() |> ignore

As I mentioned previously, SignalR provides another option, which is known as a Hub. This option provides a higher-level abstraction over PersistentConnection. This abstraction makes it possible for the server to call named JavaScript functions. Let’s look at an example.

// Code from previous examples removed for brevity

type ChartHub() =
    inherit Hub()
    member x.Send (data:string) = 
       let result = 
           votesAgent.PostAndReply(fun reply -> Message.Vote(data, reply))   
           |> Seq.map(fun v -> { language = fst v; count = snd v } )
       try
           base.Clients?updateChart(result)
       with
       | ex -> 
           printfn "%s" ex.Message

let server = Server "http://*:8181/"
server.MapHubs() |> ignore

server.Start()

printfn "Now listening on port 8181"
Console.ReadLine() |> ignore

$.connection.hub.url = 'http://localhost:8181/signalr'

var chartHub = $.connection.chartHub;

chartHub.updateChart = function (data) {
    updateChart(data);
};

$('#vote').click(function (event) {
    var vote = $('input:radio[name=langOption]:checked');

    if (vote.length) {
        chartHub.send(vote.val())
    }

    $pages.hide();
    $("#results").toggle();

    event.preventDefault();
});

$.connection.hub.start();

<script src="@Url.Content("~/Scripts/jquery.signalR-0.5.2.min.js")"></script>
<script src="http://localhost:8181/signalr/hubs" type="text/javascript"></script>