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.
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
pepitosolis 
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?
Hi, I fixed the error (I think) in the OWIN Startup Class the line
[assembly: … the typeof it was SignalRChat but it should be SignalRPersistent.
app.MapSignalR(“/echo”) should be: app.MapSignalR(“/echo”)
app.MapSignalR (“/echo”)
app.MapSignalR cannot use the string as “/echo”, because the string cannot convert to HubConfiguration.
app.MapSignalR(“/echo”);
use app.MapSignalR(“/echo”);
app.MapSignalR(“/echo”);
app.MapSignalR(“/echo”); add chat connection class ChatConnection app.MapSignalR(“/echo”);
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
write this on startup. this is like a bridge between js and cs
app.MapSignalR lt ChatConnection gt (“/echo”);
change lt and gt with original symbols.