想了解更多關(guān)于開源的內(nèi)容，請訪問：

51CTO 開源基礎(chǔ)軟件社區(qū)

https://ost.51cto.com

概念介紹

在和應(yīng)用界面進行交互操作時，如按鈕點擊、屏幕滑動，想同時執(zhí)行一些耗時的操作，如網(wǎng)絡(luò)請求、數(shù)據(jù)下載。在應(yīng)用開發(fā)中，通常使用UI線程和后臺線程來分別處理這些操作，UI線程主要負責處理UI事件和用戶交互操作，后臺線程負責耗時操作。通過創(chuàng)建后臺線程可以避免UI線程被阻塞，提高應(yīng)用程序的響應(yīng)速度和用戶體驗。

OpenHarmony的ArkUI應(yīng)用開發(fā)框架提供了Worker和Taskpool等支持后臺多線程任務(wù)的方式，本文會通過開發(fā)范例介紹Worker的使用。在ArkUI應(yīng)用開發(fā)中，有2類線程：宿主線程和Worker線程。創(chuàng)建Worker的線程被稱為宿主線程，Worker腳本程序工作的線程被稱為Worker線程。Worker線程是與主線程并行的獨立線程，通常在Worker線程中處理耗時的操作。需要注意的是，在Worker后臺線程中執(zhí)行的代碼不能直接修改UI元素，UI元素的更新必須發(fā)生在UI線程中。

API接口

ArkUI的Worker線程模塊提供了構(gòu)造函數(shù)接口用于創(chuàng)建Worker線程，并為UI線程和Worker線程提供了線程間通訊接口。關(guān)于Worker API能力詳細信息，請參考@ohos.worker。本節(jié)只進行關(guān)鍵接口解讀。

宿主線程中的構(gòu)造函數(shù)

使用Worker的接口方法前，需要先構(gòu)造ThreadWorker實例，ThreadWorker類繼承WorkerEventTarget。

注意：Worker還提供構(gòu)造函數(shù)worker.Worker(scriptURL: string, options?: WorkerOptions)，由于已經(jīng)標記廢棄，請避免使用該廢棄的接口。

ThreadWorker構(gòu)造函數(shù)如下：

constructor(scriptURL: string, options?: WorkerOptions)

其中，參數(shù)解釋：

我們來看一個構(gòu)造的示例。不用擔心其中的腳步文件如何編寫，使用DevEco Studio創(chuàng)建Worker文件的時候，會生成模板。

import worker from '@ohos.worker';
// worker線程創(chuàng)建

// Stage模型-目錄同級（entry模塊下，workers目錄與pages目錄同級）
const workerStageModel01 = new worker.ThreadWorker('entry/ets/workers/worker.ts', {name:"first worker in Stage model"});
// Stage模型-目錄不同級（entry模塊下，workers目錄是pages目錄的子目錄）
const workerStageModel02 = new worker.ThreadWorker('entry/ets/pages/workers/worker.ts');

宿主線程中發(fā)送消息

宿主線程通過轉(zhuǎn)移對象所有權(quán)或者拷貝數(shù)據(jù)的方式向Worker線程發(fā)送消息，提供了兩個postMessage⁹⁺接口，其中一個如下所示：

postMessage(message: Object, options?: PostMessageOptions): void

其中，參數(shù)如下：

示例代碼如下：

const workerInstance = new worker.ThreadWorker("entry/ets/workers/worker.ts");

workerInstance.postMessage("hello world");

var buffer = new ArrayBuffer(8);
workerInstance.postMessage(buffer, [buffer]);

宿主線程中監(jiān)聽消息

在宿主線程中，通過監(jiān)聽事件來處理接收到的Worker線程中的消息。worker模塊提供了若干監(jiān)聽接口，我們以onmessage為例進行講解，其他監(jiān)聽方式類似，可以參考API參考文檔，不再贅述。
Worker對象的onmessage屬性表示宿主線程接收到來自其創(chuàng)建的Worker通過parentPort.postMessage接口發(fā)送的消息時被調(diào)用的事件處理程序，處理程序在宿主線程中執(zhí)行。

onmessage?: (event: MessageEvents) => void

其中，參數(shù)如下：

示例代碼如下：

const workerInstance = new worker.ThreadWorker("entry/ets/workers/worker.ts");
workerInstance.onmessage = function(e) {
    // e : MessageEvents, 用法如下：
    // let data = e.data;
    console.log("onmessage");
}

Worker線程中構(gòu)造實例

