SignalR2.0开发实例之——群发消息

时间：2015-12-26 16:41:13 阅读：290 评论：0 收藏：0 [点我收藏+]

标签：

一、前言

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。

这博文主要为了提高大家的实战应用，有关原理方面了解可以参考：

http://blog.darkthread.net/post-2013-12-03-inside-signalr-transport.aspx

http://blog.jobbole.com/82746/

二、干货实战开始

在vs2013开发环境

1.创建ASP.NET空Web应用程序项目

技术分享

2.右击SignalRTest项目添加新项，选择SignalR集线器(v2),并命名集线器名字为TestHub.cs

技术分享

然后项目自动生成了Scripts文件夹和文件,下面的jquery-1.10.2.js和jquery.signalR-2.0.0.js比较重要的两个js库

技术分享

3.还要添加一个OWIN Startup类

技术分享

4.修改TestStartup里面代码，注册管道虚拟地址，为的是前端添加一个引用需要用到的配置地址，现在透露一些信息吧。就是这个<script src="signalr/hubs"></script>。这个文件是运行动态生成的，我们新建项目是看不到的，按照配置好路径就对了！

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRTest.TestStartup))]

namespace SignalRTest
{
    public class TestStartup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888


            //添加如下代码
            //注册管道,使用默认的虚拟地址,根目录下的"/signalr",当然你也可以自己定义
            app.MapSignalR();
        }
    }
}

5.在刚才新建的集线器里面就可以自己去写方法了，在方法体里可以通过 Clients.All.XXXXX 调用前端注册的js方法，实现了服务端调用客户端。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRTest
{
    //Hub的别名,方便前台调用
    [HubName("testHHH")]
    public class TestHub : Hub
    {
        /// <summary>
        /// 自动生成的方法
        /// </summary>
        public void Hello()
        {
            Clients.All.hello();//意思是调用所有客户端的集线器注册的方法
        }



        /// <summary>
        /// 自定义一个方法发送给所有的客户端
        /// </summary>
        /// <param name="msg"></param>
        public void SendToAllClients(string msg)
        {
            Clients.All.allMessage(msg);//意思是调用所有客户端的集线器注册的方法allMessage
        }
    }
}

6.新建一个ChatTest.html 页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery.signalR-2.0.0.js"></script>
    <!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址-->
    <script src="signalr/hubs"></script>
</head>
<body>
    <div>
        <div>姓名：<input type="text" name="name" id="name" /></div>
        <div>
            <ul id="ul">
                <li>开始群聊咯。。。。。。。。。。。。。</li>
            </ul>
            <input type="text" name="content" id="content" /><input type="button" name="btn" id="btn" value="发送" />
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            //1.声明一个代理引用集线器，如果集线器没有取别名，则要小写$.connection.testHub;如果有别名则直接写别名就好了
            var chatClient = $.connection.testHHH;
            //2.注册服务端调用客户端的方法,就是刚才在TestHub中调用的方法 Clients.All.allMessage(msg);
            //注意是否有参数
            chatClient.client.allMessage = function (msg) {
                //动态加载内容到ul中
                $("#ul").append($("<li>" + msg + "</li>"));
            }



            //3. 必须启动连接
            $.connection.hub.start().done(function () {

            
                $("#btn").click(function () {
                    if ($("#name").val().length > 0) {
                        var msg = $("#name").val() + "说:" + $("#content").val();
                        //4.客户端调用服务端方法,必须注意，很多时候自己掉坑了。。。调用服务端方法必须小写方法字母开头
                        chatClient.server.sendToAllClients(msg);
                    }
                    else {
                        alert("请输入名字");
                    }
                });


            });

        

        });
    </script>
</body>
</html>