SignalR 2.0 Hub Example

SignalR 2.0 includes some changes that we need to be aware of before trying to run a SignalR 1.x sample.

This example will focus on the Hub, it’s the same example (chat application) as the previous post but using Hub instead of PersistentConnection.

SignalRPersistentConnectionRunning

First create a new project ASP.NET Web Application and select the Empty template. Name it “SignalRHub”

Add NuGet packages, “Microsoft.ASP.NET SignalR”. You can use the NuGet console just type this command:

 Install-Package Microsoft.AspNet.SignalR

Add an OWIN Startup Class. So Add, New Item… and select Owin Startup Class. Name the new class Startup.cs

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRHub.Startup))]

namespace SignalRHub
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

Now we add a new Class, name it “Chat.cs”

using Microsoft.AspNet.SignalR;

namespace SignalRHub
{
    public class Chat : Hub
    {
        public void Send(string message)
        {
            Clients.All.AddMessage(message);
        }
    }
}

That’s it for the server-side part of the project. Now for the client-side, we need an HTML page and some JavaScript to connect to the server and chat.
Add an HTML page and name it index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.0.0.js"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var chat = $.connection.chat;

            chat.client.addMessage = function (message) {
                $("#chatWindow").val($("#chatWindow").val() + message + "\n");
            }

            $.connection.hub.start().done(function () {
                $("#chatWindow").val("Connected\n");
                $("#sendButton").click(function () {
                    chat.server.send($("#messageTextBox").val());
                    $("#messageTextBox").val("")
                });
            });
        });
    </script>
</head>
<body>
    <textarea id="chatWindow" style="width:400px; height:200px;"></textarea>
    <div>
        <label>Message</label>
        <input id="messageTextBox" type="text"/>
        <button id="sendButton">Send</button>
    </div>
</body>
</html>

This code is based on the examples from the book SignalR: Real-time Application Development by Einar Ingebrigtsen

Advertisements
This entry was posted in SignalR and tagged , , , . Bookmark the permalink.

3 Responses to SignalR 2.0 Hub Example

  1. Tintu says:

    nice copied from asp.net site. do it u rs man

    • pepitosolis says:

      This example was copied from the book SignalR: Real-time Application Development by Einar Ingebrigtsen and it didn’t run because the new version 2.0 changed some things like Owin. Go check the book for yourself.
      If this example is on the asp.net site, you better ask Einar Ingebrigtsen about it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s