WebAssembly (WASM) for High Performance Apps · レッスン

WASMスレッド間のメッセージパッシングとチャネル

生の共有メモリではなく、メッセージパッシングのパターンとチャネル抽象化を使って、並列WASMワーカーを連携させます。

レッスン 4/413 ステップ

「WASMスレッド間のメッセージパッシングとチャネル」はCoddyKit上の無料WebAssembly (WASM) for High Performance Appsレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWebAssembly (WASM) for High Performance Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 WebAssembly (WASM) for High Performance Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Two Models of Concurrency

Concurrent systems coordinate either by sharing memory (SharedArrayBuffer + atomics) or by passing messages. Message passing avoids many data races by design.

postMessage Basics

Web Workers communicate with postMessage. Data is structured-cloned, so each side gets its own copy.

const worker = new Worker("worker.js");
worker.postMessage({ cmd: "start", n: 1000 });
worker.onmessage = (e) => console.log("result", e.data);

Transferable Objects

To avoid copying large buffers, transfer ownership instead of cloning.

const buf = new ArrayBuffer(1024 * 1024);
worker.postMessage({ buf }, [buf]);
// buf is now neutered in the sender

Designing a Channel

A channel is a typed queue abstraction layered over postMessage: a send side and a receive side with backpressure and request IDs.

Request/Response Correlation

Attach a unique id to each message so async replies can be matched to their originating request via a pending-promise map.

const pending = new Map();
let nextId = 1;
function call(payload) {
  const id = nextId++;
  return new Promise((res) => {
    pending.set(id, res);
    worker.postMessage({ id, payload });
  });
}

Fan-Out Work Pools

For data parallelism, spawn N workers and round-robin tasks to them. Collect results as they arrive, preserving order with the request IDs.

Combining with Shared Memory

Message passing for control, SharedArrayBuffer for bulk data is a powerful hybrid: send a small message saying which slice to process, while the data lives in shared memory.

Avoiding Deadlocks

Pure message-passing systems still deadlock if two parties each wait for the other. Keep protocols acyclic and prefer non-blocking sends.

Serialization Cost

Structured clone is convenient but costly for big graphs. Prefer transferables or shared memory when payloads grow large.

Worker Lifecycle

Create workers up front in a pool and reuse them; spinning up a worker per task wastes time loading and instantiating the WASM module each time.

A Channel-Based Pipeline

Chain stages: source worker emits chunks, a transform worker processes them, a sink worker aggregates — each connected by a channel for a clean streaming pipeline.

Quick Check

How do you send a large ArrayBuffer to a worker without copying it?

対話的なレッスンで答える

Recap

You explored message passing with postMessage, transferables to avoid copies, and channel abstractions with request IDs and worker pools. Hybrid designs pair messages for control with shared memory for bulk data.

無料で開始

AI チューターと学ぶ WebAssembly (WASM) for High Performance Apps — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 12
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「WASMスレッド間のメッセージパッシングとチャネル」レッスンは無料ですか？

はい。「WASMスレッド間のメッセージパッシングとチャネル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、WebAssembly (WASM) for High Performance Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 WebAssembly (WASM) for High Performance Appsコースには全4レッスンが含まれています。

「WASMスレッド間のメッセージパッシングとチャネル」で何を学びますか？

生の共有メモリではなく、メッセージパッシングのパターンとチャネル抽象化を使って、並列WASMワーカーを連携させます。ブラウザで直接実行するハンズオンコードでWebAssembly (WASM) for High Performance Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

WebAssembly (WASM) for High Performance Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWebAssembly (WASM) for High Performance Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「WASMスレッド間のメッセージパッシングとチャネル」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWebAssembly (WASM) for High Performance Appsレッスンでコードを書いて実行できますか？

はい。すべてのWebAssembly (WASM) for High Performance Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← WebAssembly (WASM) for High Performance Appsに戻る