How-to-create-chat-application-in-asp-net.jpg
Blogger_636323265526655532.jpg
By: Akhil

How to create chat application in asp.net?

SignalR is a pretty new and very exciting feature in ASP.NET. It offers a simple and clean API that allows you to create real-time web applications where the server needs to continuously push data to clients. Common applications are chat, news feeds, notifications and multi-player games. Below shown are the steps for using the signal-R in the chat between the users.

     1.  Create a new project by selecting ‘File’. After that select the option ‘New’ under that. And then select the option ‘project’. Select ‘ASP.NET Empty Web Application’ from Web in Visual C#  and name the project as ‘ChatApplication’. 

How-to-create-chat-application-in-asp-net.jpg

2. Add a New Web Form in the project. And name it as ‘home.aspx’


How-to-create-chat-application-in-asp-net.jpg

3. Then add ‘Microsoft.AspNet.SignalR.Core.dll’ , ’ Microsoft.AspNet.SignalR.Owin.dll’, ‘Owin.dll ‘, ‘Microsoft.Web.Infrastructure.dll’, ’Microsoft.AspNet.SignalR.SystemWeb.dll’,  ‘Newtonsoft.Json.dll’, ‘Microsoft.Owin.Host.SystemWeb.dll’ as reference.

 

How-to-create-chat-application-in-asp-net.jpg

4. Insert a new folder for adding scripts and name that folder as ‘Scripts’ and then add ‘jquery-1.6.4.js’, ‘jquery.signalR-1.0.1.js’, ‘jquery.signalR-1.0.1.min.js’, ’ jquery-1.6.4.min.js’, ‘jquery-1.6.4-vsdoc.js’ after downloading it from Google.


How-to-create-chat-application-in-asp-net.jpg

5. Add a Class to the project and name it as ‘chatHub.cs’. And then add the following code in the class.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

 

namespace ChatApplication

{

    public class chatHub:Hub

    {

        public void Send(string name, string message)

        {

            Clients.All.sendMessage(name, message);

        }

    }

}

 

6.Then Add a Global Application Class and name it as Global.asax and put the following code in it.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.SessionState;

using System.Web.Routing;

 

namespace ChatApplication

{

    public class Global : System.Web.HttpApplication

    {

        protected void Application_Start(object sender, EventArgs e)

        {

            RouteTable.Routes.MapHubs();

        }

        protected void Session_Start(object sender, EventArgs e)

        {

        }

        protected void Application_BeginRequest(object sender, EventArgs e)

        {

        }

        protected void Application_AuthenticateRequest(object sender, EventArgs e)

        {

        }

        protected void Application_Error(object sender, EventArgs e)

        {

        }

        protected void Session_End(object sender, EventArgs e)

        {

        }

        protected void Application_End(object sender, EventArgs e)

        {

        }

    }

}

 

7. In the ‘home.aspx’ put the below code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="ChatApplication.home" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

<form id="frmHome" runat="server">

    <div>

        <ul id="ulInbox">

            <li><span id="lblName">Name:</span> <span id="lblMessage">Message</span></li>

        </ul>

        <ul>

            <li>

                <input type="text" id="txtMessage" value="" />

                <input type="button" id="btnSend" value="Send" />

                <input type="hidden" id="txtName" />

            </li>

        </ul>

    </div>

    </form>

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script>

<script src="signalr/hubs" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        // Proxy created on the fly         

        var chat = $.connection.chatHub;

        // Get the user name and store it to prepend to messages.

        $('#txtName').val(prompt('Enter your name:', ''));

        // Declare a function on the chat hub so the server can invoke it     

        chat.client.sendMessage = function (name, message) {

            var username = $('<div />').text(name).html();

            var chatMessage = $('<div />').text(message).html();

            $('#ulInbox').append('<li>' + username +':&nbsp;&nbsp;'+chatMessage+'</li>');

        };

        // Start the connection

        $.connection.hub.start().done(function () {

           $('#btnSend').click(function () {

              // Call the chat method on the server

              chat.server.send($('#txtName').val(), $('#txtMessage').val());

              $('#txtMessage').val('');

           });

        });

    });

    </script>

</body>

</html>

 

In the above code, the chat.server.send is used to send the message and send is a function in chatHub.cs with two parameters as shown below.

public void Send(string name, string message)

        {

            Clients.All.sendMessage(name, message);

        }

From the ChatHub it will call Clients.All.sendMessage(name, message).That will call the function in all the client pages. All the clients who uses the sendMessage function will receive the name and message.

In the home page we have written the code for that,

chat.client.sendMessage = function (name, message) {

            var username = $('<div />').text(name).html();

            var chatMessage = $('<div />').text(message).html();

            $('#ulInbox').append('<li>' + username +':&nbsp;&nbsp;'+chatMessage+'</li>');

       };

 

 
8. After debugging the project we get the following output. The image below shows the project running on two browsers which is same to work on two systems. First, it will ask the name of the users. In the first browser We put the name as Akhil and in the second user we put the name as John.


How-to-create-chat-application-in-asp-net.jpg


9. In the textbox of the first user which is Akhil, we put a message Hi and click the Send button.


How-to-create-chat-application-in-asp-net.jpg

10. The message sends by Akhil will be received in John without any action. Also, the John will enter a hello message on textbox and then click the send button.


How-to-create-chat-application-in-asp-net.jpg


11. The Hello message will reach all the clients. 


How-to-create-chat-application-in-asp-net.jpg




Comments

1

van cleefs & arpels replique

05/11/2017 - 5:37AM

Hello, I log on to your blogs regularly. Your story-telling style is awesome, keep it up! van cleefs & arpels replique [url=http://www.holidayvcagift.cn/fr/magic-fake-van-cleef-necklace-c1_3/]van cleefs & arpels replique[/url]




Leave a comment