web-workers.md

   1 ---
   2 title: Web workers
   3 category: JavaScript
   4 updated: 2017-10-30
   5 layout: 2017/sheet
   6 weight: -1
   7 ---
   8
   9 ## Web workers
  10
  11 #### Client
  12
  13 ```js
  14 var worker = new Worker('worker.js')
  15
  16 worker.onmessage = function (message) {
  17   alert(JSON.stringify(message.data))
  18 })
  19
  20 worker.postMessage('hello!')
  21 ```
  22
  23 Messages can be anything that can be serialized into JSON (objects, arrays, strings, numbers, booleans). See: [structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
  24
  25 #### Worker
  26
  27 ```js
  28 self.onmessage = function (message) {
  29   ···
  30 }
  31
  32 self.postMessage({ msg: 'hello' })
  33 ```
  34
  35 ### Message data
  36
  37 #### [MessageEvent]
  38
  39 ```js
  40 bubbles: false
  41 cancelBubble: false
  42 cancelable: false
  43 clipboardData: undefined
  44 currentTarget: Worker
  45 data: "Hello"             ← the data
  46 defaultPrevented: false
  47 eventPhase: 0
  48 lastEventId: ""
  49 origin: ""
  50 ports: Array[0]
  51 returnValue: true
  52 source: null
  53 srcElement: Worker
  54 target: Worker
  55 timeStamp: 1344821022383
  56 type: "message"
  57 ```
  58
  59 These are the contents of `message` on onmessage.