Create a new file in the /src directory named worker.js and populate it with the following contents:

var wasmInstance = null;

self.addEventListener('message', event => {
  /**
   * Once the WebAssembly compilation is complete, this posts a message
   * back with whether or not the instantiation was successful. If the
   * payload is null, the compilation succeeded.
   */
  const sendCompilationMessage = (error = null) => {
    self.postMessage({
      type: 'COMPILE_WASM_RESPONSE',
      payload: error
    });
  };

  const { type, payload } = event.data;
  switch (type) {
    // Instantiates the compiled Wasm module and posts a message back to
    // the main thread indicating if the instantiation was successful:
    case 'COMPILE_WASM_REQUEST':
      const importObj = {
        env: {
          memoryBase: 0,
          tableBase: 0,
          memory: new WebAssembly.Memory({ initial: 256 }),
          table: new WebAssembly.Table({ initial: 2, element: 'anyfunc' }),
          abort: console.log
        }
      };

      WebAssembly.instantiate(payload, importObj)
        .then(instance => {
          wasmInstance = instance.exports;
          sendCompilationMessage();
        })
        .catch(error => {
          sendCompilationMessage(error);
        });
      break;

    // Calls the `calculate` method associated with the instance (add or
    // subtract, and posts the result back to the main thread:
    case 'CALC_REQUEST':
      const { firstVal, secondVal } = payload;
      const result = wasmInstance._calculate(firstVal, secondVal);

      self.postMessage({
        type: 'CALC_RESPONSE',
        payload: result
      });
      break;

    default:
      break;
  }
}, false);

The code is encapsulated within the event listener for the message event (self.addEventListener(...)), which is raised when the postMessage() function is called on the corresponding worker. The event parameter in the event listener's callback function contains a data property with the contents of the message. All of the messages passed between threads in the application follow the Flux Standard Action (FSA) convention. Objects that adhere to this convention have a type and payload property, where type is a string and payload can be of any type. You can read more about the FSA at https://github.com/redux-utilities/flux-standard-action.

The switch statement executes an action based on the message's type value, which is a string. If the type is 'COMPILE_WASM_REQUEST', the WebAssembly.instantiate() function is called with the payload from the message and importObj. The exports object of the result is assigned to the local wasmInstance variable for later use. If the type is 'CALC_REQUEST', the wasmInstance._calculate() function is called with the firstVal and secondVal values from the payload object. The calculation code should shed some light on why the function was named _calculate() instead of _add() or _subtract(). By using a general name, the worker doesn't care what operation it's performing, it just calls the function to get the result.

In both cases, the worker posts a message back to the main thread using the postMessage() function. I used a REQUEST/RESPONSE convention for the type property value. This allows you to quickly identify which thread the messages are originating from. Messages sent from the main thread end with _REQUEST in the type while responses coming from the worker threads end with _RESPONSE. Let's move on to the WebAssembly interaction code.