WebWorker

Namespace: Wisej.Ext.WebWorker

Assembly: Wisej.Ext.WebWorker (4.1.0.0)

• Component
  • Component
    • WebWorker

The WebWorker component represents a JavaScript WebWorker instance that can run on the client and fire sever events and receive updates from the server.

C#

public class WebWorker : Component, IWisejHandler

VB.NET

Public Class WebWorker
    Inherits Component
    Implements IWisejHandler

The worker script is set using either the JavaScript or the JavaScriptSource property and runs in a background thread in the browser. Data sent from the server with SendMessage is received in the worker's onmessage handler, and data sent by the worker with postMessage fires the PostMessage event on the server. See: Web Workers API.

Example:

The following example creates a worker that doubles the numbers it receives and sends the result back to the server:

private WebWorker webWorker;

private void Page1_Load(object sender, EventArgs e)
{
    this.webWorker = new WebWorker(this.components);
    this.webWorker.JavaScript = @"
        onmessage = function (e) {
            postMessage(e.data * 2);
        };";

    this.webWorker.PostMessage += webWorker_PostMessage;
}

private void buttonCalculate_Click(object sender, EventArgs e)
{
    this.webWorker.SendMessage(21);
}

private void webWorker_PostMessage(object sender, WebWorkerPostMessageEventArgs e)
{
    AlertBox.Show($"Result: {e.Data}"); // Result: 42
}

Constructors

WebWorker()

Initializes a new instance of the WebWorker class.

Example:

var worker = new WebWorker();
worker.JavaScriptSource = "Scripts/worker.js";
worker.PostMessage += (s, e) => AlertBox.Show(e.Data?.ToString());

WebWorker(container)

Initializes a new instance of the WebWorker class together with the specified container.

Name	Type	Description
container	IContainer	A IContainer that represents the container for the component.

Adding the component to a container ensures that it's disposed together with the container, for example when the owning page or form is disposed.

Throws:

• ArgumentNullException container is null.

Example:

// "components" is the container created by the designer for the page or form.
var worker = new WebWorker(this.components);
worker.JavaScript = "onmessage = function (e) { postMessage('Received: ' + e.data); };";

Properties

IsSupported

Boolean: Returns true if the client browser supports the JavaScript Worker class.

JavaScript

String: Returns or sets the JavaScript code to execute in the WebWorker process. (Default: "")

JavaScriptSource

String: Returns or sets the JavaScript file with the source code to execute in the WebWorker process. (Default: "")

Methods

OnPostMessage(e)

Fires the PostMessage event.

Parameter	Type	Description
e	WebWorkerPostMessageEventArgs

OnWebEvent(e)

Processes the event from the client.

Parameter	Type	Description
e	WisejEventArgs	Event arguments.

OnWebRender(config)

Renders the client component.

Parameter	Type	Description
config	Object	Dynamic configuration object.

SendMessage(data)

Sends the data object to the current WebWorker, if it's running.

Parameter	Type	Description
data	Object	The data object to send to the WebWorker. It's serialized to JSON before it's sent to the client.

If the worker is not running yet, it's started before the data is sent. The worker receives the data in the data property of the event passed to its onmessage handler.

Example:

The following example sends an object to a worker that sums an array of numbers:

// worker script:
// onmessage = function (e) {
//     var sum = e.data.values.reduce(function (a, b) { return a + b; }, 0);
//     postMessage({ name: e.data.name, sum: sum });
// };

private void buttonSum_Click(object sender, EventArgs e)
{
    this.webWorker.SendMessage(new
    {
        name = "Totals",
        values = new[] { 1, 2, 3, 4, 5 }
    });
}

private void webWorker_PostMessage(object sender, WebWorkerPostMessageEventArgs e)
{
    dynamic result = e.Data;
    AlertBox.Show($"{result.name}: {result.sum}"); // Totals: 15
}

Terminate()

Terminates the current WebWorker.

The worker process in the browser is stopped immediately, without letting it finish its current work. A new worker is started automatically the next time SendMessage is called or when the JavaScript or JavaScriptSource property changes.

Example:

The following example stops a long running worker when the user clicks a cancel button:

private void buttonCancel_Click(object sender, EventArgs e)
{
    this.webWorker.Terminate();
    this.labelStatus.Text = "Canceled.";
}

Update()

Updates the component on the client.

Calling this method reloads the worker's source code on the client, which terminates the running worker and starts a new one. It's called automatically when the JavaScript or JavaScriptSource property changes.

Example:

The following example restarts the worker after the script file has been changed on the server:

private void buttonReload_Click(object sender, EventArgs e)
{
    File.WriteAllText(
        Path.Combine(Application.StartupPath, "Scripts/worker.js"),
        "onmessage = function (e) { postMessage(e.data.toUpperCase()); };");

    this.webWorker.Update();
}

Events

PostMessage

WebWorkerPostMessageEventHandler Fired when the WebWorker calls "postMessage".