ThreadWorkerGlobalScope是Worker線程用于與宿主線程通信的類，通過postMessage接口發(fā)送消息給宿主線程、通過close接口銷毀Worker線程。ThreadWorkerGlobalScope類繼承GlobalScope9+。

注意：Worker還提供worker.parentPort接口，該接口屬于廢棄接口，應(yīng)避免使用。

在Worker腳本文件中，如entry\src\main\ets\workers\Worker.ts，構(gòu)建實例如下：

import worker, { ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@ohos.worker';

var workerPort: ThreadWorkerGlobalScope = worker.workerPort;

Worker線程中監(jiān)聽消息

ThreadWorkerGlobalScope的onmessage屬性表示W(wǎng)orker線程收到來自其宿主線程通過postMessage接口發(fā)送的消息時被調(diào)用的事件處理程序，處理程序在Worker線程中執(zhí)行。

onmessage?: (this: ThreadWorkerGlobalScope, ev: MessageEvents) => void

其中，參數(shù)如下所示：

示例代碼如下：

// main thread
import worker from '@ohos.worker';
const workerInstance = new worker.ThreadWorker("entry/ets/workers/worker.ts");
workerInstance.postMessage("hello world");

// worker.ts
import worker from '@ohos.worker';
const workerPort = worker.workerPort;
workerPort.onmessage = function(e) {
    console.log("receive main thread message");
}

Worker線程中發(fā)送消息

Worker線程通過轉(zhuǎn)移對象所有權(quán)或者拷貝數(shù)據(jù)的方式向宿主線程發(fā)送消息。提供了兩個postMessage9+接口，其中一個如下所示：

postMessage(messageObject: Object, options?: PostMessageOptions): void

其中，參數(shù)如下所示：

線程的關(guān)閉和銷毀

銷毀worker的方式有兩種；

• 被動銷毀

worker線程的生命周期跟隨應(yīng)用。若應(yīng)用退出則釋放worker資源。worker線程在執(zhí)行過程中出現(xiàn)異常終止掉worker。

• 主動銷毀

主動銷毀worker的方式有兩種，第一種在宿主線程調(diào)用worker.terminate()；第二種在worker線程調(diào)用workerPort.close()。 worker銷毀前會觸發(fā)onexit回調(diào)，注意，onexit回調(diào)只會在宿主線程中執(zhí)行。

宿主線程中銷毀worker線程的示例代碼：

const worker = new worker.ThreadWorker("entry/ets/workers/worker.ts");
worker.terminate();

Worker線程中銷毀worker線程的示例代碼：

// worker.ts
import worker from '@ohos.worker';
const workerPort = worker.workerPort;
workerPort.onmessage = function(e) {
    workerPort.close()
}

實現(xiàn)場景

我們模擬一個簡單的UI線程和Worker線程交互的場景。UI線程發(fā)送一個簡單的消息給Worker線程，觸發(fā)Worker線程中的一個耗時模擬操作，然后把結(jié)果返回UI線程進行界面展示。有點像，一個人站在山谷前，大喊一聲，過一段時間會從山谷中返回聲音。這個人就是UI線程，返回回音的山谷就是后臺線程。

設(shè)計思路

對于UI線程，只需要簡單地包含一個text和一個button。text用于展示后臺線程返回的信息，button按鈕被點擊后向后臺線程發(fā)送消息。UI線程還需要處理后臺返回的消息。

對于后臺線程，需要處理接收到UI消息，模擬一個耗時操作，然后返回。實現(xiàn)效果如下：

開發(fā)步驟

創(chuàng)建Worker

DevEco Studio提供了非常方便的創(chuàng)建Worker的方法。

在DevEco Studio工程中，選擇entry，右鍵菜單選擇New-Worker，輸入Worker名稱即可，比如就使用默認的Worker。

Studio會自動為生成文件entry\src\main\ets\workers\Worker.ts，并在模塊級配置文件entry\build-profile.json5中添加workers配置，如圖所示，可以看出使用的相對路徑：‘./src/main/ets/workers/Worker.ts’。

文件entry\build-profile.json5片段:

"buildOption": {
    "sourceOption": {
      "workers": [
        './src/main/ets/workers/Worker.ts',
      ]
    }
  },

宿主進程代碼實現(xiàn)

我們先看下宿主進程中，代碼如何實現(xiàn)。

我們知道，Worker線程不可以直接操作UI。在宿主線程中，監(jiān)聽到的worker線程返回消息無法直接賦值給@State變量進行UI界面渲染的。需要通過其他方式進行傳值，本示例中我們使用AppStorage和@Watch裝飾器。

如代碼所示，創(chuàng)建一個workerResult變量，當該變量發(fā)生變化后，會通過執(zhí)行監(jiān)聽函數(shù)workerResultChanged()，把存儲的值賦值給@State變量。

在宿主線程中創(chuàng)建的worker實例為threadWorker，它負責通過腳本文件創(chuàng)建worker線程，并負責執(zhí)行和worker線程的通訊交互。

在宿主線程中，界面中包含一個文本，展示文字，如果從worker進程中接收到的消息等，還有一個按鈕，點擊時會觸發(fā)發(fā)worker線程發(fā)送消息。

在Button的onClick()函數(shù)中，主要實現(xiàn)了2個功能，一個是定義宿主線程接收到worker消息的回調(diào)函數(shù)。從代碼中可以看出，當接收到消息后，會保存到AppStorage里。

另外一個功能點是，通過調(diào)用postMessage接口，向worker線程發(fā)送消息。

在宿主線程中，還支持很多監(jiān)聽函數(shù)，限于篇幅，不再展示，可以參考API自行實現(xiàn)。

import worker from '@ohos.worker';
let workerResult = AppStorage.Link('workerResult')

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @StorageLink('workerResult') @Watch('workerResultChanged') workerResult: String = ''
  threadWorker: worker.ThreadWorker = new worker.ThreadWorker("entry/ets/workers/Worker.ts")

  workerResultChanged() {
    this.message = AppStorage.Get('workerResult')
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Button('Click').onClick(
          () => {
            this.threadWorker.onmessage = function (message) {
              AppStorage.Set<String>('workerResult', message.data)
            }
            this.threadWorker.postMessage("message from main thread.")
          }
        )
      }
      .width('100%')
    }
    .height('100%')
  }
}

