@actualwave/worker-dispatcher 中文文档教程

Question

WorkerDispatcher

这是 MessagePortDispatcher 与 Dedicated 和 Shared Worker 一起工作。 它可以使用自定义事件与 Worker 进行双向通信。 因此，您不必一直使用 postMessage() 并捕获 message 事件，您可以自由地向 worker 发送任何类型的事件或从 worker 发送任何类型的事件。

使用专用和共享 worker 的演示

Installation

npm 包管理器

npm install --save @actualwave/worker-dispatcher

和 yarn 包管理器

yarn add @actualwave/worker-dispatcher

Usage

注意：WorkerDispatcher 分发包包含 dist/ 包含包裹在 UMD 包装器中的文件夹，因此它可以与任何 AMD 模块加载器、nodejs require()< /代码> 或没有任何。

WorkerDispatcher 应该在 HTML 页面和 Worker 脚本中使用以正确处理通信。

Dedicated Worker

可以通过 WorkerDispatcher.create() 工厂函数创建 Dedicated Worker 的 WorkerDispatcher

var worker = new Worker('/workers/worker.js');
var dispatcher = WorkerDispatcher.create(worker);
/* or you can explicitly specify worker type */
var dispatcher = WorkerDispatcher.create(worker, WorkerDispatcher.DEDICATED_WORKER);

在 Worker 脚本中它可以通过 WorkerDispatcher.createForSelf() 创建，不需要传递任何东西，它会获取 Worker 的全局范围对象进行通信。

var dispatcher = WorkerDispatcher.createForSelf();

WorkerDispatcher 接受应该在 worker 中启动的 JS 文件的 Worker 对象或字符串 URL。 此处的 Worker 将从传递的 URL 字符串创建：

var dispatcher = WorkerDispatcher.create('/workers/worker.js');

Shared Worker

要将 WorkerDispatcher 与 Shared Worker 一起使用，应通过具有指定 Worker 类型的 WorkerDispatcher.create() 工厂方法创建。

 var worker = new SharedWorker('/workers/sharedworker.js');
 var dispatcher = WorkerDispatcher.create(worker, WorkerDispatcher.SHARED_WORKER);
 dispatcher.start();

在 SharedWorker 中，它可以通过 WorkerDispatcher.createForSelf() 创建。 WorkerDispatcher 的客户端连接将自动创建。

var dispatcher = WorkerDispatcher.createForSelf();
dispatcher.addEventListener(WorkerDispatcher.WorkerEvent.CONNECT, function(event) {
  var client = event.client;
  client.addEventListener('data', function(event) {
    console.log('new data from client', event.data);
  });
  client.start();
  client.dispatchEvent('initialized');
});

Sending and receiving messages

要发送消息，请使用 dispatchEvent() 事件，要接收消息，请添加事件侦听器。 发件人调度程序不会触发已发送的事件，因此您无法监听刚刚发送的事件

var dispatcher = WorkerDispatcher.create('/workers/worker.js');
dispatcher.addEventListener('anyEvent', function(){
    console.log('Event received');
});
dispatcher.dispatchEvent('anyEvent');

在这种情况下不会调用事件监听器，但如果另一方将发送 "anyEvent" 事件，则此监听器将叫做。 在 HTML 页面上：

var dispatcher = new WorkerDispatcher('/workers/worker.js');
dispatcher.addEventListener('anyEvent', function(event) {
    console.log('Event received');
});

工作人员代码：

var dispatcher = WorkerDispatcher.createForSelf();
dispatcher.dispatchEvent('anyEvent');

项目包含 example 文件夹，其中包含使用 WorkerDispatcher 构建的专用和共享工作人员通信示例。

API

WorkerDispatcher constructor arguments

• worker:Worker|MessagePort|String - Worker instance or URL string for worker script.
• receiverEventPreprocessor:Function - Optional, allows pre-processing of events and their data before firing event.
• senderEventPreprocessor:Function - Optional, allows pre-processing of events and their data before passing them to postMessage.
• type?:String - argument used internally to generate type property in prototype.

WorkerDispatcher shared instance members

WorkerDispatcher 是一个基类，它共享所有类型的 WorkerDispatcher 的功能。 直接实例化WorkerDispatcher时，实际上创建的是DedicatedWorkerDispatcher。

