How To Build A Chat App C# Mvc

Updated date Apr 17, 2019

35.7k
0

SignalR can be easily integrated with ASP.NET web applications and it supports mobile and JavaScript too.

Introduction

SignalR is a web-based real-time bidirectional communication framework. It's very useful in terms of user-friendliness. While developing a chat application or broadcasting the message like notification popup, before SignalR came into the picture, we used to use the request/response technology where the server had to wait for the client's request. On the other hand, in SignalR, we can directly push the message to the clients.

It has three important transport mediums as mentioned below.

Server-Sent Event.
ForEver Frame.
Long Polling.

Implementation

Step 1

Open Visual Studio and create a new ASP.NET web application.

Step 2

Select MVC and authentication mode as "No Authentication".

Step 3

Open Package Manager Console and type the following command to install the NuGet package. Alternatively, click Add >> New Item >> SingalR and the select SignalR Hub Class (v2) followed by a click on the OK button.

install-package Microsoft.AspNet.SignalR

ASP.NET MVC Chat Application By Using SignalR

Step 4

In Myhub1.cs class, add the following method.

public void Send( string name, string message)
{
Clients.All.addNewMessageToPage(name, message);
}

Step 5

In Solution Explorer, right click and add a new class with the name as "Startup.cs" and then, install "Microsoft.Owin" NuGet package.

Step 6

Open the HomeController.cs class and add the chat method.

Step 7

Create a new View called "Chat" under "Home" folder and delete the existing code from View and add the below code.

@{
ViewBag.Title ="Chat" ;
}
<h2>Chat</h2>
<script src="~/Scripts/jquery.signalR-2.1.0.min.js" ></script>
<divclass = "container" >
<input type="text" id= "message" />
<input type="button" id= "sendmessage" value= "Send" />
<input type="hidden" id= "displayname" />
<ul id="discussion" ></ul>
</div>
@section scripts {
<script src="~/Scripts/jquery.signalR-2.1.0.min.js" ></script>
<script src="~/signalr/hubs" ></script>
<script>
$(function () {
var chat = $.connection.myHub1;
chat.client.addNewMessageToPage =function (name, message) {
$('#discussion' ).append( '<li><strong>' + htmlEncode(name)
+'</strong>: ' + htmlEncode(message) + '</li>' );
};
$('#displayname' ).val(prompt( 'Enter your name:' , '' ));
$('#message' ).focus();
$.connection.hub.start().done(function () {
$('#sendmessage' ).click( function () {
chat.server.send($('#displayname' ).val(), $( '#message' ).val());
$('#message' ).val( '' ).focus();
});
});
});
function htmlEncode(value) {
var encodedValue = $( '<div />' ).text(value).html();
return encodedValue;
}
</script>
}

Step 8

Create a chat menu in the _Layout.cshtml file as shown below.

<li>@Html.ActionLink( "Home" , "Chat" , "Chat" )</li>

ASP.NET MVC Chat Application By Using SignalR

Conclusion

Save all the files in Visual Studio and run the same. In the browser, the system will ask us to enter the name. Copy the http://localhost:62167/Home/Chat URL and put it into another browser tab.

That's all. Now, we can enjoy the chat.

Code Sample

Startup.cs

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof (SignalRChat.Startup))]
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}

ChatHub.cs

public class ChatHub : Hub
{
public void Send( string name, string message)
{
Clients.All.addNewMessageToPage(name, message);
}
}

Global.asax.cs

public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}