SignalR 2 和 MVC 5 初试

做项目要用到一个聊天室的功能，找了好长时间也找不到合适的案例，后来同事建议我看看SignalR，结果发现网上资料一大片，就是没有自己想要的，后来搬着官方的API看了两天，终于有些了解了。http://www.asp.net/signalr/overview/guide-to-the-api

以下是官方给的一个例子，给大家翻译过来看看（翻译不好的地方大家别见笑，毕竟是新手）

概述

这个例子介绍了用ASP.NET SignalR 2 和 ASP.NET MVC 5开发实时 web 应用程序。和(SignalR Getting Started tutorial)中的代码是一样的，但是把代码加到了MVC 5应用程序中。

这个话题讲述了以下的SignalR开发任务：

添加SignalR库到 MVC 5 应用程序.
创建 hub and OWIN 启动类推送内容到客户端.
在 web 页面中用 SignalR jQuery 库发送消息并显示来自hub的更新.

以下是完成后的聊天程序在浏览器运行的效果.（本人比较懒，用的都是官方的图片）

步骤：

建立工程
运行实例
检查代码
下一步

建立工程

前提条件:

Visual Studio 2013. 如果没有安装, 到 ASP.NET Downloads 获取免费的 Visual Studio 2013 Express 开发工具.

这一步教你如何创建 ASP.NET MVC 5 应用程序，添加SignalR 库，创建聊天程序.

1.在 Visual Studio中, 创建一个面向 .NET Framework 4.5的 C# ASP.NET 应用程序, 命名为 SignalRChat,单击OK.

2.在新的 ASP.NET 工程对话框中, 选择 MVC, 单击 Change Authentication.

3. 在Change Authentication 对话框中选择 No Authentication, 单击 OK

注意:如果您的应用程序选择了不同的身份验证方式 ，Startup.cs 类将会自动创建，下面的第10步不需要自己创建了.

4.在新的ASP.NET工程对话框中单击OK

5.打开 Tools | Library Package Manager | Package Manager Console（工具|NuGet程序包管理器|程序包管理控制台）运行一下命令。这一步添加 SignalR 功能用的一系列的脚本文件和程序集引用。

6.在 Solution Explorer（解决方案资源管理器）中, 打开Scripts 文件夹. 记下工程中为SignalR添加的脚本库。

7.在 Solution Explorer（解决方案资源管理器）中, 右击工程, 选择 Add | New Folder, 添加一个名为 Hubs 的文件夹.

8.右击 Hubs 文件夹, 单击 Add | New Item, 在安装面板中选择 Visual C# | Web | SignalR节点, 从中央面板选择 SignalR Hub Class (v2), 创建一个新的Hub ChatHub.cs.你将使用这个类作为SignalR服务器Hub向所有的客户端发送信息。

9.用以下的代码替换ChatHub类中的代码

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

10.创建一个新的类 Startup.cs.把文件的内容改成如下：

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

11.编辑HomeController类（Controllers/HomeController.cs），把以下的方法添加到类中。这个方法返回下一步你要创建的Chat 视图。

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

12.右击Views/Home 文件夹，选择Add... | View.(在Chat方法上右击更方便哦)

13.在添加视图对话框中，命名视图为Chat

14.用以下的代码替换Chat.cshtml 中的内容

重要事项: 当你添加SignalR 和其他的脚本库到 Visual Studio 工程时, 程序包管理可能会安装更新版本的SignalR脚本文件. 请确保脚本参照与你工程中安装的脚本库版本一致。

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

15.保存工程。

运行实例

按 F5 运行工程，进入调试模式.
在浏览器的地址栏中, 添加 /home/chat 到工程的默认页面URL后面.浏览器实例中加载了Chat页面，并提示输入用户名。

3.输入用户名

4.拷贝浏览器地址栏的URL，并用它打开两个以上的浏览器实例。在每个浏览器实例中，输入唯一的用户名。

