Multi-process Worker ​

For games, 16ms per frame is extremely valuable. If there are some tasks that can be processed asynchronously, they can be placed in Worker for running. After the running is completed, the results can be returned to the main thread.

Worker runs in a separate global context and thread, and cannot directly call the main thread method.

For data transmission between Worker and main thread, both parties useWorker.postMessage()to send data andWorker.onMessage()to receive data. The transmitted data is not directly shared but copied.

Usage process ​

Step 1. Configure Worker information ​

In game.json, you can configure the directory where the Worker code is placed. All JS codes in the directory will eventually be packaged into a JS file:

js
{
  "workers": "workers"
}

Through the above configuration, all JS files in the workers directory will be packaged into a JS file and used as part of the first package of the mini-game.

The size of the first package of the mini-game is capped (currently 4M). In order to prevent the worker code from occupying the size of the first package, starting from the basic library v2.0.10, it supports packaging the worker code into a sub-package. (Developer tools need to be updated to the latest version)

Example of configuring the worker code as a sub-package:

js
{
  "workers": {
    "path": "workers",
    "isSubpackage": true // true means the Worker is packaged as a subpackage. Default is false. Setting false is equivalent to { "workers": "workers" }
  }
}

Step 2. Add Worker code file ​

According to the configuration in step 1, create the following two entry files in the code directory:

js
workers / request / index.js;
workers / request / utils.js;
workers / response / index.js;

After adding, the directory structure is as follows:

js
├── game.js
├── game.json
├── project.config.json
└── workers
    ├── request
    │   ├── index.js
    │   └── utils.js
    └── response
        └── index.js

Step 3. Write Worker code ​

Write Worker response code in workers/request/index.js

js
const utils = require("./utils");
// In the Worker thread execution context, a global worker object is exposed. Use worker.onMessage/postMessage directly
worker.onMessage(function (res) {
  console.log(res);
});

Step 4. Initialize Worker in the main thread ​

Initialize Worker in the main thread code game.js.

js
const worker = wx.createWorker("workers/request/index.js"); // Specify the Worker entry file path, absolute path

Starting from the basic library v2.0.10, if the worker code is configured for sub-packaging, you need to download the worker code through the wx.preDownloadSubpackage interface first, and then initialize the Worker:

js
var task = wx.preDownloadSubpackage({
  packageType: "workers",
  success(res) {
    console.log("load worker success", res);
    var worker = wx.createWorker("workers/request/index.js"); // Create Worker If the Worker subpackage is not fully downloaded, calling createWorker will result in an error
  },
  fail(res) {
    console.log("load worker fail", res);
  },
});

task.onProgressUpdate((res) => {
  console.log(res.progress); // Monitor download progress using onProgressUpdate
  console.log(res.totalBytesWritten);
  console.log(res.totalBytesExpectedToWrite);
});

Step 5. The main thread sends a message to the Worker ​

js
worker.postMessage({
  msg: 'hello worker'
})

For other interfaces of the worker object, please refer to theworker interface description

Notes ​

  • The maximum number of concurrent workers is limited to 1. Please use Worker.terminate()to end the current Worker before creating the next one;
  • The code in the Worker can only require files in the specified Worker path and cannot reference other paths;
  • The entry file of the Worker is specified bywx.createWorker(), and the developer can dynamically specify the Worker entry file;
  • The wx series API is not supported in the Worker;
  • Messages are not supported between Workers;
  • Only JS files are supported in the Worker directory, and other types of static files need to be placed outside the Worker directory.