Implementing MessageChannel in postMessage

Problem: The current implementation of postMessage in react-native-webview lacks the ability to create chained calls where the response is linked to a specific request. This makes it difficult to guarantee that a received response corresponds to the most recently sent message.

Solution proposal: I propose to implement the MessageChannel pattern in react-native-webview. This standard is already used in browsers to communicate with iframes and allows you to establish a secure bidirectional communication channel between React Native and the webview.

By implementing MessageChannel, we can achieve the following benefits:

Secure bidirectional communication: Messages can be sent and received in both directions, with the guarantee that the response is related to the specific request. Improved organization and control: Calls can be organized into specific channels, facilitating communication management and debugging. Familiar pattern for developers: The MessageChannel pattern is familiar to web developers, making it easier to integrate with existing web pages. We believe that implementing MessageChannel would be a valuable addition to react-native-webview and would improve the overall developer experience.

Example of use:

RN:

const sendMsgToWebview = () => {
  const channel = new MessageChannel();
  channel.port1.onmessage = (e) => {
    console.log("Response: ", e);
  };
  webviewRef.current?.postMessage("Message from RN", [channel.port2]);
};

Webview:

window.addEventListener("message", (e) => {
  console.log("Message from RN: ", e);
  e.ports[0].postMessage("Message from webview");
});

react-native-webview / react-native-webview

Implementing MessageChannel in postMessage #3396