Are there any sample projects out there showing how to use SignalR with a WinJS Windows 8.1 projects?

Question

Are there any sample projects out there showing how to use SignalR with a WinJS Windows 8.1 projects? NOT windows phone 8.1, just Windows 8.1 using WinJS.

I'm specifically looking for a sample project or code that shows how to push messages to all WinJS clients.

I have generated the hubs.js file and included it in my winjs project. I am setting the $.connection.hub.url to the correct url. I can see in fiddler that the connection as started.

But, for some reason, when I run the code to broadcast the message to all clients, nothing happens. It's as if the server does not think there are any clients connected so it doesn't broadcast anything.

Here is my server code from my Web Api project:

Startup.cs

    // Branch the pipeline here for requests that start with "/signalr"
    app.Map("/signalr", map =>
    {
        // Setup the cors middleware to run before SignalR.
        // By default this will allow all origins. You can 
        // configure the set of origins and/or http verbs by
        // providing a cors options with a different policy.
        map.UseCors(CorsOptions.AllowAll);

        var hubConfiguration = new HubConfiguration
        {
            EnableDetailedErrors = true,
            EnableJavaScriptProxies = false
        };

        // Run the SignalR pipeline. We're not using MapSignalR
        // since this branch is already runs under the "/signalr"
        // path.
        map.RunSignalR(hubConfiguration);
    });

CommandsHub.cs

[HubName("remoteCommands")]
public class CommandsHub : Hub
{
}

ClientCommand.cs

public class ClientCommand
{
    public string ClientType { get; set; }
    public string CommandName { get; set; }
    public StringDictionary CommandParameters { get; set; }
}

CommandsController.cs (an ApiController used to allow an admin to broadcast to the clients)

    // POST api/values
    public void Post([FromBody]ClientCommand command)
    {
        var cmd = command ?? Notifier.GetTestMessageCommand();
        var notifier = new Notifier();
        notifier.PushCommand(cmd);
    }

Notifier.cs

public class Notifier
{
    public Notifier()
    {
        _context = GlobalHost.ConnectionManager.GetHubContext<CommandsHub>();
    }
    public static ClientCommand GetTestMessageCommand()
    {
        var parameters = new StringDictionary();
        parameters.Add("title", "Message Title");
        parameters.Add("body", "Message Body");
        return new ClientCommand
        {
            ClientType = "XboxOne",
            CommandName = "ShowMessage",
            CommandParameters = parameters
        };

    }

    private IHubContext _context; 
    public void PushCommand(ClientCommand command)
    {
        if (_context == null)
        {
            _context = GlobalHost.ConnectionManager.GetHubContext<CommandsHub>();
        }
        _context.Clients.All.executeRemoteCommand(command);
    }
}

The following line gets executed, but nothing seems to happen. Fiddler doesn't show any network activity and the client method with the matching name does not get run.

_context.Clients.All.executeRemoteCommand(command);

Here is the code from the client project:

Via Nuget, I installed the Microsoft ASP.NET SignalR Javascript Client

I am also using the command

signalr.exe ghp /o:scripts\\hubs.js

to generate my hubs.js file and I'm including it in the WinJS project.

I added references in default.html to the following:

<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery.signalR-2.1.2.js"></script>
<script src="js/hubs.js" defer="defer"></script>
<script src="js/SignalRConfig.js" defer="defer"></script>

SignalRConfig.js

(function signalRInit() { "use strict";

WinJS.Namespace.define("Starz", {
    RemoteCommands: WinJS.Class.define(
        function ctor() {
            $.connection.url = "http://starzsignlalr.test:19046/signalr"
            $.connection.hub.url = "http://starzsignlalr.test:19046/signalr";  //TODO: Change "http://starzsignlalr.test:19046/" to a valid website host name setup on your dev box that is running the SignalRMessageService web project.
            $.connection.hub.start().done(this._init);
        },
    {
        _init: function () {
            var hub = $.connection.remoteCommands;
            hub.client.executeRemoteCommand = Starz.RemoteCommands.executeRemoteCommand;
        }
    },
    {
        //add static properties and methods here.
        executeRemoteCommand: function (command) {
            var clientId = command.clientId;
            var commandName = command.commandName;
            var commandParameters = command.commandParameters;
        }
    }),
});

})();

In default.js, after the onactivated event, I call:

var pushSystem = new Starz.RemoteCommands();

This initializes the SignalR connection.

Answer 1

So I figured out my problem. Apparently you have to register your client-side javascript methods with the hub client before you call $.connection.hub.start().

This post:

SignalR JS Client Methods Not Invoked

provided the answer.