离子2中的网络工作者和网络工作者2

问题描述：

我们计划在离子2应用中使用网络工作者。然而离子2使用离子应用程序脚本（https://github.com/ionic-team/ionic-app-scripts，我们使用1.0.0版）和webpack。我们需要一个编译为JS的webworker typescript文件，但不要将其他文件与main.js捆绑在一起。离子2中的网络工作者和网络工作者2

我们脑子里想的是什么有一个文件名格式，如其中“.worker”文件扩展名部分将被识别并汇编了打字稿到JavaScript，但随着非绑定

servicetest.worker.ts其他文件。

对此的任何建议非常感谢，因为它似乎我们必须定制appscripts。

答

有点迟到的答案，但也许它可以帮助别人。看看https://www.javascripttuts.com/how-to-use-web-workers-with-ionic-in-one-go/

我跟着那篇文章，但不得不做一些调整，因为我不得不调用一个工作方法的需求，而不是构造函数。

在./src/assets文件夹中创建一个名为workers的新文件夹，其中您的工作人员为。 JS文件将生存。是的JS不是TS，据我所知，TypeScript文件不会编译成可用的webworker。

创建一个webworker。我会贴上我fuzzySearch webworker的主要代码（./assets/workers/fuzzysearch-worker.js）：

'use strict'; 

var pattern, originalList; 
self.onmessage = function(event) { 
    // Receive a message and answer accordingly 
    pattern = event.data.pattern; 
    originalList = event.data.originalList; 
    self.doFuzzySearch(); 
}; 

self.doFuzzySearch = function() { 
    var filteredList; 

    console.time('internalFastFilter'); 
    filteredList = self.fastFilter(originalList, (item) => self.hasApproxPattern(item.searchField, pattern)); 
    console.timeEnd('internalFastFilter'); 

    // Send the results back 
    postMessage({ filteredList: filteredList });  
}; 

// The code above is purposely incomplete

在你的。 TS文件中声明工人变量（一般是上面的构造函数）：

private readonly searchWorker: Worker = new Worker('./assets/workers/fuzzysearch-worker.js');

在构造函数：

constructor(/* Other injected dependencies here */ 
    public ngZone: NgZone) {  

     this.searchWorker.onmessage = (event) => { 
      // Inside ngZone for proper ChangeDetection 
      this.ngZone.run(()=> {       
      this.dataList = event.data.filteredList; 
      console.timeEnd('searchWorker'); 
      }) 
     };   

    }

最后，在你的 “动作功能”，可以说doSearch：

doSearch(event) { 
    // ... extra code to do some magic 

    console.time('searchWorker'); 
    this.searchWorker.postMessage({ command: 'doFuzzySearch', originalList: this.realList, pattern: searchFilter }); 

    // ... extra code to do some other magic 
}

this.searchWorker.postMessage拨打电话。所有重载操作都在webworker内解决。

希望它有帮助。此致敬礼。

离子2中的网络工作者和网络工作者2

相关推荐