BFE.devAI解答 - JavaScript 代码题
171. create callback on message channel

实现一个 BetterChannel 类，它是在 SomeChannel 的基础上实现的，但提供了更好的可靠性：

• BetterChannel 类可以创建两个 port，用于在它们之间进行通信。
• 在接收端口(port2)中，当收到消息时，可以使用回调函数(reply)来处理消息，并且可以等待回复。
• 在发送端口(port1)中，可以通过带有回调函数参数的 postMessage 方法发送消息，并且可以等待回复。

具体实现细节可以参考以下代码：

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

class ChannelSender {
  constructor(port) {
    this.port = port;
    this.counter = 0;
    this.callbacks = new Map();
    this.port.onmessage = (event) => {
      const { id, data } = event.data;
      if (this.callbacks.has(id)) {
        const callback = this.callbacks.get(id);
        this.callbacks.delete(id);
        callback(data);
      }
    };
  }
  postMessage(message, callback) {
    const id = ++this.counter;
    this.callbacks.set(id, callback);
    this.port.postMessage({ id, data: message });
  }
}

class ChannelReceiver {
  constructor(port) {
    this.port = port;
    this.counter = 0;
    this.callbacks = new Map();
    this.port.onmessage = (event) => {
      const { id, data } = event.data;
      const reply = (replyData) => {
        this.port.postMessage({ id, data: replyData });
      };
      this.callbacks.get(data)(data, reply);
    };
  }
  onmessage(callback) {
    const id = ++this.counter;
    this.callbacks.set(id, callback);
  }
}

BetterChannel 类里面使用了 ChannelSender 和 ChannelReceiver 两个类来分别处理发送和接收部分的逻辑。

在 ChannelSender 中，每次调用 postMessage 方法时，都会生成一个唯一的 id，并将它和回调函数存到一个 Map 中。

当收到回复时，根据回复消息的 id 找到对应的回调函数，并调用它处理回复。

在 ChannelReceiver 中，调用 onmessage 方法时，会生成一个唯一的 id，并将它和回调函数存到一个 Map 中。

当收到消息时，根据消息的 data 查找对应的回调函数，并调用它处理消息，并传入一个 reply 函数，用于回复消息。