建立应用侧与前端页面数据通道

前端页面和应用侧之间可以用createWebMessagePorts()接口创建消息端口来实现两端的通信。

在下面的示例中,用侧页面中通过createWebMessagePorts方法创建消息端口,再把其中一个端口通过postMessage()接口发送到前端页面,便可以在前端页面和应用侧之间互相发送消息。

  • 应用侧代码。

    // 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 })
        }
      }
    }
    
  • 前端页面代码。

    <!--xxx.html-->
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>WebView Message Port Demo</title>
    </head>
    
    <script>
    var h5Port;
    var output = document.querySelector('.output');
    window.addEventListener('message', function (event) {
        if (event.data === '__init_port__') {
            if (event.ports[0] !== null) {
                h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
                h5Port.onmessage = function (event) {
                  // 2. 接收ets侧发送过来的消息.
                  var msg = 'Got message from ets:';
                  var result = event.data;
                  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');
                  }
                  output.innerHTML = msg;
                }
            }
        }
    })
    
    // 3. 使用h5Port往ets侧发送消息.
    function PostMsgToEts(data) {
        if (h5Port) {
          h5Port.postMessage(data);
        } else {
          console.error('h5Port is null, Please initialize first');
        }
    }
    </script>
    
    <body>
        <h1>WebView Message Port Demo</h1>
        <div>
            <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
            <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
        </div>
        <p class="output">display received message send from ets</p>
    </body>
    </html>