asp.net signalr Create real-time chat applications _ Practical Tips

I. Overview

Create a live chat application with asp.net so signalr 2. Add SIGNALR to the 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 the MVC 5 application.
Create hubs and the Hao boot class to push content to the client.
Use the SIGNALR jQuery Library on the Web page to send mail and display updates from the hub.

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

Two. To achieve

Create a ASP.net MVC 5 application, install the SIGNALR library, add and create chat applications.

1. In Visual Studio, create a C # asp.net application's target. NET framework 4.5, named Signalrchat, and click OK.

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

Note: If the application chooses a different authentication provider, the Startup.cs class will be created, where no authentication is selected and all ourselves create a startup class.

3). Installation SIGNALR
Open the Tools | Library Package Manager | Package Manager console, and then run the following command. This step adds a set of script files to your project and an assembly reference that enables the SIGNALR feature.

Input: Install-package Microsoft.AspNet.SignalR

The installation is complete, and a file such as this appears under the Scripts folder:

4). To create a startup class:

Create a class under 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 the Hubs folder to the project and add an existing item:
Right-click the Hubs folder, click Add | new item, select Visual C # | Web | Then SIGNALR node in the installed pane, from the center pane, select then signalr the Hub Class (V2) and create the name ChatHub.cs.

To 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 found in Controllers/homecontroller.cs, add the following methods to the class. The chat view returned by this method, which you will create in a later step.

Public ActionResult Chat ()

{return

 View ();

}

7. Right-> Add View page on Chat () method

Modify the code as:

@{viewbag.title = "Chat";} <h2>Chat</h2> <div class= "container" > <input type= "text" id= "message" /> <input type= "button" id= "SendMessage" value= "Send"/> <input type= "hidden" id= "displayname"/> <u L id= "discussion" ></ul> </div> @section Scripts {<!--Script references.--> <!--the jQuery Libr ARY is required and are 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 message  S.--> <script> $ (function () {/) to establish an object corresponding to the server hub class, note that the first letter of the Chathub (the class name under the Hubs folder) is changed to lowercase var chat =
   $.connection.chathub; Defines the client-side JavaScript function for the server-side hub to invoke all clients JavaScript function by dynamic means chat.client.addNewMessAgetopage = Send (string name, String message) in Fuction (Name,message) =>chathub.cs of the function (name, message) {// /when server-side calls SendMessage, the message data for server push is rendered in wholemessage $ (' #discussion '). Append (' <li><strong
   > ' + htmlEncode (name) + ' </strong>: ' + htmlEncode (message) + ' </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 (); Turn the connection on $.connection.hub.start (). Done (function () {$ (' #sendmessage '). Click (function () {//call called server
     -Side Hub object that passes the #message data to the server Chat.server.send ($ (' #displayname '). Val (), $ (' #message '). Val ());
    $ (' #message '). Val ('). focus ();
   });
  });
  });
  This optional function html-encodes messages to display in the page.
   function HtmlEncode (value) {var encodedvalue = $ (' <div/> '). Text (value). html ();
  return encodedvalue;
} </script>} 

F5 run the project can achieve the above effect, you can have users to join real-time synchronization chat.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.