The fifth lesson of the ASP. SIGNALR series uses SIGNALR in MVC

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