https://github.com/jasheloper/random-name-gen
To practice building a dedicated worker.
https://github.com/jasheloper/random-name-gen
Last synced: 3 months ago
JSON representation
To practice building a dedicated worker.
- Host: GitHub
- URL: https://github.com/jasheloper/random-name-gen
- Owner: jasheloper
- Created: 2024-10-23T01:22:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-24T00:12:55.000Z (about 1 year ago)
- Last Synced: 2024-10-24T14:02:00.304Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://jasheloper.github.io/random-name-gen/
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Random First Name Generator
To practice building a dedicated worker.
https://jasheloper.github.io/random-name-gen/
Notes below for learning purposes.
## Main file: `main.js`
- The worker is established here using the `Worker()` constructor where the path containing the script is passed.
```
const worker = new Worker("name-worker.js");
```
- A click event is set up on the button, which will handle sending a message to the worker.
- The message sent will be an object containing:
```
{command: "generate"}
```
- The functionality for 'generate' will be defined in the worker script via a conditional statement (more on that below).
## Dedicated worker file: `name-worker.js`
- This is where the program's functionality lives (generating a random name).
- The worker will listen for the message from the main script.
- Once the message is received, a conditional is set up to check for `command = generate` in the message data, and if this is the case, the worker script will run and the result (the name) is sent back to the main file via a message.
```
addEventListener("message", (message) => {
if(message.data.command === "generate") {
const generatedName = nameGen(firstNames);
postMessage(generatedName);
}
});
```
## Finally
`main.js` will listen for the message sent back from the worker and this event will handle outputting the result in the browser.
```
output.textContent = message.data;
```
With this approach, the files are sending data back and forth using messages without having direct access to each other's variables.
*extra logging added to the code for learning purposes*