Next: "ASP. SIGNALR Series" Fourth lesson SIGNALR self-hosted (without IIS)
I. Overview
This tutorial focuses on how to use ASP. NET SignalR under MVC.
- Add the SIGNALR Library to MVC.
- Create hub and Owin startup classes to push content to the client.
- Use the SIGNALR jQuery library to send messages and render updates from the page.
The following screen shows a completed chat application
Ii. Creation of the project
1. Use MVC5. NET4.5 to create a project named Signalrchat
2. Change of authorization.
3. Select No Authentication
Note: If you choose a different licensing method that has one that Startup.cs
will be created automatically for you, in the following steps you do not have to create the class yourself.
4. Open Tools | Library Package Manager | Package Manager Console
install-package Microsoft.AspNet.SignalR
5. The solution has already added what you need.
6. Add a folder named Hubs to the project in the solution
7. In the Hubs folder, add the class file under the SIGNALR node named ChatHub.cs. You can use this class as a service-side hub to send messages to all clients.
8. Class 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 client S. Clients.All.addNewMessageToPage (name, message);}}}
7. Create a Startup class
using Owin; using Microsoft.owin; [Assembly:owinstartup (typeof(Signalrchat.startup))] namespace signalrchat{ publicclass Startup { public void Configuration (Iappbuilder app) { // any connection or hub wire up and Configuration should gohere app. MAPSIGNALR (); }}}
8. Under HomeController, add an action named Chat
Public ActionResult Chat () { return View ();}
9. Add the corresponding attempt
@{viewbag.title = "Chat";}<H2>Chat</H2><Divclass= "Container"> <inputtype= "text"ID= "message" /> <inputtype= "button"ID= "SendMessage"value= "Send" /> <inputtype= "hidden"ID= "DisplayName" /> <ulID= "discussion"> </ul></Div>@section Scripts {<!--Script references. - <!--The JQuery Library is required and was referenced by default in _layout.cshtml. - <!--Reference the SignalR library. - <Scriptsrc= "~/scripts/jquery.signalr-2.1.0.min.js"></Script> <!--Reference the autogenerated SignalR hub script. - <Scriptsrc= "~/signalr/hubs"></Script> <!--SignalR script to update the chat page and send messages. - <Script> $(function () { //Reference The auto-generated proxy for the hub. varChat=$.connection.chathub; //Create a function, the hub can call back to display messages.Chat.client.addNewMessageToPage= function(name, message) {//ADD the message to the page. $('#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 (); //Start the connection.$.connection.hub.start (). Done (function () { $('#sendmessage'). Click (function () { //Call the Send method on the hub.Chat.server.send ($ ('#displayname'). Val (), $ ('#message'). Val ()); //Clear text box and reset focus for next comment. $('#message'). Val ("'). focus (); }); }); }); //This optional function html-encodes messages for display in the page. functionHtmlEncode (value) {varEncodedvalue= $('<div/>'). Text (value). html (); returnEncodedvalue; } </Script>}
10. Running
11. Code Download: Click to download
Three, the elder brother to point enthusiasm, help recommend help top AH