vLine: recv:im triggered twice

Question

I've started to integrate the vLine API into my application but have a problem where the recv:im event is emitted twice for every message that I send.

Here is my code on template side where I am sending the chat messages:

$('#chat_room_input').bind('keypress', function(e) {

            if(e.keyCode==13){
                console.log('we send the message here');
                VlineObject.sendMessageToPerson_(remoteUserId);
            }

     });

And also here is my js app file content:

VlineApp = function(serviceId, current_user, ui_local_widgets, people) {


  this.ui_local_widgets_ = ui_local_widgets;
  this.serviceId_ = serviceId;

  this.current_user_ = current_user;
  this.profile_ = current_user.profile;
  this.auth_token_ = current_user.auth_token;

  this.people_ = people;

  // the only required option is your serviceId 
  this.client_ = vline.Client.create({ serviceId: this.serviceId, "ui": true,  "uiOutgoingDialog":true, "uiIncomingDialog":true, "uiBigGreenArrow":true, "uiVideoPanel": this.ui_local_widgets_.videopanel });

  this.client_.on('login', this.onLoginUpdatePresence_, this);

  // window.PROFILE and window.AUTH_TOKEN are generated by your application server 
  // and set in a script tag in your HTML document 
  this.client_.login(this.serviceId_, this.profile_, this.auth_token_)
      .done(this.init_, this);




}

VlineApp.prototype.init_ = function(session) {

  console.log('here in init ');
  //console.log(this.people_);


  this.session_ = session;
  this.client_.on('recv:im', this.onMessage_, this);

}



VlineApp.prototype.updatePresence = function(e){

  //FUNCTION CALL WHEN THE EVENT IS FIRED
  var person = e.target;
  var presenceState = person.getPresenceState();
  var shortId = person.getShortId();

  this.updatePresenceUI(shortId, presenceState);

}

VlineApp.prototype.updatePresenceUI = function(personid, presenceState) {

  //UPDATE UI PRESENCE STATUS
  $('#'+personid+'_status').html(presenceState);

  /*
   // Show/hide the call link based on presence
   elem = document.getElementById('call-' + shortId);
   if (presenceState === "online" && shortId !== currentUserid) {
   elem.style.display = "";
   } else {
   elem.style.display = "none";
   }
   */

}

VlineApp.prototype.updatePresenceAll = function(person){

  //UPDATE PRESENCE STATUS FOR THE CURRENT PERSON AND ADD TRIGGER EVENT     
  this.updatePresence({target: person});
  person.on('change:presenceState', this.updatePresence, this);

}



VlineApp.prototype.onLoginUpdatePresence_ = function(event){


  this.session_ = event.target;

  for (var i=0; i < this.people_.length; i++)
  {
    this.session_.getPerson(this.people_[i])
        .done(this.updatePresenceAll, this);
  }
}


VlineApp.prototype.showAlertUI = function(sender_name, sender_thumb, message_body) {

  //here we should have push message to the chatroom
  $('#'+this.ui_local_widgets_.chat_room_messages).append('<div>'+sender_name+' :'+message_body+'</div>');
}

VlineApp.prototype.onMessage_ = function(event) {

  console.log('aici in on message');
  var msg = event.message, sender = msg.getSender();
  this.showAlertUI(sender.getDisplayName(), sender.getThumbnailUrl(), msg.getBody());

};

VlineApp.prototype.sendMessageToPersonObj = function(person)
{
  var message = $('#'+this.ui_local_widgets_.chat_room_input).val();
  $('#'+this.ui_local_widgets_.chat_room_input).val('');
  //$('#'+this.ui_local_widgets_.chat_room_messages).append('<div>You :'+message+'</div>');
  this.showAlertUI('You', '', message);
  person.postMessage(message);

}

VlineApp.prototype.sendMessageToPerson_ =  function(personid) {

  if (this.session_)
  {
    this.session_.getPerson(personid)
        .done(this.sendMessageToPersonObj, this);
  }
}

VlineApp.prototype.getMessagesHistoryObj = function(person){

  var messages_history = person.getMessages();
  console.log('messages_history');
  console.log(messages_history);

}

VlineApp.prototype.getMessagesHistory_ = function(personid) {
  console.log(personid);
  console.log(this.session_);
  if (this.session_)
  {
    this.session_.getPerson(personid)
        .done(this.getMessagesHistoryObj, this);
  }
}


VlineApp.prototype.callPersonObj = function(person) {

  person.startMedia();
}

VlineApp.prototype.callPerson_ =  function(personid) {

  if (this.session_)
  {
    this.session_.getPerson(personid)
        .done(this.callPersonObj, this);
  }
}

I must specify that the chat conversation is between 2 different users with 2 different tokens from Vline.

Any suggestions?

Answer 1

It appears that you're accidentally logging in twice and getting two separate sessions for the same user, each of which is generating the 'recv:im' event. This is partially a bug on our side (we shouldn't let you log in as the same user twice), but you can work around it. The reason you end up logged-in twice is that we automatically restore the previous session from local storage if it's available. In the case where you've already called client.login() once and you hit the page again, it currently restores the previous session and then a new one is created when client.login() is called.

To work around this, you can use client.isLoggedIn() to see if you have been automatically been logged in before calling client.login():

if (this.client_.isLoggedIn()) {
    var session = this.client_.getDefaultSession();
    this.init_(session);
    this.onLoginUpdatePresence_({"target": session});
} else {
    this.client_.on('login', this.onLoginUpdatePresence_, this);

    // window.PROFILE and window.AUTH_TOKEN are generated by your application server 
    // and set in a script tag in your HTML document 
    this.client_.login(this.serviceId_, this.profile_, this.auth_token_)
        .done(this.init_, this);
}