在Angular中的Angular和Typescript中使用Web Worker(多线程)是否可行?

问题描述

我目前正在开发基于NativeScript和Angular2的应用程序.

I'm currently develop an App that is based on NativeScript and Angular2.

当我的应用程序通过HTTP获取数据时，我的屏幕冻结了一段时间，我想将获取操作放到另一个线程中.

My screen freeze for while when my App fetching data through HTTP, and I'd like to put the fetching action into another thread.

我在网络上进行了很多搜索，而我得到的只是javascript中的代码，例如官方文档- https://docs.nativescript.org/angular/core-concepts/multithreading-model.html

I did a lot of search on the web, and all I got is the code in javascript like the official doc - https://docs.nativescript.org/angular/core-concepts/multithreading-model.html

是否有任何方法可以在"Typescript"(包含对Angular注入的HTTP服务的支持)中使用WebWorker来实现多线程，而不是"Javascript"代码(来自官方文档的代码)

Is there any way to implement the muli-threading with WebWorker in "Typescript"(which contain the support of Angular injected HTTP service) instead of the "Javascript" code(the code from the official doc)

如果有人能给我一些指导或提示，我将不胜感激，如果我能得到一些相关的示例代码，那将是很棒的.谢谢.

It's appreciated if someone could give me some guide or hint, and it'll be great if I could got some relative example code.Thanks.

推荐答案

如果有人在使用Angular和Webpack在Nativescript中添加工作程序时遇到问题，则必须遵循此处.

If someone have some problems adding workers in Nativescript with Angular and Webpack, you must follow the steps listed here.

在后续步骤中要特别小心:

Keep special caution in the next steps:

• 导入工作程序时，到工作程序文件的路由在nativescript-worker-loader!之后.

在webpack.config.js中，请谨慎添加以下代码:

In the webpack.config.js keep caution adding this piece of code:

 {
     test: /.ts$/, exclude: /.worker.ts$/, use: [
         "nativescript-dev-webpack/moduleid-compat-loader",
         "@ngtools/webpack",
     ]
 },

因为您可能已经配置了AoT编译，如下所示:

because is probable that you already have configured the AoT compilation, like this:

{
    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
    use: [
        "nativescript-dev-webpack/moduleid-compat-loader",
        "@ngtools/webpack",
    ]
},

，您只需添加exclude: /.worker.ts$/,

• 最后，有一个工作程序示例，在这种情况下，它使用Android本机库:

• Finally, there is an example of a worker, in this case it use an Android native library:

• example.worker.ts:

• example.worker.ts:

 import "globals";
 const context: Worker = self as any;

 declare const HPRTAndroidSDK;

 context.onmessage = msg => {
     let request = msg.data;
     let port = request.port;
     let result = HPRTAndroidSDK.HPRTPrinterHelper.PortOpen("Bluetooth," + port.portName);
     context.postMessage(result);
 };

example.component.ts(../../workers/example.worker是指向我的工作人员的相对路径):

example.component.ts (../../workers/example.worker is the relative route to my worker):

import * as PrinterBTWorker from "nativescript-worker-loader!../../workers/example.worker";
import ...

connect(printer: HPRTPrinter): Observable<boolean> { 
    if (this.isConnected()){
        this.disconnect(); //Disconnect first if it's already connected
    }
    return Observable.create((observer) => {
        const worker = new PrinterBTWorker();
        worker.postMessage({ port: printer });

        worker.onmessage = (msg: any)  => {
            worker.terminate();
            if (msg.data == 0) { // 0: Connected, -1: Disconnected
                observer.next(true);
            }
            else {
                observer.next(false);
            }
        };

        worker.onerror = (err) => {
            worker.terminate();
            observer.next(false);
        }
    }).pipe(timeout(5000), catchError(err => of(false)));
}

注意:我使用Observable来使对worker的调用异步，并为对本机代码的调用添加超时，因为在无法连接到打印机的情况下(例如，它已关闭)，大约需要10秒钟的时间进行通知，在我看来，这一直困扰着应用程序.

Note: I use an Observable to make my call to the worker async and to add a timeout to the call to the native code, because in the case that it is not possible to connect to the printer (ex. it's turned off), it takes almost 10 seconds to notify, and this caused in my case the frezing of the app for all that time.

这篇关于在Angular中的Angular和Typescript中使用Web Worker(多线程)是否可行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！