Simple Browser Based SignalR Chat Application in ASP.NET


In this article, let’s discuss how to build a simple browser-based SignalR chat application.

ASP.NET SignalR is a new library for ASP.NET developers that makes developing real-time web functionality easy. SignalR allows bi-directional communication between server and side. Servers can now push content to connected cliently instantly as it becomes available. SignalR supports Web Sockets, and falls back to other compatible techniques for older browsers. SignalR includes APIs for connection management (for instance, connect and disconnect events), grouping connections, and authorization.

SignalR simplifies the process of building real-time applications. It includes an ASP.NET server library and a JavaScript client library to make it easier to manage client-server connections and push content updates to clients. You can add the SignalR library to an existing ASP.NET application to gain real-time functionality.

Steps:

1. Create an ASP.NET empty web application project. Call it as “SignalRChat”.

2. Add a new “SignalR Hub Class”, call it as e.g ChatHub.cs

3. Once you added SignalR Hub Class, Script libraries for jQuery and SignalR are automatically added in the project by visual studio. Since it uses old jQuery, you can remove it and add latest jQuery file (1.10 version) which is optional.

4. Add following method in the ChatHub class.


public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}

5. Add a “Gloabal Application Class” file to project.

6. Include following namespaces.


using System.Web.Routing;
using Microsoft.AspNet.SignalR;

7. Add the following line of code in the Application_Start method of the Global class to register the default route for SignalR hubs.


RouteTable.Routes.MapHubs();

8. Add a ASPX page in the project, call it as “Default.aspx”, include following css and code.


<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>

<div>
<div>
<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-1.10.2.min.js"></script>
<!--Reference the SignalR library. -->
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = 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>
</div>

9. Save the project and rebuild the solution. Run the project.

10. First you will be asked to enter your name.

11. Enter your name, click “ok” button to continue. Open another instance of browser, just copy paste the URL from first browser to another. Enter your name on another instance of browser, hit “ok” button.

12. Now enter a message and and click “Send” button. You will see messages you sent will be appeared on all instances of browser.

Hope this help you.

Source Code Download:

Github [Repository Link]

Advertisements

One thought on “Simple Browser Based SignalR Chat Application in ASP.NET

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