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

    本章结束

  • 相关阅读:
    JS 和 CSS 的位置对其他资源加载顺序的影响
    How browsers workBehind the scenes of modern web browsers
    Gruntjs入门 (2)
    Superhero.js – 构建大型 JavaScript 应用程序的最佳资源
    利用位反操作来简化 indexOf 判断
    Gruntjs入门 (1)
    js和css的顺序关系
    (翻译)理解JavaScript函数调用和"this"(by Yehuda Katz)
    秒,微秒,毫秒
    您试图从目录中执行 CGI、ISAPI 或其他可执行程序,但该目录不允许执行程序
  • 原文地址:https://www.cnblogs.com/fei686868/p/9564202.html
Copyright © 2011-2022 走看看