anulik anulik - 1 month ago 14
Ajax Question

Pubnub getting duplicated message when changing channel

I have a problem with pubnub.
I have friends list and i need to change pubnub channel on clicking them, by switching to another friend, to chat with him.
I have global channel variable, and I am changing it on friend click. The problem is, when i switch to another friend and write a message, the message is appears in panel duplicated.

Here is the code I am using.

base = "/";
pubnub = "";
channel ="";
messageListContent = "ul.chat-messages-block";

function handleMessage(message,$index) {

if ( $index != 'me' ) {
var $index = 'left';
} else {
var $index = 'right';
}

var $imageUrl = "";
if ( message.picture != '' && message.picture != null ) {
$imageUrl = message.picture;

if ( (/^http:\/\//.test( $imageUrl ) ) ) {
$imageUrl = $imageUrl;
} else {
$imageUrl = "uploads/user/"+ $imageUrl;
}
} else {
$imageUrl = 'resources/images/user-male.png';
}

var messageEl = jQuery('<li class="'+$index+' clearfix">'+
'<div class="user-img pull-'+$index+'"> <img src="' + $imageUrl +'" alt="'+message.username+'"> </div>'+
'<div class="chat-body clearfix">'+
'<div class="">'+
'<span class="name">'+message.username+'</span><span class="name"></span><span class="badge"><i class="fa fa-clock-o"></i>'+message.chat_date+'</span></div>'+
'<p>'+ message.message + '</p>'+
' </div>'+
'</li>');

jQuery(messageListContent).append(messageEl);
};


jQuery.getJSON( "/chat/read", function( data ) {
var items = [];
if ( data != null && data != "" ){

pubnub = PUBNUB.init({
publish_key: data.publish_key,
subscribe_key: data.subscribe_key,
});

if ( data.messages.length > 0 ) {

var $my_id = data.current_user;
for( var i = 0; i < data.messages.length; i++ ) {

if ( data.messages[i].user_id == $my_id ) {
$index = "me";
} else {
var $index = "";
}
handleMessage(data.messages[i],$index);
}
}

}
});

jQuery(document).ready(function () {
jQuery('#sendMessageButton').click(function (event) {
var message = jQuery('#messageContent').val();
var friend_id = jQuery('li.activeChannel').attr('data-id');

if ( message != '' ) {

jQuery.ajax({
url: base+"chat/sendChat",
type:'POST',
data:{
friend_id: friend_id,
text:message
},
success:function(data){
var data = JSON.parse(data);
//sounds.play( 'chat' );

pubnub.publish({
channel: channel,
message: {
username: data.messages.username,
message: data.messages.message,
user_id: data.messages.friend_id,
current_user: data.messages.user_id,
picture: data.messages.picture,
type:'message',
chat_date: data.messages.chat_date
}
});

},
error: function(err){
jQuery('.errorText').fadeIn();
}
});
jQuery('#messageContent').val("");

}
});



// Also send a message when the user hits the enter button in the text area.
jQuery('#messageContent').bind('keydown', function (event) {
if((event.keyCode || event.charCode) !== 13) return true;
jQuery('#sendMessageButton').click();
return false;
});




jQuery('ul.chat-users li').click(function(){
var friend_id = jQuery(this).attr('data-id');
jQuery('ul.chat-users li').removeClass('activeChannel');
jQuery(this).addClass('activeChannel');

jQuery.ajax({
url: base+"chat/getUsersChat",
type:'POST',
data:{
friend_id: friend_id
},
success:function(data){
var data = JSON.parse(data);
jQuery('.chat-messages ul').html("");
//id = pubnub.uuid();
//channel = 'oo-chat-' + id+friend_id;
channel = 'oo-chat-' + data.channel;

if ( data.messages.length > 0 ) {

var $my_id = data.current_user;
for( var i = 0; i < data.messages.length; i++ ) {

if ( data.messages[i].user_id == $my_id ) {
$index = "me";
} else {
var $index = "";
}
//messageListContent = "ul.activeChannel"+channel;
//console.log(channel);
handleMessage(data.messages[i],$index);
}
}

pubnub.subscribe({
channel: channel,
message: function(message) {
console.log("Pubnub callback", message);
handleMessage(message,"me");
},
connect: function(message) {
console.log("Pubnub is connected", message);
},
//callback:
});

},
error: function(err){
jQuery('.errorText').fadeIn();
}
});
});

});


And here is how it is looking

enter image description here

Any Idea?
I had even tried to unsubscribe the previous channel on friend click, but no result.
What am i doing wrong?

Answer

I solved the problem. The problem was in pubnub.js version, it was 3.4, I switched to 3.7.1 and added the following code

jQuery('ul.chat-users li').click(function(){
        var friend_id = jQuery(this).attr('data-id');
        jQuery('ul.chat-users li').removeClass('activeChannel');
        jQuery(this).addClass('activeChannel');

        if ( channel != "" ) {
            pubnub.unsubscribe({
                channel : channel,
            });
        }