建立應(yīng)用側(cè)與前端頁(yè)面數(shù)據(jù)通道

2024-02-16 13:40 更新

前端頁(yè)面和應(yīng)用側(cè)之間可以用createWebMessagePorts()接口創(chuàng)建消息端口來(lái)實(shí)現(xiàn)兩端的通信。

在下面的示例中，應(yīng)用側(cè)頁(yè)面中通過(guò)createWebMessagePorts方法創(chuàng)建消息端口，再把其中一個(gè)端口通過(guò)postMessage()接口發(fā)送到前端頁(yè)面，便可以在前端頁(yè)面和應(yīng)用側(cè)之間互相發(fā)送消息。

  • 應(yīng)用側(cè)代碼。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. 

    4. @Entry
    5. @Component
    6. struct WebComponent {
    7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
    8.   ports: web_webview.WebMessagePort[];
    9.   @State sendFromEts: string = 'Send this message from ets to HTML';
    10.   @State receivedFromHtml: string = 'Display received message send from HTML';
    11. 

    12.   build() {
    13.     Column() {
    14.       // 展示接收到的來(lái)自HTML的內(nèi)容
    15.       Text(this.receivedFromHtml)
    16.       // 輸入框的內(nèi)容發(fā)送到html
    17.       TextInput({placeholder: 'Send this message from ets to HTML'})
    18.         .onChange((value: string) => {
    19.           this.sendFromEts = value;
    20.         })
    21. 

    22.       Button('postMessage')
    23.         .onClick(() => {
    24.           try {
    25.             // 1、創(chuàng)建兩個(gè)消息端口。
    26.             this.ports = this.controller.createWebMessagePorts();
    27.             // 2、在應(yīng)用側(cè)的消息端口(如端口1)上注冊(cè)回調(diào)事件。
    28.             this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
    29.               let msg = 'Got msg from HTML:';
    30.               if (typeof(result) === 'string') {
    31.                 console.info(`received string message from html5, string is: ${result}`);
    32.                 msg = msg + result;
    33.               } else if (typeof(result) === 'object') {
    34.                 if (result instanceof ArrayBuffer) {
    35.                   console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
    36.                   msg = msg + 'lenght is ' + result.byteLength;
    37.                 } else {
    38.                   console.info('not support');
    39.                 }
    40.               } else {
    41.                 console.info('not support');
    42.               }
    43.               this.receivedFromHtml = msg;
    44.             })
    45.             // 3、將另一個(gè)消息端口(如端口0)發(fā)送到HTML側(cè)，由HTML側(cè)保存并使用。
    46.             this.controller.postMessage('__init_port__', [this.ports[0]], '*');
    47.           } catch (error) {
    48.             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
    49.           }
    50.         })
    51. 

    52.       // 4、使用應(yīng)用側(cè)的端口給另一個(gè)已經(jīng)發(fā)送到html的端口發(fā)送消息。
    53.       Button('SendDataToHTML')
    54.         .onClick(() => {
    55.           try {
    56.             if (this.ports && this.ports[1]) {
    57.               this.ports[1].postMessageEvent(this.sendFromEts);
    58.             } else {
    59.               console.error(`ports is null, Please initialize first`);
    60.             }
    61.           } catch (error) {
    62.             console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
    63.           }
    64.         })
    65.       Web({ src: $rawfile('xxx.html'), controller: this.controller })
    66.     }
    67.   }
    68. }
  • 前端頁(yè)面代碼。
    1. <!--xxx.html-->
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>WebView Message Port Demo</title>
    7. </head>
    8. <body>
    9.     <h1>WebView Message Port Demo</h1>
    10.     <div>
    11.         <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
    12.         <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
    13.     </div>
    14.     <p class="output">display received message send from ets</p>
    15. </body>
    16. <script>
    17. var h5Port;
    18. var output = document.querySelector('.output');
    19. window.addEventListener('message', function (event) {
    20.     if (event.data === '__init_port__') {
    21.         if (event.ports[0] !== null) {
    22.             h5Port = event.ports[0]; // 1. 保存從ets側(cè)發(fā)送過(guò)來(lái)的端口
    23.             h5Port.onmessage = function (event) {
    24.               // 2. 接收ets側(cè)發(fā)送過(guò)來(lái)的消息.
    25.               var msg = 'Got message from ets:';
    26.               var result = event.data;
    27.               if (typeof(result) === 'string') {
    28.                 console.info(`received string message from html5, string is: ${result}`);
    29.                 msg = msg + result;
    30.               } else if (typeof(result) === 'object') {
    31.                 if (result instanceof ArrayBuffer) {
    32.                   console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
    33.                   msg = msg + 'lenght is ' + result.byteLength;
    34.                 } else {
    35.                   console.info('not support');
    36.                 }
    37.               } else {
    38.                 console.info('not support');
    39.               }
    40.               output.innerHTML = msg;
    41.             }
    42.         }
    43.     }
    44. })
    46. // 3. 使用h5Port往ets側(cè)發(fā)送消息.
    47. function PostMsgToEts(data) {
    48.     if (h5Port) {
    49.       h5Port.postMessage(data);
    50.     } else {
    51.       console.error('h5Port is null, Please initialize first');
    52.     }
    53. }
    54. </script>
    55. </html>
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)