Worker進程代碼實現(xiàn)

我們再看下Worker進程中，代碼如何實現(xiàn)。Work線程腳本文件entry\src\main\ets\workers\Worker.ts。

語句var workerPort: ThreadWorkerGlobalScope = worker.workerPort;用于構(gòu)建Worker線程中的實例對象，該實例可以與宿主線程進行消息交互。

在workerPort.onmessage監(jiān)聽函數(shù)中，控制臺打印輸出從宿主線程中接收到的消息，然后通過workerPort.postMessage接口向宿主線程第一次發(fā)送消息，告訴宿主線程
請等待worker線程的操作。

然后，使用setTimeout函數(shù)模擬一個耗時操作，5000ms后再次向宿主線程發(fā)送消息，攜帶一個隨機數(shù)字，用于區(qū)分多次返回消息的差異。

在worker線程中的其他監(jiān)聽函數(shù)，如workerPort.onmessageerror、workerPort.onerror，或者銷毀worker線程的操作可以參考API自行實現(xiàn)。

文件entry\src\main\ets\workers\Worker.ts片段:

import worker from '@ohos.worker';
import { ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@ohos.worker';

var workerPort: ThreadWorkerGlobalScope = worker.workerPort;

workerPort.onmessage = function (e: MessageEvents) {
  console.info("onmessage: " + e.data)
  workerPort.postMessage("Waiting for the worker ...")
  setTimeout(() => {
    console.info('send to main thread')
    workerPort.postMessage("Echo from worker Random: " 
    + Math.round(100 * Math.random()))
  },
    5000)
}

運行測試效果

代碼編寫完畢，可以測試運行查看效果。推薦在模塊級配置文件entry\build-profile.json5中,修改運行時為"HarmonyOS"，這樣就可以在DevEco Studio中使用Simulator模擬器進行運行測試，手頭沒有設(shè)備也可以輕松體驗OpenHarmony應(yīng)用開發(fā)。

注意事項

Worker線程不可以直接操作UI，@State等變量無法直接進行賦值渲染，需要通過其他方式進行傳值。在本開發(fā)范例中， 就借助了AppStorage。

Worker線程不使用時，請及時銷毀，避免耗用資源。Worker有資源限制，如果創(chuàng)建數(shù)量太多，可以報如下錯誤：

Error message: Worker initialization failure, the number of workers exceeds the maximum.
SourceCode:
this.threadWorker = new worker.ThreadWorker("entry/ets/workers/Worker.ts");

想了解更多關(guān)于開源的內(nèi)容，請訪問：

51CTO 開源基礎(chǔ)軟件社區(qū)

https://ost.51cto.com