Is it possible to register listeners in a web worker to events other than 'message' and 'error'? E.g.

addEventListener('keydown', function (e) {
  postMessage('test');
});

EDIT:

According to @T.J.Crowder, it's not possible. However, in my case, I was able to emulate it with messages, somehow like this:

In the worker:

const handlers = {};

function registerKeyHandler(keycode, callback) {
  postMessage({
    type: 'REGISTER_KEY_HANDLER',
    keycode: keycode,
  });

  handlers[keycode] = handlers[keycode] || [];
  handlers[keycode].push(callback);
}

function onKeydown(keycode) {
  const hs = handlers[keycode] || [];
  hs.forEach(h => h());
}

self.onmessage = function(msg) {
  switch (msg.type) {
    case 'KEYDOWN':
      onKeydown(msg.payload.keycode);
      break;
  }
};

Outside:

worker.onmessage = function(msg) {
  switch (msg.type) {
    case 'REGISTER_KEY_HANDLER':
      window.addEventListener('keydown', function (e) {
        if (e.keyCode !== msg.keycode) {
          return;
        }
        worker.postMessage({
          type: 'KEYDOWN',
          keycode: msg.keycode,
        });
      });
      break;
  }
};

Is it possible to register listeners in a web worker to events other than 'message' and 'error'? E.g.

addEventListener('keydown', function (e) {
  postMessage('test');
});

EDIT:

According to @T.J.Crowder, it's not possible. However, in my case, I was able to emulate it with messages, somehow like this:

In the worker:

const handlers = {};

function registerKeyHandler(keycode, callback) {
  postMessage({
    type: 'REGISTER_KEY_HANDLER',
    keycode: keycode,
  });

  handlers[keycode] = handlers[keycode] || [];
  handlers[keycode].push(callback);
}

function onKeydown(keycode) {
  const hs = handlers[keycode] || [];
  hs.forEach(h => h());
}

self.onmessage = function(msg) {
  switch (msg.type) {
    case 'KEYDOWN':
      onKeydown(msg.payload.keycode);
      break;
  }
};

Outside:

worker.onmessage = function(msg) {
  switch (msg.type) {
    case 'REGISTER_KEY_HANDLER':
      window.addEventListener('keydown', function (e) {
        if (e.keyCode !== msg.keycode) {
          return;
        }
        worker.postMessage({
          type: 'KEYDOWN',
          keycode: msg.keycode,
        });
      });
      break;
  }
};

• javascript
• web-worker

Share Improve this question Follow edited Jan 7, 2016 at 10:01 thegaram asked Jan 6, 2016 at 15:01 thegaramthegaram 77711 gold badge66 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

No. Web workers don't have access to the DOM, not least because

• Allowing multiple threads to access the DOM opens up browser-based code to a whole new (and very tricky) class of multi-threading errors; allowing only the main UI thread to update the DOM avoids that
• Some browsers' DOM implementations can't handle access from multiple threads

The global scope object* workers have isn't a window and only has the minimal features called out by the web workers specification, such as addEventListener (although that's oddly only mentioned in passing in the spec), postMessage, the onmessage and onerror properties, etc.

* (that's the mon one, there are dedicated [for Worker] and shared [for SharedWorker] sub-interfaces depending on the type of worker)