Asp.net SignalR creates real-time chat application

1. Overview

Create a real-time chat application using ASP.NET and SignalR 2. Add SignalR to your MVC 5 application and create a chat view to send and display messages.

In the Demo, you will learn SignalR development tasks including:

Add the SignalR library to an MVC 5 application.
Create hub and startup classes to push content to clients.
Use the SignalR jQuery library from your web page to send emails and display updates from the hub.

The screenshot below shows the completed chat application running in the browser.

2. Implement

Create an ASP.NET MVC 5 application, install the SignalR library, add and create a chat application.

1). In Visual Studio, create a C# ASP.NET application targeting .NET Framework 4.5, name it SignalRChat, and click OK.

2). In the New ASP.NET Project dialog box , select MVC and click Change Authentication

Note: If the application selects a different authentication provider, the Startup.cs class will be created, here select No Authentication so we create a Startup class ourselves.

3).Install SignalR
Open Tools | Library Package Manager | Package Manager Console and run the following command. This step adds a set of script files and assembly references to the project that enable the SignalR functionality.

Input: install-package Microsoft.AspNet.SignalR

The installation is complete, and a file like this appears in the Scripts folder:

4). Create the Startup class:

Create the class in the root directory , named Startup:

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
 public class Startup
 {
  public void Configuration(IAppBuilder app)
  {
   // Any connection or hub wire up and configuration should go here
   app.MapSignalR();
  }
 }
}

5). Add Hubs folder in the project, add existing items:
Right-click the Hubs folder, click Add | New Project, select Visual C# | Web | Then SignalR node In the Installed pane, from the center pane, select the SignalR Hub class (v2) and create a file called ChatHub.cs.

Modify the code:

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
 public class ChatHub : Hub
 {
  public void Send(string name, string message)
  {
   // Call the addNewMessageToPage method to update clients.
   Clients.All.addNewMessageToPage(name, message);
  }
 }
}

6). Edit the HomeController class and find it in Controllers/HomeController.cs. Add the following method to the class. This method returns the view of the chat, which you will create in a later step.

public ActionResult Chat()
 
{
 
 return View();
 
}

7). Right-click on the Chat() method >Add View Page

Modify the code to:

@{
 ViewBag.Title = "Chat";
}
<h2 id="Chat">Chat</h2>
<div class="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 references. -->
 <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
 <!--Reference the SignalR library. -->
 <script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
 <!--Reference the autogenerated SignalR hub script. -->
 <script src="~/signalr/hubs"></script>
 <!--SignalR script to update the chat page and send messages.-->
 <script>
  $(function () {
   // 建立对应server端Hub class的对象，请注意ChatHub(Hubs文件夹下的类名)的第一个字母要改成小写
   var chat = $.connection.chatHub;
   // 定义client端的javascript function，供server端hub，通过dynamic的方式，调用所有Clients的javascript function
   chat.client.addNewMessageToPage = function (name, message) { //这里的fuction(name,message)=>ChatHub.cs 中的Send(string name, string message)
    //当server端调用sendMessage时，将server push的message数据，呈现在wholeMessage中
    $(&#39;#discussion&#39;).append(&#39;<li><strong>&#39; + htmlEncode(name)
     + &#39;</strong>: &#39; + htmlEncode(message) + &#39;</li>&#39;);
   };
   // Get the user name and store it to prepend to messages.
   $(&#39;#displayname&#39;).val(prompt(&#39;Enter your name:&#39;, &#39;&#39;));
   // Set initial focus to message input box.
   $(&#39;#message&#39;).focus();
   //把connection打开
   $.connection.hub.start().done(function () {
    $(&#39;#sendmessage&#39;).click(function () {
     //调用叫server端的Hub对象，将#message数据传给server
     chat.server.send($(&#39;#displayname&#39;).val(), $(&#39;#message&#39;).val());
     $(&#39;#message&#39;).val(&#39;&#39;).focus();
    });
   });
  });
  // This optional function html-encodes messages for display in the page.
  function htmlEncode(value) {
   var encodedValue = $(&#39;<div />&#39;).text(value).html();
   return encodedValue;
  }
 </script>
}

Run the project with F5 to achieve the above effect, you can have Users join live synchronous chats in real time.

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to creating real-time chat applications with Asp.net SignalR, please pay attention to the PHP Chinese website!