ASP. NET SIGNALR Create live chat application

I. Overview

Use ASP. SignalR 2 To create a live chat application. Add SignalR to the MVC 5 application and create a chat view to send and display the message.

In the demo, the Learning SIGNALR development tasks include:

Add that SignalR Library to the MVC 5 application.
Create a hub and a Hao startup class to push content to the client.
Use the SignalR jQuery library in the Web page to send messages and display updates from the hub.

The following screen shot shows the completed chat application running in the browser.

Two. 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 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, it will create the Startup.cs class, where no authentication is chosen for all of us to create a startup class ourselves.

3). Install 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 the project and an assembly reference that enables the SignalR feature.

Input: Install-package Microsoft.AspNet.SignalR

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

4). Create the 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 the existing item:
Right-click the Hubs folder, click Add | New project, select Visual C # | Web | So SignalR node in the installed pane, from the center pane, select the SignalR 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 discovery in Controllers/homecontroller.cs, add the following method to the class. This method returns the view of the chat that you will create in a later step.

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

7). On the Chat () method, right-click > Add View Page

Modify the code to:

@ {
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" / >
< ul id = "discussion" > < / ul >
< / div >
@ section scripts {
<!--</span--> -- Script references. -- -- >
<!--</span--> The jQuery library is required and is referenced by default in _layout. CSHTML
<!--</span--> Reference the SignalR library
< script SRC = "~ / Scripts/jquery. SignalR - 2.0.3. Min. Js" > < / script >
<!--</span--> --Reference the autogenerated SignalR hub script. -->
< script SRC = "~ / signalr hubs" > < / script >
<!--</span--> SignalR script to update the chat page and send messages
< script >
$(function () {
/ / set up corresponding server side Hub class object, please note ChatHub (Hubs folder under the name of the class) to the first letter to lowercase
Var chat = $. Connection. ChatHub;
// defines javascript functions on the client side for the server-side hub to call all Clients' javascript functions dynamically
Chat. Client. AddNewMessageToPage = function (name, message) {/ / the fuction (name, message) = > ChatHub. Send in the cs (string name, string message)
// when the server calls sendMessage, the message data of server push is presented in wholeMessage
$(' # the discussion). Append (' < li > < strong > '+ the htmlEncode (name)
+ ': '+ htmlEncode(message) + '');
};
// 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). The focus ();
// turn the connection on
$. Connection. The hub. The start (). The done (function () {
$(' # sendmessage). Click (function () {
// call the Hub object on the server side and pass the #message data to the server
Chat. Server. The send ($(' # displayname). Val () and $(' # message). Val ());
$(' # message). Val (' '). The focus ();
});
});
});
// This optional function html-encodes messages for display in the page.
The function the htmlEncode (value) {
Var encodedValue = $(' < div / >). The text (value). The HTML ();
Return encodedValue;
}
< / script >
}




	



	



	



	



	



	



	F5 run the project can achieve the above effect, you can have the user in real-time synchronization chat.


	



	



	The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.