Socket.io IE7-9 JSONP 轮询错误答案

【问题标题】：Socket.io IE7-9 JSONP Polling errorSocket.io IE7-9 JSONP 轮询错误
【发布时间】：2014-01-17 14:33:29
【问题描述】：

我们昨天花了大部分时间来解决这个问题。所以作为最后的努力，我在这里发帖。

我们的设置是一个 Node.js / Express 后端。在与 express 相同的端口上使用 Socket.io。

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'
]);

我已明确启用所有传输。我们希望 jsonp 或 flash 套接字在我们最不喜欢的浏览器上运行良好......

但是，我想它们是我们最不喜欢的原因是有原因的。 ;-)

客户端我们有一个带有 socket.io 的 Angularjs 应用程序。非常松散地基于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
});

我们已尝试添加 SWF 位置，如 here 所示，以使 flashsocket 正常工作。它正在提供政策并获取文件。所以运气不好。

无论如何，在 ie7-9 上，当它尝试通过 jsonp 轮询连接时，我们会收到此错误：

Object doesn't support this property or method

jsonp 消息的内容是这样的： io.j[1]("1::");

偶尔会有更多的内容。

io.j 似乎被设置为主 socket.io.js 文件中的一个数组。

当我把它放在开发者工具控制台中时，它会抛出同样的错误。

我尝试在建议的here 等脚本之前移动所有元标记。这并没有改变任何东西。

XHR 轮询似乎也不起作用。我们已经看到一些关于更改 ie 设置的帖子。但显然我们不能要求我们的客户去请求他们的 IT 部门更改他们的浏览器设置只是为了访问我们的网站。所以我们放弃了这种方法。

还尝试创建一个空白页面，然后连接.. 有效。那么会有什么干扰呢？

希望你们有东西吗？

【问题讨论】：

标签： javascript internet-explorer-8 internet-explorer-7 internet-explorer-9 socket.io

【解决方案1】：

我们无法通过简单地让 Socket.io 工作来解决这个问题。我不知道这是 Socket.io 的问题，还是 Angularjs 和 Socket.io 的组合。

不过，我们确实通过添加自己的后备方案解决了这个问题。在我们的 Socket.io 服务中，我们检查是否存在 ie9+ 以及 webkit 和 firefox 浏览器中存在的功能。

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 || {});
    }
}

然后我们只需调用 request('get', '/url');

服务器端我们做了一些魔术来构建一个 req 和 res 对象，如果它是 Socket.io，然后将它转发给 express 处理，否则 express 只是像平常一样处理它。

【讨论】：