ASP.NET SignalR 系列（五）之群组推送

在上一章介绍了一对一推送的方式，这章重点介绍下群组推送和多人推送

群组主要就是用到了方法：Groups.Add(Context.ConnectionId, groupName); 将不同的连接id加入到同一个组名当中

下面先演示一个群聊的功能：

服务端代码：

　　　　 /// <summary>
        /// 发送给指定组
        /// </summary>
        public void CallGroup(string fromname, string content)
        {
            string groupname = Context.QueryString["groupname"]; //获取客户端发送过来的用户名
            //根据username获取对应的ConnectionId
            Clients.Group(groupname).show(fromname+":"+content);
        }
        //群组聊天
        public override Task OnConnected()
        {
            string groupname = Context.QueryString["groupname"]; //获取客户端发送过来的用户名
            JoinGroup(groupname);//加入群组
            return base.OnConnected();
        }
        public override Task OnDisconnected(bool stopCalled)
        {
            string groupname = Context.QueryString["groupname"]; //获取客户端发送过来的用户名
            LeaveGroup(groupname);//移除组
            return base.OnDisconnected(true);
        }
        public Task JoinGroup(string groupName)
        {
            return Groups.Add(Context.ConnectionId, groupName);
        }

        public Task LeaveGroup(string groupName)
        {
            return Groups.Remove(Context.ConnectionId, groupName);
        }

前端，我们创建两个目录，武侠和喜剧，每个目录下分别有1.html和2.html 表示2个人聊天。

下面上前端的代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script src="/Scripts/jquery.signalR-2.3.0.min.js"></script>
    <script src="/signalr/hub/hubs"></script>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            margin: 20px;
        }

        .input {
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <div>
        <h4>武侠群--杨过</h4>
        <p>
            <input type="text" id="content" placeholder="" class="input" /> &nbsp;&nbsp;<input type="button" value="发送" class="btn btn-sm btn-info" id="btn_send" />
        </p>

        <div>
            <h4>接收到的信息：</h4>
            <ul id="dataContainer"></ul>
        </div>
    </div>

    <script language="javascript">
    $(function() {
        var chat = $.connection.demoHub; //连接服务端集线器，demoHub为服务端集线器名称，js上首字母须改为小写（系统默认）
        //定义客户端方法，此客户端方法必须与服务端集线器中的方法名称、参数均一致。
        //实际上是服务端调用了前端的js方法（订阅）
        $.connection.hub.qs = { 'groupname': '武侠' }
        chat.client.show=function(content) {
            var html = '<li>' + htmlEncode(content) + "</li>";
            $("#dataContainer").append(html);
        }

        //定义推送
        $.connection.hub.start()
            .done(function() {
                $("#btn_send").click(function() {
                    chat.server.callGroup("杨过", $("#content").val());  //将客户端的content内容发送到服务端
                    $("#content").val("");
                });
            });
    });
    //编码
    function htmlEncode(value) {
        var encodedValue = $('<div />').text(value).html();
        return encodedValue;
    }
    </script>
</body>
</html>

其他前端这边就不贴，就是把groupname参数改一下，还有callGroup里面的第一个参数改一下即可。

下面上效果图：

从上面结果，我们可以看到，已经实现了两个群组分别独立聊天，内容互不影响。

这里主要就是用到了Group这个对象，当然群组的名称本例是通过前端传递的，在实际项目中也可以用其他各种方式来实现。

本章结束