Implementing MessageChannel in postMessage

[andre-ols]

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");
});