Using Signalr with Asp.net MVC to create simple chat application

//Using Signalr with Asp.net MVC to create simple chat application

Using Signalr with Asp.net MVC to create simple chat application

By |2012-07-17T13:00:17+00:00July 17th, 2012|Categories: Programming|1 Comment

In this tutorial I am going to talk about creating a simple chat application using signalr library with asp.net MVC. If we are trying to do a chat application or any asynchronous actions with client so we have a lot of work to do using ajax and javascript. Now with signalr it’s so simple and easy.

Step 1: Create an Empty Asp.Net MVC 3 Application

Go to File –> New Project –> Web –> Asp.Net MVC 3 Application (Make sure it’s .Net Framework 4).

Step 2: Add SignalR Package

Right click on references and click Manage NuGet Packages. Search for SignalR and click install. Or use NuGet package manager concole and install the SignalR package using

Install-Package SignalR

Step 3: Add HomeController

Right click on Controllers folder and click Add –> Controller. Then add index view to index action result by right click on index action method –> add view.

Step 4: Create Signalr Hub

Create a class that derives from Hub

public class Chat : Hub
  {
      public void Send(string message)
      {
          //Save to database if you want

          // Call the addMessage method on all clients
          Clients.addMessage(message);
      }
  }

Step 5: Adding Client

Append javascript references to the head of the page as follows

<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-0.5.2.min.js" type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>

As you can notice there is a /signalr/hubs file included but its not in the project because its dynamically generated file in run time

Append the following javascript

<script type="text/javascript">
        $(function () {
            // Proxy created on the fly
            var chat = $.connection.chat;

            // Declare a function on the chat hub so the server can invoke it
            chat.addMessage = function (message) {
                $('#messages').append('<li>' + message + '</li>');
            };

            $("#broadcast").click(function () {
                // Call the chat method on the server
                chat.send($('#msg').val());
            });

            // Start the connection
            $.connection.hub.start();
        });
  </script>

I added commented lines above each line to declare how it works.

Append the following Html to your page

<input type="text" id="msg" />
        <input type="button" id="broadcast" value="broadcast" />
        <ul id="messages">
        </ul>

And that’s it you can run the application now in multiple browsers and all magic starts

You can download a sample from here

 

About the Author:

One Comment

  1. abc 26th October 2013 at 11:52 am - Reply

    can we build signalr chat application with sql server database?

Leave A Comment