【记录】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,如下图:

【记录】MVC4中使用SignalR_第1张图片

 

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

【记录】MVC4中使用SignalR_第2张图片

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

【记录】MVC4中使用SignalR_第3张图片

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的路由映射:

【记录】MVC4中使用SignalR_第4张图片

在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首先弹出填写用户名的对话框:

【记录】MVC4中使用SignalR_第5张图片

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

【记录】MVC4中使用SignalR_第6张图片

在脚本中客户端调用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

你可能感兴趣的:(Signal)