【记录】MVC4中使用SignalR

前言

　　周末在偶尔翻阅微软官网的时候看到Getting Started with SignalR and MVC 4此篇文章，知道了signalr这个东西，貌似这个出来很长时间了，奈何自己一直没有发现，不妨写篇文章敲一下代码记录这个东西。

　　ASP .NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。WebSockets是HTML5提供的新的API，可以在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）SignalR使用WebSockets，当不支持时SignalR将使用其它技术来保证达到相同效果。SignalR当然也提供了非常简单易用的高阶API，使服务器端可以单个或批量调用客户端上的JavaScript函数，并且非常方便地进行连接管理，例如客户端连接到服务器端，或断开连接，客户端分组，以及客户端授权，使用SignalR都非常容易实现。SignalR 将与客户端进行实时通信带给了ASP .NET 。当然这样既好用，而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据，现在只要使用SignalR，就可以简单实现了。最重要的是您无需重新建立项目，使用现有ASP .NET项目即可无缝使用SignalR。

1、向MVC4项目添加对signalr类库的引用

　　新建一个mvc4项目,并通过Nugget包管理器获取Microsoft.AspNet.SignalR，如下图：

选择第一个点击添加以后弹出所有依赖的类库安装说明，选择接受：

安装完成以后可以看到所有依赖的类库，及项目中需要的js，和使用说明：

2、添加Hub像客户端发送内容

在项目中新建一个文件夹Hub,新增一个SignalR Hub类ChatHub.cs继承Hub此类将作为向客户端发送消息的服务端处理类。添加如下代码：

public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // 客户端调用addNewMessageToPage方法传送信息
            Clients.All.addNewMessageToPage(name, message);
        }
    }

在Global.asax中添加对hub的路由映射：

在HomeController中添加action-chat并返回视图，在视图中添加如下代码：

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

视图：

@{
    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 {
    <!--脚本引用. -->
    <!--添加SignalR 引用. -->
    <script src="~/Scripts/jquery.signalR-1.1.3.js"></script>
    <!--引用自动生成 SignalR hub 的脚本. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR --> 
    <script>
        $(function () {
            //在客户端定义 hub class 所对应的 proxy 类；
            var chat = $.connection.chatHub;
            // 调用后台方法返回数据
            chat.client.addNewMessageToPage = function (name, message) {
                // 在页面上添加信息
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            // 页面起始填写登陆名登陆名
            $('#displayname').val(prompt('Enter your name:', ''));
            $('#message').focus();
            //开始连接
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // 请求发送信息方法 request send method
                    chat.server.send($('#displayname').val(), $('#message').val());
                    
                    $('#message').val('').focus();
                });
            });
        });
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

View Code

运行程序请求/home/chat首先弹出填写用户名的对话框：

输入名称以后，填写消息发送，所有的消息都可以及时从后台返回到也也页面上，可以多开几个窗口测试如图：

在脚本中客户端调用ChatHub.Send方法发送新消息，后台通过Clients.All.addNewMessageToPage方法向所有客户端回发消息，在ChatHub类中，可以定义公共的方法供客户端jquery调用，通过Microsoft.AspNet.SignalR.Hub.Clients来连接所有客户端。

周末偶然看到的一个东西也没有深入研究，本人也是初识很多地方不太了解，查了一些资料以备不时只需：

https://github.com/SignalR/SignalR

http://www.codeproject.com/Articles/536514/SignalRplusOnlineplusCounterplusSample

http://www.codeproject.com/Articles/524066/SignalR-Simple-Chat-Application-in-Csharp