Running signalR in OwinHost

StackOverflow https://stackoverflow.com/questions/23426757

Question

I created a new Empty Project in VS 2013, configured it to run using OwinHost and installed the following packages in order:

PM> Install-Package Owinhost
PM> Install-Package Microsoft.Owin
PM> Install-Package Microsoft.Owin.StaticFiles
PM> Install-Package Microsoft.AspNet.SignalR.JS
PM> Update-Package jQuery
PM> Install-Package Microsoft.AspNet.SignalR.Owin

Then, I added a Hub class as follows:

using Microsoft.AspNet.SignalR;
namespace OwinHosting
{
    public class MyHub : Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.addMessage(name, message);
        }   
    } 
}

In the startup.cs I added this:

using Microsoft.AspNet.SignalR;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(OwinHosting.Startup))]
namespace OwinHosting
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
           var config = new HubConfiguration {EnableCrossDomain = true };
           app.MapHubs(config);

            app.UseStaticFiles("/Web");
         }
     }
 }

Finally, I added a Web folder, moved the Scripts folder to it and added the index.html page:

<!DOCTYPE html>
<html>
<head>
<title>SignalR Simple Chat</title>
<style type="text/css">
    .container {
        background-color: #99CCFF;
        border: thick solid #808080;
        padding: 20px;
        margin: 20px;
    }
</style>
</head>
<body>
<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion"></ul>
</div>

<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-2.1.0.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.0.3.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="http://localhost:8888/signalr/hubs"></script>

<!--Add script to update the page and send messages.-->
<script type="text/javascript">
    $(function () {
        //Set the hubs URL for the connection
        $.connection.hub.url = "http://localhost:8888/signalr";

        // Declare a proxy to reference the hub.
        var chat = $.connection.myHub;

        // Create a function that the hub can call to broadcast messages.
        chat.client.addMessage = function (name, message) {
            // Html encode display name and message.
            var encodedName = $('<div />').text(name).html();
            var encodedMsg = $('<div />').text(message).html();
            // Add the message to the page.
            $('#discussion').append('<li><strong>' + encodedName
                + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
        };
        // Get the user name and store it to prepend to messages.
        $('#displayname').val(prompt('Enter your name:', ''));
        // Set initial focus to message input box.
        $('#message').focus();
        // Start the connection.
        $.connection.hub.start().done(function () {
            $('#sendmessage').click(function () {
                // Call the Send method on the hub.
                chat.server.send($('#displayname').val(), $('#message').val());
                // Clear text box and reset focus for next comment.
                $('#message').val('').focus();
            });
        });
    });
</script>

When I run the page, it asks for the "username". When I type a message and hit "send", it just doesn't respond with anything.

I used Chrome Tools, it seems "chat" variable inside the "click" event is undefined for some reason.

Any idea?

Thanks

Was it helpful?

Solution

I think your issue is that you don't have the right NuGet packages installed.

The reason your chat chat variable is undefined is likely because your http://localhost:8888/signalr/hubs script is not being found, and that script is responsible for defining $.connection.myHub.

Since you are using the latest version (2.0.3) of the SignalR JS client, you should also be using the latest SignalR server components. The Microsoft.AspNet.SignalR.Owin package you installed no longer exists in SignalR 2.x.x. The latest Microsoft.AspNet.SignalR.Owin package actually depends on Microsoft.AspNet.SignalR.Core 1.2.1 which is out of date.

The easiest way to get started self-hosting SignalR, would probably be to uninstall all your SignalR and Owin related packages and follow this tutorial: http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-signalr-20-self-host

This tutorial is based on using the Microsoft.AspNet.SignalR.SelfHost which depends on Microsoft.Owin.SelfHost instead of OwinHost.

It's very important that you install the Microsoft.Owin.Cors package and call app.UseCors(CorsOptions.AllowAll); like in the tutorial since the HubConfiguration.EnableCrossDomain property no longer exits.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top