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" /> <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这个对象，当然群组的名称本例是通过前端传递的，在实际项目中也可以用其他各种方式来实现。
本章结束
