BFE.devでのAI解答例 - JavaScript コーディング問題
171. create callback on message channel

class BetterChannel {
  constructor() {
    const { port1, port2 } = new SomeChannel();
    this.port1 = port1;
    this.port2 = port2;

    const replies = {};

    this.port2.onmessage = (message) => {
      const id = message.id;
      if (message.isReply) {
        if (id in replies) {
          replies[id](message.data);
        }
      } else {
        const reply = (data) => {
          const replyMessage = { id, isReply: true, data };
          this.port1.postMessage(replyMessage);
        }
        this.port2.onmessage(message.data, reply);
      }
    }
  }

  postMessage(data, callback) {
    const id = Math.random().toString();
    const message = { id, data };
    this.port1.postMessage(message);
    if (callback) {
      const replyCallback = (data) => {
        delete replies[id];
        callback(data)
      };
      replies[id] = replyCallback;
    }
  }
}

解説:

• BetterChannel コンストラクタは SomeChannel を作成し、両方のポート (port1, port2) を保持します。
• replies オブジェクトは、callback を送信する際に保持される返信を保持するために使用されます。
• port2.onmessage ハンドラは、isReply フラグをチェックして、メッセージが要求か返信かを判断どころです。
  • もし isReply フラグが true であれば、関連するコールバックを replies オブジェクトから検索し、関連するデータを返信します。
  • もし isReply フラグが false であれば、指定されたデータと reply関数を引数として port2.onmessage のハンドラが呼ばれます。
• postMessage メソッドは、ランダムな ID を生成し、返信がある場合は replies オブジェクトにコールバック関数を追加します。その後、メッセージを生成し、port1.postMessage() を呼び出します。