DEV Community

Lam
Lam

Posted on

Web Workers Cheat Sheet

#web #webworker #cheatsheet

[Web workers] Message data

[MessageEvent] 

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             ← the data
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: Array[0]
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"
Enter fullscreen mode Exit fullscreen mode

These are the contents of message on onmessage.

Web workers

Client 

var worker = new Worker('worker.js')

worker.onmessage = function (message) {
  alert(JSON.stringify(message.data))
})

worker.postMessage('hello!')
Enter fullscreen mode Exit fullscreen mode

Messages can be anything that can be serialized into JSON (objects, arrays, strings, numbers, booleans). See: structured clone

Worker 

self.onmessage = function (message) {
  ···
}

self.postMessage({ msg: 'hello' })
Enter fullscreen mode Exit fullscreen mode

Reference

Top comments (1)

Collapse
 
sunshine222025 profile image
SUNSHINE222025 •

Super handy summary — Web Workers are one of those features I forget about until I really need them 😅
I’ve been testing some Worker-heavy stuff locally on macOS, and having a stable setup (I use ServBay with Node/Nginx) definitely helps when simulating load or separating tasks from the main thread.