Socket.IO i IE8 - połączenia z odpytywaniem jsonp zawsze zawodzą.

Question

Warto zauważyć: poniższe czynności są wykonywane między domenami za pośrednictwem protokołu HTTPS. Szczerze mówiąc nie sądzę, że to jest problem, ponieważ wszystko działa dobrze w IE10, Chrome i FF. Zgaduję, że może to być wariancja obiektu XDomainRequest w IE8? Nie jestem tego pewien.

Metoda sendLoginRequest poniżej to metoda nazywana jako pierwsza. Cały pozostały kod pomocniczy znajduje się poniżej.

To wszystko jest bardzo proste, ale nie wiem, dlaczego IE8 nie działa tak jak on.

function WrappedSocket(data, session_string) { 
    var clientSocket = io.connect('https://xxxxxxxx/socketio', { query: "session=" +  encodeURIComponent(session_string), transports: ['jsonp-polling'] }); 
    clientSocket.socket.on("connect", function() { console.log("CONNECT_SUCCEED"); }); 
    clientSocket.socket.on("connect_failed", function() { console.log("CONNECT_FAILED"); }); 
    clientSocket.socket.on("reconnect_failed", function() { console.log("RECONNECT_FAILED"); }); 
    clientSocket.socket.on("error", function (eobj) { console.log("Socket error " + eobj); }); 
    console.log("Made a socket that is talking"); 
} 

var my_socket; 


function set_up_socket(data, sessionString) { 
    setSession(data.responseText); 
    my_socket = new WrappedSocket(data, sessionString); 
    my_socket.socket.emit("message", "Howdy!"); 
} 

function sendLoginRequest(loginCode, nextRequest) { 
    var xhr = createCORSRequest('POST', 'https://xxxxx/login', false); 
    var sessionString = 'xxxx'; 

    if ("withCredentials" in xhr) { 
     xhr.addEventListener("load", function() { 
      set_up_socket(this, sessionString); 
     }, false); 
    } 
    else { 
     xhr.onload = function() { 
      set_up_socket(this, sessionString); 
     }; 
    } 

    xhr.send(); 
    } 

function createCORSRequest(method, url, onload) { 
    xhrObj = new XMLHttpRequest(); 
    if ("withCredentials" in xhrObj) { 
     // Check if the XMLHttpRequest object has a "withCredentials" property. 
     // "withCredentials" only exists on XMLHTTPRequest2 objects. 
     if (onload) { 
      xhrObj.addEventListener("load", onload, false); 
     } 
     xhrObj.open(method, url, true); 
     xhrObj.withCredentials = true; 
    } else if (typeof XDomainRequest != "undefined") { 
     // Otherwise, check if XDomainRequest. 
     // XDomainRequest only exists in IE, and is IE's way of making CORS requests. 

     xhrObj = new XDomainRequest(); 
     xhrObj.open(method, url); 
     if (onload) { 
      xhrObj.onload = onload; 
     } 
    } else { 
     // Otherwise, CORS is not supported by the browser. 
     xhrObj = null; 
    } 
    return xhrObj; 
    } 

Błędy widzę zarówno w konsoli i Skrzypek Polling jest fakt występujący, ale te same błędy zachować wystąpić na każdej ankiety:

LOG:CONNECT_FAILED 
'f.parentNode' is null or not an object 
'f.parentNode' is null or not an object 
LOG:CONNECT_FAILED 
'f.parentNode' is null or not an object 
'f.parentNode' is null or not an object 
LOG:CONNECT_FAILED 
'f.parentNode' is null or not an object 
'f.parentNode' is null or not an object 
LOG:CONNECT_FAILED 
'f.parentNode' is null or not an object 
'f.parentNode' is null or not an object 
LOG:CONNECT_FAILED 
'f.parentNode' is null or not an object 
'f.parentNode' is null or not an object 
LOG:CONNECT_FAILED 
'f.parentNode' is null or not an object 
'f.parentNode' is null or not an object 

........ ....

(masz pomysł, to dzieje się w kółko jak sonduje.)

Znowu widać każde żądanie f iring poprzez jeden po drugim, wszystkie 200 odpowiedzi z serwera, ale wszystkie skutkują błędów CONNECT_FAILED i JS z pliku socket.io.js.

Na koniec, oto kod z pliku socket.io.js na kliencie, który zrywa z błędami opisanymi powyżej na ekranie konsoli ("f.parentNode ma wartość null lub nie jest obiektem"). Rozumiem, że obiekt ma wartość NULL, ale nie otrzymuję odpowiedzi: DLACZEGO jest ona zerowa.

........ 

if (this.isXDomain() && !io.util.ua.hasCORS) { 
    var insertAt = document.getElementsByTagName('script')[0] 
    , script = document.createElement('script'); 

    script.src = url + '&jsonp=' + io.j.length; 
    insertAt.parentNode.insertBefore(script, insertAt); 

    io.j.push(function (data) { 
     complete(data); 
     script.parentNode.removeChild(script); // *** BREAKS HERE!! *** 
    }); 

......... 

Answer 1

Zgodnie this answer, nie wierzę IE8 obsługuje metodę .addEventListener() dla obiektu XMLHttpRequest() ani na XDomainRequest() (lub większość innych, wydaje się, że zostały dodane później).

Spróbuj przepisywanie tę część kodu do:

xhr.onload=function() { 
     set_up_socket(this, sessionString); 
    }; 

Jeśli chcesz zachować tę samą składnię dla innych nowoczesnych przeglądarek, można wykonać kopię wypełnić poprzez owinięcie go w warunkowa:

if(typeof xhr.addEventListener === undefined) 
{ 
    xhr.onload=function() { 
     set_up_socket(this, sessionString); 
    }; 
} 

Nie wiem, czy to rozwiąże problem, ale może pomóc.

MDN mówi: "More recent browsers, including Firefox, also support listening to the XMLHttpRequest events via standard addEventListener APIs in addition to setting on* properties to a handler function.". Ponownie, nie jestem pewien, ponieważ nie mówią, które przeglądarki i kiedy, ale najlepiej mogę powiedzieć, że IE8 nie obsługuje go.

Answer 2

IE8 i mniejsze zużycie attachEvent ... ale to nie działa na XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Compatibility

W razie wątpliwości na jakiś problem z JS, pierwszy przystanek MDN, a następnie inny :)