0

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.

Chris Swain
  • 5,193
  • 5
  • 21
  • 22
  • Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. I'm pretty sure that *out there* would constitute an *off-site resource*. – Ken White Dec 20 '14 at 00:16
  • Show the server and client code and fiddler output, high-light the issue and you'll probably get more help. – Ola Ekdahl Dec 20 '14 at 01:06
  • Okay, I updated the question with all of the code you need to recreate what I have. – Chris Swain Dec 22 '14 at 15:58

1 Answers1

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.

Community
  • 1
  • 1
Chris Swain
  • 5,193
  • 5
  • 21
  • 22