2015-10-07 48 views
0

我已經使用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({})函數在textarea「member」內看到在線成員。

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

現在的問題,當我創建新組可以說,名爲「朋友」爲此,我將需要訂閱頻道可以說,「在場的朋友」,現在我想添加成員從我的聯繫人到這個組,所以在這種情況下,我將需要使用哪些方法將我的聯繫人添加到組中? 請幫忙!

+0

推送器不提供管理組的機制。您需要自己構建該功能,然後控制對存在通道的訪問。然後,您可以使用「會員」功能獲取在線用戶的列表,並通知用戶上線和下線。 – leggetter

+0

@leggetter好的謝謝。 – Kamini

回答

0

您提供的代碼示例與presence channels有關。其目的是在用戶訂閱/取消訂閱頻道時提供事件。

要構建羣組聊天,您只需要允許多個用戶在單個通道上發送消息(觸發事件)即可。這與使用存在信道沒有關係。

+0

嗨@leggetter我已更新我的問題。請看看。謝謝 :) – Kamini