Socket.IO and IE8 - jsonp-polling connections always fail

Question

It is worth noting: cross-domain is executed through https. I honestly don’t think this is a problem, since everything works fine in IE10, Chrome and FF. I assume this could be the variance of the XDomainRequest object in IE8? Not sure though.

The following is the sendLoginRequest method, called the first. All other auxiliary codes are given below.

All this is very simple, but I don’t know why IE8 fails, just like it does.

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

Errors that I see both on the console and on Fiddler The poll does occur, but the same errors persist in each poll:

 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 

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

(You understand that this happens again and again as you survey.)

Again, you can see how each request is launched one after another, all 200 responses from the server, but all the results in CONNECT_FAILED and JS errors from the socket.io.js file.

Finally, here is the code from the socket.io.js file on the client that breaks with the errors mentioned above in the screen frame ("f.parentNode is null or not an object"). I understand that the object is null, what I am not getting is WHY this is null.

 ........ 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

As this answer , I do not believe that IE8 supports the .addEventListener() method for the XMLHttpRequest() or XDomainRequest() object (or most others, it seems to have been added later).

Try rewriting this part of your code to:

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

If you want to keep the same syntax for other modern browsers, you can fill it out by wrapping it conditional:

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

I don’t know if he will solve the problem, but it can help.

MDN says "Later browsers, including Firefox, also support listening for XMLHttpRequest events through the standard addEventListener APIs in addition to setting properties * for the function handler." . Again, I'm not sure, because they don’t say which browsers, and when, but best of all I can say that IE8 does not support it.

Answer 2

IE8 and less use attachEvent ... but it does not work with XMLHttpRequest

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

If in doubt about a problem with JS, first stop MDN and then again :)