# 建立应用侧与前端页面数据通道前端页面和应用侧之间可以用[createWebMessagePorts()](../reference/apis-arkweb/js-apis-webview.md#createwebmessageports)接口创建消息端口来实现两端的通信。在下面的示例中，应用侧页面中通过createWebMessagePorts方法创建消息端口，再把其中一个端口通过[postMessage()](../reference/apis-arkweb/js-apis-webview.md#postmessage)接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。 - 应用侧代码。 ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); ports: webview.WebMessagePort[] = []; @State sendFromEts: string = 'Send this message from ets to HTML'; @State receivedFromHtml: string = 'Display received message send from HTML'; build() { Column() { // 展示接收到的来自HTML的内容 Text(this.receivedFromHtml) // 输入框的内容发送到HTML TextInput({ placeholder: 'Send this message from ets to HTML' }) .onChange((value: string) => { this.sendFromEts = value; }) // 该内容可以放在onPageEnd生命周期中调用。 Button('postMessage') .onClick(() => { try { // 1、创建两个消息端口。 this.ports = this.controller.createWebMessagePorts(); // 2、在应用侧的消息端口(如端口1)上注册回调事件。 this.ports[1].onMessageEvent((result: webview.WebMessage) => { let msg = 'Got msg from HTML:'; if (typeof (result) === 'string') { console.info(`received string message from html5, string is: ${result}`); msg = msg + result; } else if (typeof (result) === 'object') { if (result instanceof ArrayBuffer) { console.info(`received arraybuffer from html5, length is: ${result.byteLength}`); msg = msg + 'length is ' + result.byteLength; } else { console.info('not support'); } } else { console.info('not support'); } this.receivedFromHtml = msg; }) // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。 this.controller.postMessage('__init_port__', [this.ports[0]], '*'); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。 Button('SendDataToHTML') .onClick(() => { try { if (this.ports && this.ports[1]) { this.ports[1].postMessageEvent(this.sendFromEts); } else { console.error(`ports is null, Please initialize first`); } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` - 前端页面代码。 ```html WebView Message Port Demo

WebView Message Port Demo

display received message send from ets

```