• type:String - type of the worker Including all members of MessagePortDispatcher, some most important:
• addEventListener(eventType:String, listener:Function):void - add listener for incoming events. This method copied from receiver.
• hasEventListener(eventType:String):Boolean - check if incoming event has listeners. This method copied from receiver.
• removeEventListener(eventType:String, listener:Function):void - remove event listener for incoming event. This method copied from receiver.
• dispatchEvent(event:Object):void - does not fire event, it sends event to postMessage(). Can be used with two arguments:
• dispatchEvent(eventType:String, data?:Object):void

WorkerDispatcher static members

• CONNECT_EVENT：字符串 - WorkerEvent.CONNECT 的缩写。 新客户端可用时在 Shared Worker 脚本中触发的事件。

• DEDICATED_WORKER：字符串 - WorkerType.DEDICATED_WORKER 的

• 缩写 SHARED_WORKER：字符串 - WorkerType.SHARED_WORKER 的缩写

• 创建(target:String|Worker|SharedWorker, type?:String, receiverEventPreprocessor?:Function, senderEventPreprocessor?:Function):WorkerDispatcher - 根据类型创建 WorkerDispatcher 实例。 当前支持的类型是 WorkerDispatcher.DEDICATED_WORKER 和 WorkerDispatcher.SHARED_WORKER。 默认情况下将为 Dedicated Worker 创建调度程序。

• self(receiverEventPreprocessor?:Function, senderEventPreprocessor?:Function):WorkerDispatcher - 可以在 Worker 脚本中使用，它检查使用了哪种 worker 并为 WorkerGlobalScope 返回正确的调度程序对象。 对于 Dedicated Worker 返回 DedicatedWorkerDispatcher 实例，对于 Shared Worker -- ServerEventDispatcher。

• WorkerEvent:Object - Worker 事件类型

• CONNECT:String - 从 WorkerGlobalScope 触发的镜像连接事件，在新客户端连接时触发。 事件对象包含字段 client 和 ClientEventDispatcher 实例，用于与客户端通信。

• 错误：字符串 - 镜像 错误事件 从 WorkerGlobalScope

• LANGUAGECHANGE:String - 镜像 languagechange 事件 从 WorkerGlobalScope

• ONLINE 触发：字符串 - 镜像 在线事件 从 WorkerGlobalScope

• OFFLINE 触发：字符串 - 镜像 离线事件 从 WorkerGlobalScope 触发

• WorkerType:Object - 可能的调度程序类型，与 WorkerDispatcher.create() 一起使用

• DEDICATED_WORKER:String - 默认类型，将创建 DedicatedWorkerDispatcher

• SHARED_WORKER:String - 将创建 SharedWorkerDispatcher

• SHAREDWORKERSERVER:String - 对于内部使用，将创建 ServerEventDispatcher

• SHAREDWORKERCLIENT:String - 对于内部使用，将创建 ClientEventDispatche r

• DedicatedWorker:Function –

• 构造

• 函数

• DedicatedWorkerDispatcher

DedicatedWorkerDispatcher

的 () 在 Dedicated Worker 中调用，或者在 WorkerDispatcher 使用 new 运算符调用时调用。

• terminate():void - close connection to worker, i.e. destroy worker.

SharedWorkerDispatcher

使用 WorkerDispatcher.SHARED_WORKER 时创建。 使用WorkerDispatcher.create()创建时，worker的名称会默认为null，如果需要指定名称，可以使用构造函数实例化。

var dispatcher = new WorkerDispatcher.SharedWorkerDispatcher('/workers/sharedworker.js', 'worker-name');

ServerEventDispatcher

在 Shared Worker 中调用 WorkerDispatcher.createForSelf() 时创建。 它不同于其他类型的WorkerDispatcher，因为没有dispatchEvent()方法，所以它只能监听事件，比如WorkerEvent.CONNECT来接受连接。 由于它不能发送数据，它也没有sender EventDispatcher，只有receiver可用。

ClientEventDispatcher

当 Shared Worker 获得新连接时创建。 要捕获新连接，您应该监听 WorkerEvent.CONNECT 事件。

• start():void - Start communication with client
• close():void - Close connection to client

var _clients = [];
// Create ServerEventDispatcher
var dispatcher = WorkerDispatcher.createForSelf();
// Listen to incoming connections
dispatcher.addEventListener(WorkerDispatcher.WorkerEvent.CONNECT, function(event) {
  // Get ClientEventDispatcher of new connection from event, save and start it
  var client = event.client;
  _clients.push(client);
  client.start();
  client.dispatchEvent('initialize');
});

Links

MDN - 使用网络工作者 https://www.w3.org/TR/workers/