1e41f4b71Sopenharmony_ci# Establishing a Data Channel Between the Application and the Frontend Page 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciThe [createWebMessagePorts()](../reference/apis-arkweb/js-apis-webview.md#createwebmessageports) API allows you to create message ports to implement communication between the application and frontend page. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciIn the following example, **createWebMessagePorts** is used to create message ports on the application and [postMessage()](../reference/apis-arkweb/js-apis-webview.md#postmessage) is used to forward one of the message ports to the frontend page so that the application and frontend page can exchange messages with each other over the port. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci- Application code: 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci ```ts 13e41f4b71Sopenharmony_ci // xxx.ets 14e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 15e41f4b71Sopenharmony_ci import { BusinessError } from '@kit.BasicServicesKit'; 16e41f4b71Sopenharmony_ci 17e41f4b71Sopenharmony_ci @Entry 18e41f4b71Sopenharmony_ci @Component 19e41f4b71Sopenharmony_ci struct WebComponent { 20e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 21e41f4b71Sopenharmony_ci ports: webview.WebMessagePort[] = []; 22e41f4b71Sopenharmony_ci @State sendFromEts: string = 'Send this message from ets to HTML'; 23e41f4b71Sopenharmony_ci @State receivedFromHtml: string = 'Display received message send from HTML'; 24e41f4b71Sopenharmony_ci 25e41f4b71Sopenharmony_ci build() { 26e41f4b71Sopenharmony_ci Column() { 27e41f4b71Sopenharmony_ci // Display the content received from the HTML side. 28e41f4b71Sopenharmony_ci Text(this.receivedFromHtml) 29e41f4b71Sopenharmony_ci // Send the content in the text box to the HTML side. 30e41f4b71Sopenharmony_ci TextInput({ placeholder: 'Send this message from ets to HTML' }) 31e41f4b71Sopenharmony_ci .onChange((value: string) => { 32e41f4b71Sopenharmony_ci this.sendFromEts = value; 33e41f4b71Sopenharmony_ci }) 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ci // The following can be called in the onPageEnd lifecycle callback. 36e41f4b71Sopenharmony_ci Button('postMessage') 37e41f4b71Sopenharmony_ci .onClick(() => { 38e41f4b71Sopenharmony_ci try { 39e41f4b71Sopenharmony_ci // 1. Create two message ports. 40e41f4b71Sopenharmony_ci this.ports = this.controller.createWebMessagePorts(); 41e41f4b71Sopenharmony_ci // 2. Register a callback for the message port (for example, port 1) on the application. 42e41f4b71Sopenharmony_ci this.ports[1].onMessageEvent((result: webview.WebMessage) => { 43e41f4b71Sopenharmony_ci let msg = 'Got msg from HTML:'; 44e41f4b71Sopenharmony_ci if (typeof (result) === 'string') { 45e41f4b71Sopenharmony_ci console.info(`received string message from html5, string is: ${result}`); 46e41f4b71Sopenharmony_ci msg = msg + result; 47e41f4b71Sopenharmony_ci } else if (typeof (result) === 'object') { 48e41f4b71Sopenharmony_ci if (result instanceof ArrayBuffer) { 49e41f4b71Sopenharmony_ci console.info(`received arraybuffer from html5, length is: ${result.byteLength}`); 50e41f4b71Sopenharmony_ci msg = msg + 'lenght is ' + result.byteLength; 51e41f4b71Sopenharmony_ci } else { 52e41f4b71Sopenharmony_ci console.info('not support'); 53e41f4b71Sopenharmony_ci } 54e41f4b71Sopenharmony_ci } else { 55e41f4b71Sopenharmony_ci console.info('not support'); 56e41f4b71Sopenharmony_ci } 57e41f4b71Sopenharmony_ci this.receivedFromHtml = msg; 58e41f4b71Sopenharmony_ci }) 59e41f4b71Sopenharmony_ci // 3. Send the other message port (for example, port 0) to the HTML side, which then saves the message port. 60e41f4b71Sopenharmony_ci this.controller.postMessage('__init_port__', [this.ports[0]], '*'); 61e41f4b71Sopenharmony_ci } catch (error) { 62e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 63e41f4b71Sopenharmony_ci } 64e41f4b71Sopenharmony_ci }) 65e41f4b71Sopenharmony_ci 66e41f4b71Sopenharmony_ci // 4. Use the message port on the application to send messages to the message port that has been sent to the HTML side. 67e41f4b71Sopenharmony_ci Button('SendDataToHTML') 68e41f4b71Sopenharmony_ci .onClick(() => { 69e41f4b71Sopenharmony_ci try { 70e41f4b71Sopenharmony_ci if (this.ports && this.ports[1]) { 71e41f4b71Sopenharmony_ci this.ports[1].postMessageEvent(this.sendFromEts); 72e41f4b71Sopenharmony_ci } else { 73e41f4b71Sopenharmony_ci console.error(`ports is null, Please initialize first`); 74e41f4b71Sopenharmony_ci } 75e41f4b71Sopenharmony_ci } catch (error) { 76e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 77e41f4b71Sopenharmony_ci } 78e41f4b71Sopenharmony_ci }) 79e41f4b71Sopenharmony_ci Web({ src: $rawfile('index.html'), controller: this.controller }) 80e41f4b71Sopenharmony_ci } 81e41f4b71Sopenharmony_ci } 82e41f4b71Sopenharmony_ci } 83e41f4b71Sopenharmony_ci ``` 84e41f4b71Sopenharmony_ci 85e41f4b71Sopenharmony_ci- Frontend page code: 86e41f4b71Sopenharmony_ci 87e41f4b71Sopenharmony_ci ```html 88e41f4b71Sopenharmony_ci <!--index.html--> 89e41f4b71Sopenharmony_ci <!DOCTYPE html> 90e41f4b71Sopenharmony_ci <html> 91e41f4b71Sopenharmony_ci <head> 92e41f4b71Sopenharmony_ci <meta name="viewport" content="width=device-width, initial-scale=1.0"> 93e41f4b71Sopenharmony_ci <title>WebView Message Port Demo</title> 94e41f4b71Sopenharmony_ci </head> 95e41f4b71Sopenharmony_ci <body> 96e41f4b71Sopenharmony_ci <h1>WebView Message Port Demo</h1> 97e41f4b71Sopenharmony_ci <div> 98e41f4b71Sopenharmony_ci <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/> 99e41f4b71Sopenharmony_ci <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/> 100e41f4b71Sopenharmony_ci </div> 101e41f4b71Sopenharmony_ci <p class="output">display received message send from ets</p> 102e41f4b71Sopenharmony_ci </body> 103e41f4b71Sopenharmony_ci <script> 104e41f4b71Sopenharmony_ci var h5Port; 105e41f4b71Sopenharmony_ci var output = document.querySelector('.output'); 106e41f4b71Sopenharmony_ci window.addEventListener('message', function (event) { 107e41f4b71Sopenharmony_ci if (event.data === '__init_port__') { 108e41f4b71Sopenharmony_ci if (event.ports[0] !== null) { 109e41f4b71Sopenharmony_ci h5Port = event.ports[0]; // 1. Save the port number sent from the application side. 110e41f4b71Sopenharmony_ci h5Port.onmessage = function (event) { 111e41f4b71Sopenharmony_ci // 2. Receive messages sent from the eTS side. 112e41f4b71Sopenharmony_ci var msg = 'Got message from ets:'; 113e41f4b71Sopenharmony_ci var result = event.data; 114e41f4b71Sopenharmony_ci if (typeof(result) === 'string') { 115e41f4b71Sopenharmony_ci console.info(`received string message from html5, string is: ${result}`); 116e41f4b71Sopenharmony_ci msg = msg + result; 117e41f4b71Sopenharmony_ci } else if (typeof(result) === 'object') { 118e41f4b71Sopenharmony_ci if (result instanceof ArrayBuffer) { 119e41f4b71Sopenharmony_ci console.info(`received arraybuffer from html5, length is: ${result.byteLength}`); 120e41f4b71Sopenharmony_ci msg = msg + 'lenght is ' + result.byteLength; 121e41f4b71Sopenharmony_ci } else { 122e41f4b71Sopenharmony_ci console.info('not support'); 123e41f4b71Sopenharmony_ci } 124e41f4b71Sopenharmony_ci } else { 125e41f4b71Sopenharmony_ci console.info('not support'); 126e41f4b71Sopenharmony_ci } 127e41f4b71Sopenharmony_ci output.innerHTML = msg; 128e41f4b71Sopenharmony_ci } 129e41f4b71Sopenharmony_ci } 130e41f4b71Sopenharmony_ci } 131e41f4b71Sopenharmony_ci }) 132e41f4b71Sopenharmony_ci 133e41f4b71Sopenharmony_ci // 3. Use h5Port to send messages to the application side. 134e41f4b71Sopenharmony_ci function PostMsgToEts(data) { 135e41f4b71Sopenharmony_ci if (h5Port) { 136e41f4b71Sopenharmony_ci h5Port.postMessage(data); 137e41f4b71Sopenharmony_ci } else { 138e41f4b71Sopenharmony_ci console.error('h5Port is null, Please initialize first'); 139e41f4b71Sopenharmony_ci } 140e41f4b71Sopenharmony_ci } 141e41f4b71Sopenharmony_ci </script> 142e41f4b71Sopenharmony_ci </html> 143e41f4b71Sopenharmony_ci ``` 144