Socket.IO e IE8 - connessioni jsonp-polling sempre in errore

Question

Degno di nota: viene eseguito il dominio incrociato tramite https. Onestamente, non penso che questo sia il problema perché tutto funziona perfettamente con IE10, Chrome e FF. La mia ipotesi è che potrebbe essere una varianza di oggetto XDomainRequest in IE8? Non sono sicuro però.

Il metodo sendLoginRequest di seguito è il metodo chiamato prima. Di seguito viene fornito anche l'altro codice di supporto.

Questo è tutto molto semplice, ma non è sicuro del motivo per cui IE8 non funziona come fa.

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

errori che sto vedendo in entrambe le console e Fiddler Polling è infatti che si verificano, ma gli stessi fallimenti continuano verificarsi su ogni sondaggio:

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 

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

(si ottiene l'idea, questo accade più e più volte come interroga.)

Anche in questo caso, è possibile vedere ogni richiesta f passando attraverso una dopo l'altra, tutte le 200 risposte dal server ma tutti i risultati in CONNECT_FAILED e gli errori JS dal file socket.io.js.

Infine, ecco il codice dal file socket.io.js sul client che si rompe con gli errori visti sopra nella schermata della console ("f.parentNode è null o non un oggetto"). Comprendo che l'oggetto è nullo, ciò che non ottengo è PERCHÉ è nullo.

........ 

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

Come da this answer, non ritengo IE8 supporta il metodo .addEventListener() per l'oggetto XMLHttpRequest() oi XDomainRequest() (o la maggior parte degli altri, sembra essere stato aggiunto in seguito).

provare a riscrivere quella parte del codice a:

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

Se si desidera mantenere la stessa sintassi per altri browser moderni, si potrebbe eseguire il riempimento avvolgendolo in un condizionale:

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

Non so se risolverà il problema, ma potrebbe essere d'aiuto.

MDN dice "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.". Ancora una volta, non sono sicuro perché non dicono quali browser, e quando, ma meglio posso dire che IE8 non lo supporta.

Answer 2

IE8 e meno uso attachEvent ... ma non funziona su XMLHttpRequest

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

In caso di dubbi su qualche problema con JS, prima tappa MDN, poi il resto :)