Signalr Owin simple example javascript client not being called

Question

I have a 5.3.0 version of signalr self hosting that is being upgraded to a newer version of signalr. Using https://github.com/SignalR/SignalR/wiki/Self-host example i have created a simple example, but i can’t get it to work.

I can get a connection to the hub on the server and call methods on the hub, but i can’t get the hub to call the javascript client.

When looking at it in fiddler I never see a response come back from the hub.

Here is the code

using System;
using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Hosting;
using Owin;



namespace ConsoleApplication3
{
class Program
{
    static void Main(string[] args)
    {
        string url = "http://localhost:8080/";

        using (WebApplication.Start<Startup>(url))
        {
            Console.WriteLine("Server running on {0}", url);
            Console.ReadLine();
        }
    }
}
}

using Microsoft.AspNet.SignalR;
using Owin;

namespace ConsoleApplication3
{
  class Startup
  {
    // This method name is important
    public void Configuration(IAppBuilder app)
    {
        var config = new HubConfiguration
        {
            EnableCrossDomain = true,
            EnableJavaScriptProxies = true
        };

        app.MapHubs(config);
    }

  }

}

using System;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using Newtonsoft.Json;

namespace ConsoleApplication3.Hubs
{
public class Chat : Hub
{

    public override Task OnConnected()
    {
        Notify(Context.ConnectionId);
        return new Task(() => { });
    }

    public void RunTest()
    {
        Notify(Context.ConnectionId);
    }


    public void Notify(string connectionId)
    {
        dynamic testMessage = new
        {
            Count = 3,
            Message = "Some test message",
            Timestamp = DateTime.Now
        };

        String json = JsonConvert.SerializeObject(testMessage);

        var context = GlobalHost.ConnectionManager.GetHubContext<Chat>();
        context.Clients.Client(connectionId).sendNotification(json);
    }

 }
}

And here is the client side

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title></title>     
    <script src="Scripts/json2.js"></script>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/jquery.signalR-1.0.1.js"></script>
    <script src="http://localhost:8080/signalr/hubs"></script>

<script>         
    $(function () {

        // Proxy created on the fly
        var notification = $.connection.chat;
        $.connection.hub.logging = true;

        // Declare functions that can be run on the client by the server
        notification.client.sendNotification = onAddNotification;
        notification.client.disconnected = function (connectionid) {
            console.log(connectionid);
        };
        // Testing code only
        $("#testButton").click(function () {
            // Run test function on server
            notification.server.runTest();
        });

        jQuery.support.cors = true;

        // Map the onConnect and onDisconnect functions
        notification.client.connected = function () {
            alert("Notification system connected");
        };
        notification.client.disconnected = function () { };
        $.connection.hub.url = "http://localhost:8080/signalr";

        //$.connection.hub.start();
        $.connection.hub.start(function () {
            alert("Notification system connected");
        });

    });

    // Process a newly received notification from the server
    function onAddNotification(message) {

        // Convert the passed json message back into an object
        var obj = JSON.parse(message);

        var parsedDate = new Date(parseInt(obj.Timestamp.substr(6)));

        // Update the notification list
        $('#notifications').prepend('<li>' + obj.Message + ' at ' + parsedDate + '</li>');

    };

    </script> 
</head> 
<body>     
    <a href="javascript:void(0)" class="btn" id="testButton">Send test</a>     
    <ul class="unstyled" id="notifications">             
    </ul> 
</body>

Any ideas would be appreciated, since i am fairly stuck.

davidfowl davidfowl · Accepted Answer · 2013-04-13T19:42:43

Few things in your code:

Change this:

public override Task OnConnected()
{
    Notify(Context.ConnectionId);
    return new Task(() => { });
}

To:

public override Task OnConnected()
{
    Notify(Context.ConnectionId);
    return base.OnConnected();
}

Also in your hub:

This function is trying too hard:

public void Notify(string connectionId)
{
    dynamic testMessage = new
    {
        Count = 3,
        Message = "Some test message",
        Timestamp = DateTime.Now
    };

    String json = JsonConvert.SerializeObject(testMessage);

    var context = GlobalHost.ConnectionManager.GetHubContext<Chat>();
    context.Clients.Client(connectionId).sendNotification(json);
}

I'm not even sure why you're passing the connection id (maybe it was meant to be static?)

public void Notify()
{
    dynamic testMessage = new
    {
        Count = 3,
        Message = "Some test message",
        Timestamp = DateTime.Now
    };

    Clients.Client(Context.ConnectionId).sendNotification(testMessage);
}

You don't need to serialize twice, we already do it for you.

Remove:

jQuery.support.cors = true;

Never set that.

Also:

// Map the onConnect and onDisconnect functions
notification.client.connected = function () {
    alert("Notification system connected");
};

notification.client.disconnected = function () { };

These aren't mapping anything client side. You can't map connected and disconnected from the server to the client. The client has its own events.

Other things:

This should be inside of the start callback so that you don't hit it before it's ready:

$.connection.hub.start().done(function() {
    // Testing code only
    $("#testButton").click(function () {
        // Run test function on server
        notification.server.runTest();
    });
});

Signalr Owin simple example javascript client not being called

1 Answers