fix: use globalThis polyfill instead of self/global (#634)

In order to fix the "self is not defined" issues in Android 8 and React
Native.

Fixes #611, #626
Closes #627

Author: darrachequesne

lib/globalThis.browser.js

@@ -0,0 +1,9 @@
+module.exports = (() => {
+  if (typeof self !== "undefined") {
+    return self;
+  } else if (typeof window !== "undefined") {
+    return window;
+  } else {
+    return Function("return this")();
+  }
+})();

lib/globalThis.js

@@ -0,0 +1 @@
+module.exports = global;

lib/transports/polling-jsonp.js

@@ -1,4 +1,5 @@
 const Polling = require("./polling");
+const globalThis = require("../globalThis");
 
 const rNewline = /\n/g;
 const rEscapedNewline = /\\n/g;
@@ -31,7 +32,7 @@ class JSONPPolling extends Polling {
     // we do this here (lazily) to avoid unneeded global pollution
     if (!callbacks) {
       // we need to consider multiple engines in the same page
-      callbacks = global.___eio = global.___eio || [];
+      callbacks = globalThis.___eio = globalThis.___eio || [];
     }
 
     // callback identifier

lib/transports/polling-xhr.js

@@ -4,6 +4,7 @@ const XMLHttpRequest = require("xmlhttprequest-ssl");
 const Polling = require("./polling");
 const Emitter = require("component-emitter");
 const { pick } = require("../util");
+const globalThis = require("../globalThis");
 
 const debug = require("debug")("engine.io-client:polling-xhr");
 
@@ -361,7 +362,7 @@ if (typeof document !== "undefined") {
   if (typeof attachEvent === "function") {
     attachEvent("onunload", unloadHandler);
   } else if (typeof addEventListener === "function") {
-    const terminationEvent = "onpagehide" in self ? "pagehide" : "unload";
+    const terminationEvent = "onpagehide" in globalThis ? "pagehide" : "unload";
     addEventListener(terminationEvent, unloadHandler, false);
   }
 }

lib/transports/websocket-constructor.browser.js

@@ -0,0 +1,6 @@
+const globalThis = require("../globalThis");
+
+module.exports = {
+  WebSocket: globalThis.WebSocket || globalThis.MozWebSocket,
+  usingBrowserWebSocket: true
+};

lib/transports/websocket-constructor.js

@@ -0,0 +1,4 @@
+module.exports = {
+  WebSocket: require("ws"),
+  usingBrowserWebSocket: false
+};

lib/transports/websocket.js

@@ -3,31 +3,10 @@ const parser = require("engine.io-parser");
 const parseqs = require("parseqs");
 const yeast = require("yeast");
 const { pick } = require("../util");
+const { WebSocket, usingBrowserWebSocket } = require("./websocket-constructor");
 
 const debug = require("debug")("engine.io-client:websocket");
 
-let BrowserWebSocket, NodeWebSocket;
-
-if (typeof WebSocket !== "undefined") {
-  BrowserWebSocket = WebSocket;
-} else if (typeof self !== "undefined") {
-  BrowserWebSocket = self.WebSocket || self.MozWebSocket;
-}
-
-if (typeof window === "undefined") {
-  try {
-    NodeWebSocket = require("ws");
-  } catch (e) {}
-}
-
-/**
- * Get either the `WebSocket` or `MozWebSocket` globals
- * in the browser or try to resolve WebSocket-compatible
- * interface exposed by `ws` for Node-like environment.
- */
-
-let WebSocketImpl = BrowserWebSocket || NodeWebSocket;
-
 class WS extends Transport {
   /**
    * WebSocket transport constructor.
@@ -42,10 +21,6 @@ class WS extends Transport {
     if (forceBase64) {
       this.supportsBinary = false;
     }
-    this.usingBrowserWebSocket = BrowserWebSocket && !opts.forceNode;
-    if (!this.usingBrowserWebSocket) {
-      WebSocketImpl = NodeWebSocket;
-    }
     // WebSockets support binary
     this.supportsBinary = true;
   }
@@ -91,11 +66,11 @@ class WS extends Transport {
 
     try {
       this.ws =
-        this.usingBrowserWebSocket && !this.opts.isReactNative
+        usingBrowserWebSocket && !this.opts.isReactNative
           ? protocols
-            ? new WebSocketImpl(uri, protocols)
-            : new WebSocketImpl(uri)
-          : new WebSocketImpl(uri, protocols, opts);
+            ? new WebSocket(uri, protocols)
+            : new WebSocket(uri)
+          : new WebSocket(uri, protocols, opts);
     } catch (err) {
       return this.emit("error", err);
     }
@@ -156,7 +131,7 @@ class WS extends Transport {
         parser.encodePacket(packet, self.supportsBinary, function(data) {
           // always create a new object (GH-437)
           const opts = {};
-          if (!self.usingBrowserWebSocket) {
+          if (!usingBrowserWebSocket) {
             if (packet.options) {
               opts.compress = packet.options.compress;
             }
@@ -176,7 +151,7 @@ class WS extends Transport {
           // have a chance of informing us about it yet, in that case send will
           // throw an error
           try {
-            if (self.usingBrowserWebSocket) {
+            if (usingBrowserWebSocket) {
               // TypeError is thrown when passing the second argument on Safari
               self.ws.send(data);
             } else {
@@ -278,8 +253,8 @@ class WS extends Transport {
    */
   check() {
     return (
-      !!WebSocketImpl &&
-      !("__initialize" in WebSocketImpl && this.name === WS.prototype.name)
+      !!WebSocket &&
+      !("__initialize" in WebSocket && this.name === WS.prototype.name)
     );
   }
 }

lib/xmlhttprequest.js

@@ -1,6 +1,7 @@
 // browser shim for xmlhttprequest module
 
 const hasCORS = require("has-cors");
+const globalThis = require("./globalThis");
 
 module.exports = function(opts) {
   const xdomain = opts.xdomain;
@@ -31,7 +32,7 @@ module.exports = function(opts) {
 
   if (!xdomain) {
     try {
-      return new self[["Active"].concat("Object").join("X")](
+      return new globalThis[["Active"].concat("Object").join("X")](
         "Microsoft.XMLHTTP"
       );
     } catch (e) {}

package.json

@@ -65,7 +65,9 @@
   },
   "browser": {
     "ws": false,
-    "xmlhttprequest-ssl": "./lib/xmlhttprequest.js"
+    "xmlhttprequest-ssl": "./lib/xmlhttprequest.js",
+    "./lib/transports/websocket-constructor.js": "./lib/transports/websocket-constructor.browser.js",
+    "./lib/globalThis.js": "./lib/globalThis.browser.js"
   },
   "repository": {
     "type": "git",