how does the custom events work in web-worker

[BronzwikGk]

Hi,
As i was digging the net to find a solution to the same problem you are solving. do you mind releasing a doc on how does the custom event works .
appreciate it.

[Tanzeel Kazi]

Hi @bronzwikgk !
Can you clarify your question for me? I am unsure if you're asking:

1. how to create and use custom events when using the library? or,
2. how the custom events are implemented in the source so you can use it in your own project?

Before I go further, I wrote this code about 8 years ago. There are so many things I would code differently now. Some ideas may even be fuzzy as I recall them, so please bear with me.

For Question 1:
The custom events work like any sub-pub event in JS. You listen to it using workerObj.on('my-event-name', <callback>). In some other part of the code (probably inside your web-worker script, you'd have a corresponding .trigger('my-event-name', <args>).

There are examples in the README for this here:
https://github.com/tanzeelkazi/web-worker#attaching-events-on-the-worker-object
https://github.com/tanzeelkazi/web-worker#triggering-events-from-within-the-worker-script

There is an example worker included here:
https://github.com/tanzeelkazi/web-worker/blob/master/js/example-worker.js

There is also interactive documentation included with the project under docs/index.html. Simply clone the project and open the index.html file in a web-browser. Switch to the Modules tab and browse through the methods and properties of WebWorker.

For Question 2:
The triggers and listeners are leveraged using $.Event from the jQuery library (version 1.9 when I created this project).

You can get a glimpse of it in the source code here:
https://github.com/tanzeelkazi/web-worker/blob/master/src/js/web-worker.js#L770
https://github.com/tanzeelkazi/web-worker/blob/master/src/js/web-worker.js#L706-L737
https://github.com/tanzeelkazi/web-worker/blob/master/src/js/web-worker.js#L173-L178

[BronzwikGk]

My query was related to question 2 of urs.
Thanks, Much appreciate it.

[Tanzeel Kazi]

No problem! Thanks for your interest in the inner workings of the project, and wish you good luck for your own endeavors.

[BronzwikGk]

I am trying to implement it without jQuery, but not able to get a working solution. Read on stackoverflow that, the worker instance in mainApp and self inside worker are on 2 different scope so it's not possible.

The way I am implementing it is.

app.js
let _worker = new worker(path);
let _nwEvent = new CustomEvent('request',{detail:"})
_worker.dispatchEvent(_nwEvent)

worker.js

self.addEventlistner('request',.....)

[Tanzeel Kazi]

That is correct, and also one of the reasons why this project was created. :)

The variable scopes are different, and any communication between the worker process and main window event thread has to happen through the postMessage API.
https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage

In my project, I abstract this around a "message parser" that takes care of sending messages and parsing/translating received messages between the worker thread and the window itself.

The relevant bits are here:
https://github.com/tanzeelkazi/web-worker/blob/master/src/js/web-worker.js#L569-L650