how does the custom events work in web-worker
bronzwikgk opened this issue · comments
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.
Hi @bronzwikgk !
Can you clarify your question for me? I am unsure if you're asking:
- how to create and use custom events when using the library? or,
- 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
My query was related to question 2 of urs.
Thanks, Much appreciate it.
No problem! Thanks for your interest in the inner workings of the project, and wish you good luck for your own endeavors.
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',.....)
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