# 建立应用侧与前端页面数据通道前端页面和应用侧之间可以用[createWebMessagePorts()](../reference/apis/js-apis-webview.md#createwebmessageports)接口创建消息端口来实现两端的通信。在下面的示例中，用侧页面中通过createWebMessagePorts方法创建消息端口，再把其中一个端口通过[postMessage()](../reference/apis/js-apis-webview.md#postmessage)接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。 - 应用侧代码。 ```ts // xxx.ets import web_webview from '@ohos.web.webview'; @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); ports: web_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; }) Button('postMessage') .onClick(() => { try { // 1、创建两个消息端口。 this.ports = this.controller.createWebMessagePorts(); // 2、在应用侧的消息端口(如端口1)上注册回调事件。 this.ports[1].onMessageEvent((result: web_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 + 'lenght 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.code}, Message: ${error.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.code}, Message: ${error.message}`); } }) Web({ src: $rawfile('xxx.html'), controller: this.controller }) } } } ``` - 前端页面代码。 ```html WebView Message Port Demo

WebView Message Port Demo

display received message send from ets

```