如何使用推送器实现群聊功能答案

【问题标题】：how do i implement group chat feature using pusher如何使用推送器实现群聊功能
【发布时间】：2015-10-07 09:15:23
【问题描述】：

我已经使用 PUSHER（实时聊天）实现了一对一聊天。现在我想实现群聊功能。（即多对多）。我见过一些方法，比如

channel.bind('pusher:member_added', function(member) {
  // for example:
  add_member(member.id, member.info);
});
channel.bind('pusher:member_removed', function(member) {
  // for example:
  remove_member(member.id, member.info);
});

但不知道如何使用名称创建组。然后在联系人中添加成员。

更新问题---------- 我有与以下名称相同的 html 文件 client1.html、client2.html、client3.html 并与同一频道“presence-user”连接，现在我可以使用 members.each({ }) 函数。

    <html>
     <head>
    <title>Pusher Test</title>
  <script src="//js.pusher.com/2.2/pusher.min.js" type="text/javascript"/>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"
        type="text/javascript"></script>
  <script type="text/javascript">
        $(document).ready(function() {
            var chatdata;
            var myuserId;
            console.log("ready!");
            $('#reset').click(function(event) {
                event.preventDefault();
                $('#loggs').val("");
            });
            $('#btnSendMessage').click(function(event) {
                event.preventDefault();
                chatdata = myuserId+": "+$("#textchat").val();
                console.log("in btn chatdata ==" + chatdata);
                if(chatdata==undefined){
                    chatdata ="";
                }
                var triggered = channel.trigger('client-messagereceive', {
                    data : chatdata
                });
                console.log("pusher:subscription_succeeded==>" + triggered);

                console.log("in btn chatdata ==" + chatdata);


                alert(count);
            });
            var msgLoggs;
            console.log("chatdata ==" + chatdata);
            var socketId;
            Pusher.log = function(message) {
                if (window.console && window.console.log) {
                    msgLoggs += message + "\n";
                    $("#loggs").val(msgLoggs);
                    window.console.log(message);
                }
            };


            var options = {
                    authEndpoint : "api/chat.json?x-api-key=06870559427d46de8789c39d50097301"
            }

            var pusher = new Pusher('c7afb8c403e31a7088e1', options);

            pusher.connect();
            pusher.connection.bind('connected', function(data) {
                socketId = pusher.connection.socket_id;
            });

            var channel = pusher.subscribe('presence-user');
            channel.bind('pusher:subscription_succeeded', function(members) {

                var membersOl;
                channel.members.each(function(member) {
                      var userId = member.id;
                      var userInfo = member.info;
                      membersOl+=userId+" ";
                    });

                var count = channel.members.count;
                var me = channel.members.me;
                  var userId = me.id;
                  myuserId=userId;
                  var userInfo = me.info;
                  var count = channel.members.count;
                  $("#member").val(membersOl)
                  console.log("count-->"+count);
                  var user = channel.members.get(userId);
                  console.log("user--->"+user.info);

                console.log("pusher:subscription_succeeded====userid" + userId+" userinfo "+userInfo.data);


            });

            channel.bind('pusher:subscription_error', function(status) {
                if (status == 408 || status == 503) {

                }
            });
            var datafromClient2;
            channel.bind('client-messagereceive', function(data) {
                datafromClient2+=data.data+"\n";
                $("#textchat").val(datafromClient2);
            });


        });
    </script>
    </head>
    <body>
        we are heree .....
        <form action="" method="post">
            <table>

                <tr>
                    <td>Enter your text</td>

                </tr>
                <tr>
                    <td><textarea name="textchat" id="textchat" rows="10" cols="80"></textarea></td>
                    <td><textarea name="member" id="member" rows="10" cols="80"></textarea></td>
                </tr>

                <tr>
                     <td colspan="2"><button name="btnSendMessage" id="btnSendMessage"
                            value="Send Message">Send to Message</button></td>
                </tr>
                <tr><td>Logger</td><td> <button id="reset">Reset </button></td></tr>
                <tr>
                     <td colspan="2"><textarea name="loggs" id="loggs" rows="40" cols="150"></textarea></td>
                </tr>
            </table>

        </form>
    </body>
    </html>

现在的问题是，当我创建新组时，让我们说名称为“朋友”，为此我需要订阅频道让我们说“存在朋友”，现在我想将成员添加到这个组我的联系人，所以在这种情况下，我需要使用哪些方法将我的联系人添加到组中？请帮忙！

【问题讨论】：

Pusher 不提供管理组的机制。您需要自己构建该功能，然后控制对状态通道的访问。然后，您可以使用members 功能获取在线用户列表，并获知用户上线和下线。
@leggetter 好的，谢谢。

标签： javascript java pusher livechat

【解决方案1】：

您提供的代码示例与presence channels 相关。它们的目的是在用户订阅/取消订阅频道时提供事件。

要建立群聊，您只需要允许多个用户在单个频道上发送消息（触发事件）。这与在线状态通道的使用没有真正的关系。

【讨论】：

嗨@leggetter 我已经更新了我的问题。请看。谢谢:)