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

    本章结束

  • 相关阅读:
    C# DataConstruct 数据结构关于 Array,ArrayList,List,HashTable,Dictionnary的学习记录
    Moq 在.net Core 单元测试中的使用
    记录一些 APM 仓储
    .net core Swagger 过滤部分Api
    C# Conversion Keywords
    (转载)C# 枚举 FlagsAttribute用法
    [慢更]Sublime Text 快捷键及使用过的插件
    Docker发布程序那些事
    RabbitMQ 学习日记
    Linux Tomcat7.0安装配置实践总结
  • 原文地址:https://www.cnblogs.com/fei686868/p/9564202.html
Copyright © 2020-2023  润新知