Javascript callbacks work in Firefox but not in Chrome or Safari

Question

I am working with Ejabberd and Orbited and I am having a few issues with my JavaScript callback functions not being called. The following is my JavaScript file where the TCPSocket connection happens and I have two callback functions namely

onSocketConnect: which is called when the Orbited established connection with port 5222 of the XMPP server and

onLoginSuccess: which is called on the successful completion of the xmpp_client.login function

The problem I'm facing is the connection happens successfully but my callbacks get called only when I'm using FireFox and not while using Safari or Chrome. I'm totally clueless about what is causing this problem but I'm sure that the method xmpp_client.login does get called because the user is logged in and is displayed as online in the ejabberd admin console.

TCPSocket = Orbited.TCPSocket; 
Orbited.settings.port = 8000;
Orbited.settings.hostname = 'localhost';

document.domain = document.domain; 

<script src='http://localhost:8000/static/protocols/xmpp/xmpp.js'&gt;&lt;/script&gt;

//xmpp.js file is included after this which is available with the Orbited. I have not included the code here.

<% if current_user %>
<script>
    notifier = '    ';
    user = "<%= current_user.jabber_id %>";
    alert(user);
    password = '123456';
    domain = XMPPDOMAIN;

/*  function onLoginSuccess(){
        $('.status').html("Connected and Logged In");
        xmpp_client.set_presence('available');
    } */

    var onLoginSuccess = function(){
        $('.status').html("Connected and Logged In");

    }
    function onLoginFailure(){
        alert('User could not be logged in');
    }
    function connectSuccess(){
        $('.status').html("Connection Successful.");
    }

    function connectFailure(){
        $('.status').html("Connection Failed!");
    }

    function onSetupNotification(){}

    xmpp_client = new XMPPClient();
    xmpp_client.connect('localhost',5222);

    xmpp_client.onPresence = function(ntype, from) {
        alert('Presence message' + ntype + ' From :' + from)

    }

    xmpp_client.onSocketConnect = function(domain, connectSuccess, connectFailure){

        var domain = XMPPDOMAIN;
        $('.status').html('Connected');
        alert(user);
        if(domain)
        {
            xmpp_client.connectServer(domain, connectSuccess, connectFailure);
            xmpp_client.login(user, password, onLoginSuccess, onLoginFailure);
            xmpp_client.set_presence('available');

        }

    }

    function send_message(id, msg){

        var j_id =  id + '@' + 'siddharth-ravichandrans-macbook-pro.local';
        alert('jid_id' + j_id);
        var status = xmpp_client.msg(j_id, msg);
        alert(status);
    }

    xmpp_client.onMessage = function(jid, username, text) {
        alert('message-recieved');
        if ( $('.discussion-area').length > 0 ){
            $('.discussion-area').append('<div class=\'new-message\'>' + text + '</div>');
            return false;
        }
    }

/*      self.login = function(nick, pass, s, f) {
    conn.onread = setUser;
    success = s;
    failure = f;
    user = nick;
    bare_jid = nick + "@" + domain;
    full_jid = bare_jid + "/Orbited";
    self.send(construct(LOGIN, [user, pass]));
    }

    self.set_presence = function(status, status_msg) {
    self.send(EXT_PRESENCE[0] + full_jid + EXT_PRESENCE[1] + room_jid + EXT_PRESENCE[3] + status + EXT_PRESENCE[4] + status_msg + EXT_PRESENCE[5]);
    }
*/
 </script>
<% end %>

This is part of the xmpp.js which I got when I installed orbited and in order to test if my requests were actually reaching I added an alert in the login method as follows

...
...

    self.login = function(nick, pass, s, f) {
        conn.onread = setUser;
        success = s;
        failure = f;
        user = nick;
        bare_jid = nick + "@" + domain;
        full_jid = bare_jid + "/Orbited";
        self.send(construct(LOGIN, [user, pass]));
        alert("bazingaa");
    }

    self.connectServer = function(d, s, f) {
        success = s;
        failure = f;
        doma
...
...

Now I have no clue how this got my callbacks and would really appreciate some help on this.

Thanks

Actually I find that removing the xmpp_client.set_presence and moving it to the onLoginSuccess is what seems to have done the trick. The minute I add the set_presence method after the login method call the functionality fails in chrome. So why would that prevent it from invoking the callback on successful login?

    var onLoginSuccess = function(){
        $('.status').html("Connected and Logged In");
        xmpp_client.set_presence('available');
    }

    xmpp_client.onSocketConnect = function(domain, connectSuccess, connectFailure){

        var d = "";
        $('.status').html('Connected'); 

            xmpp_client.connectServer(d, connectSuccess, connectFailure);
            xmpp_client.login(user, password, onLoginSuccess, onLoginFailure);
            //xmpp_client.set_presence('available');



    }

Help!

Answer 1

I think your problem is related to the Same Origin Policy for Javascript

https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript

I'm sure the Safari/Chrome Web Inspector (with Javascript enabled) will verify this in the javascript console

Modern browsers (ie. not Internet Explorer!) get around this issue by implementing Cross-Origin Resource Sharing. But then your Javascript XMPP client library has to implement CORS too

http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/

I'm not familiar with Orbited but I have done this type of browser XMPP connections using the Strophejs library and ejabberd's XMPP BOSH connection manager

To get around the Same Origin policy across all browsers you need to employ a proxy

http://flxhr.flensed.com/ (client-side proxy library)

If using apache you can employ a server-side proxy with the ProxyPass directive under the mod_proxy module