如何使用推杆

时间:2015-10-07 09:15:23

标签: javascript java pusher livechat

我使用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,并与相同的频道“在线用户”连接,现在我可以通过使用members.each({{{{我看到textarea“成员”内的在线成员) })功能。

    <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>

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

1 个答案:

答案 0 :(得分:0)

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

要构建群聊,您只需要允许多个用户在单个频道上发送消息(触发事件)。它与存在渠道的使用并不真正相关。