connecting to websocket make webworker un-responsive in Microsoft edge

Question

So this is weird, when i try to connect to websocket (this is only a Microsoft edge issue) it makes so on every second page refresh webworker will not accept messages onMessage wont trigger at all:

consider the following:

main.js

    var worker = new Worker("webworker.js");
    worker.postMessage({ type: 'INIT_SOCKET' });

    worker.addEventListener('message',  (event) => {
        let data = event.data;

        if (typeof data === 'string') {
            data = JSON.parse(data);
        }

        if (data.type === 'SOCKET_INITIALIZED') {
            console.log('inititalized');
        }
    });

webworker.js

    var io = require('socket.io-client');

    var socket;
    onmessage = function(event) {
        var data = event.data;

        console.log('got a event');

        if (typeof data === 'string') {
            data = JSON.parse(data);
        }

        switch (data.type) {
            case 'INIT_SOCKET':
                try {
                    socket = io('xxxx', { transports: [ 'websocket' ], secure: true }); // this line causes the error
                    socket.on('connect', function () {
                        postMessage({
                            type: Consts.SOCKET_INITIALIZED
                        });
                    });
                } catch(e) {
                    console.log('some error ', e);
                }

            break;

        };
    };

Answer 1

require does not appear to be defined at Worker context. Use importScripts() to import external scripts into DedicatedWorkerGlobalScope. For example

importScripts("socket.io.js"); 

Could not determine how to stop io() call from polling and getting error, probably due to 404 error

socket.io.js:7370 WebSocket connection to 
'ws://echo.websocket.org/socket.io/?EIO=3&transport=websocket' failed:
Error during WebSocket handshake: Unexpected response code: 404

probably due to being unfamiliar, here, as to how io() is implemented. Though was able to define Socket object within Worker scope.

Approach using WebSocket returns expected result

const worker = new Worker("webworker.js");

worker.addEventListener('message', (event) => {
  let data = event.data;

  if (typeof data === 'string') {
    console.log(data)
  }

  if (data.type === 'SOCKET_INITIALIZED') {
    console.log('inititalized');
  }
});

worker.postMessage({
  type: 'INIT_SOCKET'
});

importScripts("socket.io.js");

let sock = io();

console.log(sock); // to demonstrate `Socket` is defined

sock.close(); // closing socket here to prevent `404` polling errors 

self.socket = void 0;

self.onmessage = function(event) {

  var data = event.data;

  console.log('got a event');

  if (typeof data === 'string') {
    data = JSON.parse(data);
  }

  switch (data.type) {
    case 'INIT_SOCKET':
      if (!self.socket) {
        try {

          self.socket = new WebSocket("ws://echo.websocket.org/");

          self.socket.onopen = function(e) {
            socket.send("WebSocket rocks");
            console.log("self.socket event.type:", e.type);
            self.postMessage({
              type: 'SOCKET_INITIALIZED'
            });
          };

          self.socket.onmessage = function(e) {
            console.log(e.data);
            self.socket.close()
          };

          self.socket.onerror = function(e) {
            console.log("self.socket error", e);
          };

          self.socket.onclose = function(e) {
            console.log("self.socket event.type", e.type);
          };

        } catch (e) {
          console.log('some error ', e);
        }

        break;

      };
  }
};

plnkr http://plnkr.co/edit/zVnLE6qG7Kf4yVSb0aJt?p=preview