SignalR 2.0 PersistentConnection 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 Persistent Connection, it’s a classic chat application.

SignalRPersistentConnectionRunning

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

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

 Install-Package Microsoft.AspNet.SignalR

Next step is to register a route in ASP.NET using a Global Application Class (Global.asax) but this step has changed in SignalR 2.0.

Instead you need to 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(SignalRPersistent.Startup))]
namespace SignalRPersistent
{

    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR("/echo");
        }
    }
}

The following code is no longer necessary, so there is no need to add this code to the project. This is informational.

namespace SignalRPersistent
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {
            //RouteTable.Routes.MapConnection("echo", "echo/{*operation}");
        }
    }
}

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

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

namespace SignalRPersistent
{
    public class ChatConnection: PersistentConnection
    {
        protected override Task OnReceived(IRequest request, string connectionId, string data)
        {
            return Connection.Broadcast(data);
        }
    }
}

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 type="text/javascript">
        $(function () {
            var connection = $.connection("/echo");

            connection.start().done(function () {
                console.log("Connected");
                $("#chatWindow").val("Connected\n");
                $("#sendButton").click(function () {
                    connection.send($("#messageTextBox").val());
                    $("#messageTextBox").val("")
                });
            });

            connection.received(function (data) {
                $("#chatWindow").val($("#chatWindow").val() + data + "\n");
            });
        });
    </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.

9 Responses to SignalR 2.0 PersistentConnection Example

  1. Darrell Elliott says:

    This is a really nice tutorial, but I am receiving an error when I try and pass the “/echo” parameter in app.MapSignalR(“/echo”). It says that: Owin.IAppBuilder does not contain a definition for MapSignalR and the best extension method overload for Owin.OwinExtensions.MapSignalR(IAppBuilder, Microsoft.AspNet.SignalR.HubConfiguration) has some invalid arguments.

    Is there something that I am missing?

  2. Oren says:

    app.MapSignalR (“/echo”)

  3. Mahadev says:

    app.MapSignalR(“/echo”);

    app.MapSignalR(“/echo”); add chat connection class ChatConnection app.MapSignalR(“/echo”);

  4. Mahadev says:

    sorry about above reply…. but angular brackets not working in this textBox. whatever u write inside
    this textbox will not show. so before (“/echo”) after MapSignalR add less than & greater than symbol
    inside this symbol write your ChatConnection Class

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