Socket.io IE7-9 JSONP Polling error

Question

We've spent a better part of yesterday trying to get this resolved. So as a last ditch effort i'm posting here.

Our setup is a Node.js / Express backend. With Socket.io on the same port as express.

app.io = io.listen(server);

app.io.set('origin', '*');
app.io.set('log level', '2');
app.io.enable('browser client minification');
app.io.set('transports', [
    'websocket',
    'flashsocket',
    'htmlfile',
    'xhr-polling',
    'jsonp-polling'
]);

I've explicitly enabled all of the transports. We were hoping either jsonp or flash sockets would play nice on our least favorite browsers...

But, I guess there is a reason that they're our least favorite. ;-)

Client side we've got an Angularjs application with socket.io. Very loosely based on this tutorial

window.WEB_SOCKET_SWF_LOCATION = 'https://api.ourdomain.com/socket.io/static/flashsocket/WebSocketMain.swf';
var socket = io.connect('https://api.ourdomain.com', {
    'reconnect' : true,
    'reconnection delay' : 1500
});

We've tried adding the SWF location as seen here to get flashsockets working. It is serving up the policy and getting the files.. So no luck on that.

Anyways on ie7-9 when it attempts to connect via jsonp polling we get this error:

Object doesn't support this property or method

Contents of the jsonp message will be something like this: io.j[1]("1::");

Occasionally with more content in it.

io.j seems to be being set as an array in the main socket.io.js file.

When I put this in the developer tools console, it throws the same error.

I've tried moving all the meta tags before the scripts like suggested here. That didn't change anything.

XHR-polling doesn't seem to work either. We've seen some posts about changing settings in ie.. But obviously we can't require our clients to go and request their IT department to change their browser settings just to visit our site. So we've ditched that method.

Also tried creating a blank page, and connecting.. That works. So what would be interfering?

Hopefully you guys have something?

Answer 1

We were unable to resolve this issue by simply making Socket.io work. I don't know if this is a Socket.io issue or if this is a combo of Angularjs and Socket.io.

We did however resolve this issue by adding our own fallback. In our Socket.io service we check for the existence of a feature present in ie9+ as well as webkit and firefox browsers.

var use_socketIO = true;

/*
    I'd like to detect websocket, or jsonp.  
    But those transport methods themselves work.  
    Just not reliably enough to actually use
*/

if (typeof(window.atob) === 'undefined') {
    console.log('browser appears to be < ie10.');
    use_socketIO = false;
}

if (use_socketIO) {
    var socket = io.connect('https://api.ourdomain.com', {
        'reconnect' : true,
        'reconnection delay' : 1500
    });
}

// Fall back http method.
function httpReq(method, url, data) {
    var defer = $q.defer();

    $http({
        method: method, 
        url: '//www.domain.com/api'+url, 
        data: data
    }).success(function (data, status, headers, config) {
        defer.resolve(data)
    });

    return defer.promise;
}

// Socket.io method.
function socketReq(method, url, data) {
    var defer = $q.defer();

    socket.emit(method, {url: url, data: data}, function (response) {
        try {
            var data = JSON.parse(response);

            defer.resolve(data);
        } catch (e) {
            $log.error('Failed to parse JSON');
            $log.info(response);
            defer.reject(e);
        }

    });

    return defer.promise;
}

// Main Request method
function request(method, url, data) {

    if (use_socketIO) {
        return socketReq(method, url, data || {});
    } else {
        return httpReq(method, url, data || {});
    }
}

Then we simply just call request('get', '/url');

Server side we do some magic to build a req and res object if its Socket.io and then forward it to express to handle, otherwise express just handles it like normal.