"ASP.NET SignalR series" Lesson SignalR use in MVC

Next Prev: "ASP.NET SignalR series" Lesson SignalR self-hosted (not IIS)

I. Overview

This tutorial explains how to use ASP.NET SignalR in the MVC.

• Add SignalR library to the MVC.
• Create a hub and OWIN startup classes to push content to the client.
• Use SignalR jQuery library to send messages and presenting never get updated on the page.

The following screen shot shows a completed chat application

Second, create a project

1. Create a project called SignalRChat with MVC5 .NET4.5

2. Change authorization.

 

3. Select  No Authentication

Note: If you choose a different way to have a license Startup.cswill be automatically created for you; In the following step, you do not have to create a class of their own.

4.打开 Tools | Library Package Manager | Package Manager Console

install-package Microsoft.AspNet.SignalR

 

The solution has been added for what you need

 

6. In the solution added to the project named Hubs folder

 

7. Add Hubs folder SignalR class files node, called ChatHub.cs . This class may be used to send messages to all of the client server as a hub.

 

8. Class Code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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);          }      } }

 

7. Create a Startup class

 

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();
        }
    }
}

8. Add an action at HomeController, called Chat

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

9. Add the corresponding attempt

@{
    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 {
    <!--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.1.0.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 () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that 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.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

10. Run

 

 

 

11. download: Download

Third, the Xiongtai to the point of passion, help recommend Bangding ah

Next Prev: "ASP.NET SignalR series" Lesson SignalR self-hosted (not IIS)

I. Overview

This tutorial explains how to use ASP.NET SignalR in the MVC.

• Add SignalR library to the MVC.
• Create a hub and OWIN startup classes to push content to the client.
• Use SignalR jQuery library to send messages and presenting never get updated on the page.

The following screen shot shows a completed chat application

Second, create a project

1. Create a project called SignalRChat with MVC5 .NET4.5

2. Change authorization.

 

3. Select  No Authentication

Note: If you choose a different way to have a license Startup.cswill be automatically created for you; In the following step, you do not have to create a class of their own.

4.打开 Tools | Library Package Manager | Package Manager Console

install-package Microsoft.AspNet.SignalR

 

The solution has been added for what you need

 

6. In the solution added to the project named Hubs folder

 

7. Add Hubs folder SignalR class files node, called ChatHub.cs . This class may be used to send messages to all of the client server as a hub.

 

8. Class Code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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);          }      } }

 

7. Create a Startup class

 

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();
        }
    }
}

8. Add an action at HomeController, called Chat

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

9. Add the corresponding attempt

@{
    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 {
    <!--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.1.0.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 () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that 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.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

10. Run

 

 

 

11. download: Download

Third, the Xiongtai to the point of passion, help recommend Bangding ah