《ASP.NET SignalR系列》第五课在MVC中使用SignalR

时间：2014-07-22 00:36:34 阅读：279 评论：0 收藏：0 [点我收藏+]

标签：des style blog http color 使用

接着上一篇：《ASP.NET SignalR系列》第四课 SignalR自托管(不用IIS)

一、概述

本教程主要阐释了如何在MVC下使用ASP.NET SignalR。

添加SignalR库到MVC中。
创建hub和OWIN startup 类来推送内容到客户端。
在页面中使用SignalR jQuery 库发送消息和呈现从来得更新。

下面屏幕截图展示了一个完成的聊天应用程序

bubuko.com,布布扣

二、创建项目

1.用MVC5 .NET4.5 创建一个名为SignalRChat的项目

bubuko.com,布布扣

2.改变授权.

bubuko.com,布布扣

3.选择 No Authentication

bubuko.com,布布扣

注意: 如果你选择了一个不一样的授权方式有一个 Startup.cs 会自动为你创建; 在下面的步骤中，你就不必自己创建这个类了。

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

install-package Microsoft.AspNet.SignalR

5.解决方案中已经为你添加了需要的东西了

bubuko.com,布布扣

6.在解决方案中给项目添加一个名为Hubs文件夹

7.在 Hubs文件夹中添加SignalR节点下的类文件, 名为ChatHub.cs. 可以使用这个类作为服务端hub发送消息到所有的客户端。

bubuko.com,布布扣

8.类代码

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

8.在HomeController下添加一个action,名为Chat

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

9.添加对应试图

@{
    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>
}