404 (Invalid SID value) in Strophe while using attach()

I have searched in google and some similar questions on stack overflow. But I am not getting any solution.

Basically, I want to persist connection across web pages in my application. For this I am using cookies. I store SID and RID in cookies and use them for attaching the session again.

Below is my code.

this.openConnection = function(){
        if (chatObj.connection != null) return;


        var jid = chatObj.userName + '@' + chatObj.openfireDomainURL; // Bare JID
        var sid = Cookies.get(chatObj.userName + '_sid'); // Session Identifier
        var rid = Cookies.get(chatObj.userName + '_rid'); // Request Identifier

        var connection = new Strophe.Connection(chatObj.xmppHttpBindURL);
        chatObj.connection = connection;

        if(chatObj.isEmpty(sid) && chatObj.isEmpty(rid)){
            connection.connect(jid, chatObj.password, chatObj.onConnection);
        } else {
            // parseInt(rid,10) + 1
            var rid = parseInt(rid) + parseInt(1);
            connection.attach(jid, sid, rid, chatObj.onConnection);
        }
    };

    this.onConnection = function(status) {
        if (status === Strophe.Status.CONNECTED) {
            chatObj.log("CONNECTED ");
            //Cookies.set(chatObj.userName + '_sid', chatObj.connection.sid);
            //Cookies.set(chatObj.userName + '_rid', chatObj.connection.rid);
            jQuery(document).trigger('connected');
        } else if (status === Strophe.Status.DISCONNECTED) {
            jQuery(document).trigger('disconnected');
            chatObj.log("DISCONNECTED ");
        } else if (status === Strophe.Status.CONNFAIL) {
            chatObj.log("CONNFAIL ");
        } else if (status === Strophe.Status.AUTHENTICATING) {
            chatObj.log("AUTHENTICATING ");
        } else if (status === Strophe.Status.AUTHFAIL) {
            chatObj.log("AUTHFAIL ");
        } else if (status === Strophe.Status.ERROR) {
            chatObj.log("ERROR ");
        } else if (status === Strophe.Status.ATTACHED){
            chatObj.log("ATTACHED ");
            jQuery(document).trigger('connected');
        } else if (status === Strophe.Status.CONNFAIL){
            chatObj.log("CONNFAIL ");
        }
    };


$(window).unload(function() {
    console.log("widows unload ");
    if( chatObj.connection != null ){
        console.log("set cookies ");
        Cookies.set(chatObj.userName + '_sid', chatObj.connection.sid);
        Cookies.set(chatObj.userName + '_rid', chatObj.connection.rid);
    } else {
//        Cookies.remove(chatObj.userName + '_sid');
//        Cookies.remove(chatObj.userName + '_rid');
    }
});

404 Invalid SID value in Strophe while using attach()

I tried using windows unload but it does not work. I still get the same error.

Solution

Instead of using attach() method there is also the restore feature in conjunction with the keepalive option:

var connection = new Strophe.Connection(chatObj.xmppHttpBindURL, {'keepalive': true});

...

try {
    connection.restore(jid, onConnect);
} catch(e) {
    if (e.name !== "StropheSessionError") { throw(e); }
}

See: http://strophe.im/strophejs/doc/1.2.14/files/strophe-js.html#Strophe.Connection.restore

and

https://github.com/strophe/strophejs/blob/master/examples/restore.js

For some strange reasons sid and rid properties are undefined, so you can retrieve them in the following way:

  var sid = chatObj.connection._proto.sid;
  var rid = chatObj.connection._proto.rid;

Another way is to retrieve them directly from each XML message sent to connection overriding xmlOutput function:

  connection.xmlOutput = function (e) {
      rid = $(e).attr('rid');
      sid = $(e).attr('sid');
  };