5.在每个浏览器实例中，添加一个评论，单击Send。那个评论就显示到所有的浏览器实例中了。

注意: 这个聊天实例没有管理服务器上讨论的context。hub会把评论广播给所有的当前用户。后加入的用户会看到他们加入后添加的消息。

6.以下是chat应用程序在浏览器的运行结果。

7.在解决方案资源管理器中，检查运行程序的 Script Documents 节点。如果你用的是Internet Explorer ，这个节点在调试模式下是可见的。有个hubs 脚本文件是运行时SignalR库动态生成的。这个文件管理着jQuery脚本和服务器端代码的通信。如果你用的不是Internet Explorer，你也可以通过直接浏览的方式访问这个动态hubs文件。例如http://mywebsite/signalr/hubs.

检查代码

SignalR chat 应用程序演示了两个基本的 SignalR开发任务:在服务器端创建hub作为主协调对象，用SignalR jQuery 库发送和接收消息.

SignalR Hubs

在代码实例中 ChatHub 类派生自 Microsoft.AspNet.SignalR.Hub 类. 从 Hub 类派生是建立SignalR应用程序的有效方式。你可以在你的 hub 类上创建公共方法并通过web页面的脚本调用访问这些方法。

在 chat 代码中, 客户端调用 ChatHub.Send 方法发送新消息，通过调用 Clients.All.addNewMessageToPage hub 依次发送消息到所有的客户端。

Send 方法展示了几个 hub 概念 :

hub 上声明公共方法一边客户端可以调用
用 Microsoft.AspNet.SignalR.Hub.Clients 属性访问连接到这个 hub的所有客户端.
调用客户端方法（如 addNewMessageToPage方法）更新客户端

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

SignalR 和 jQuery

代码实例中的 Chat.cshtml 视图文件展示了如何使用 SignalR 脚本库和SignalR hub通信. 代码中关键是创建一个自动生成hub代理的参照，声明一个服务器端可以调用的方法推送内容的到客户端，启动一个连接以发送信息到hub.

以下代码声明了一个hub代理的参照。

var chat = $.connection.chatHub;

注意: 在 JavaScript中对服务器端类的参照和它的成员用"骆驼拼写法".代码实例中，参照C# ChatHub类，在JavaScript中为chatHub。如果你想在jQuery中用常规的Pascal拼写法参照ChatHub，就像在C#中一样，修改ChatHub.cs类文件。添加一个using 语句去参照Microsoft.AspNet.SignalR.Hubs命名空间。然后添加HubName属性到ChatHub 类，例如[HubName("ChatHub")]。更新jQuery参照到ChatHub 类。

以下代码展示了如何在脚本中创建一个回调函数。服务器端的hub类调用这个函数把更新内容推送到每个客户端。htmlEncode 方法展示了用HTML编码后在页面展示信息内容，以防脚本注入。

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

以下代码展示了如何用hub打开一个连接。代码启动连接并传递给它一个方法去处理Chat页面上Send按钮的click事件

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

下一步

你知道了SignalR是用于建立实时web应用程序的框剪。你也知道了几个SignalR的开发任务：如何添加SignalR到 ASP.NET 应用程序，如何创建hub 类，如何发送和接收来自hub的消息。

你可以用这个教程创建一个实例或者部署字在托管服务提供商，可以通过Internet使用的其他的SignalR应用程序。在Windows Azure trial account中，微软提供的免费网站托管多达10个站点。如何部署一个简单的SignalR应用程序，请访问Using SignalR with Windows Azure Web Sites。获取更多关于如何部署一个 Visual Studio web工程到Windows Azure 网站，请访问Deploying an ASP.NET Application to a Windows Azure Web Site.

了解更多高级的SignalR开发观念，访问一下站点获取SignalR的源代码和资源。

posted @ 2014-12-31 15:56 今天起个早阅读(905) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

今天起个早