Communicating with a Worker

[00:00:00]
>> Kyle Simpson: Let's try it the other way. Let's try to send a message from our web page to the web worker. And here, rather than doing @EventListener, we're gonna just do self.onmessage equals, and I'm just gonna list an onMessage function that we're gonna write.
>> Kyle Simpson: Same thing, we're going to receive an event object.

[00:00:32]
There's gonna be a data on it and we will say console.log. And here we'll say received in web worker, and then whatever it is that we received.
>> Kyle Simpson: So that should in theory, if we send a message to the web worker, it should be able to receive that.

[00:00:59]
So what I'm gonna do is actually send a message back after we've received the first message. We could send it right after we started, but let's just do sort of a ping pong sort of a thing. We'll receive the message and then we'll send another message back. So how about if we say, worker.postMessage, we're back in the web page now.

[00:01:20]
Worker.postMessage and we'll say, hello from the client.
>> Kyle Simpson: All right I'm gonna refresh my page. We'll check that our console is empty, and when I click the start button now we should see a console message from the web worker, as well as in our web page. We see hello from the web worker and then we see received in web worker, hello from the client.

[00:01:55]
So we've got two way communication happening between our web worker and our page.
>> Kyle Simpson: Speaking of the data that we're gonna be sending between workers and our web page, the data is copied. It is not sent by reference, if it were sent by reference, we would have all kinds of threaded issues to be concerned about.

[00:02:18]
So the data is copied. Now normal data like numbers and strings are all already obviously copied, but even if you send something like a JSON object, that entire object is going to be copied, and it's copied by way of what's called the structured clone algorithm. Structured cloning algorithm, which is part of the web specification.

[00:02:39]
And if you want to read about all those glory details, just Google structured clone algorithm. But it's essentially gonna make a copy of your data, any data that it actually can copy. So if you send stuff that can't be copied then it ain't gonna work. So for example, you can't send something like a function to a web worker.

[00:03:00]
However, you can take the string representation of a function and send that to a web worker and then evaluate it inside of a web worker, and there have actually libraries out there that do exactly that. They'll take your functions and your code that's in a web page, and they'll replicate it in a web worker to have it running on the background threads.

[00:03:19]
So there are some tricks you can play there. But just bear in mind that if you have like a large chunk of data, say several megabytes worth of binary data or something, and you're going to ship that off to a web worker to have it crunch on it, maybe it's bitmap data that you want to process or something, just be aware that there's going to be a copy made of all that data, and then a copy made when the data comes back.