1e41f4b71Sopenharmony_ci# Establishing a Data Channel Between the Application and the Frontend Page (C/C++) 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ciThe following provides native APIs to implement communication between the frontend page and the application, which avoid unnecessary switching to the ArkTS environment and allow callback to be reported in non-UI threads to avoid UI blocking. In addition, messages and callbacks can be reported in non-UI threads to avoid UI blocking. Currently, only the string and buffer can be sent. 4e41f4b71Sopenharmony_ci 5e41f4b71Sopenharmony_ci## Binding the Native ArkWeb Component 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ci- The ArkWeb component is declared on the ArkTS side. You need to define a **webTag** and pass it to the C++ application through the Node-API. When the ArkWeb native API is called, **webTag** uniquely identifies the corresponding component. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci- ArkTS side: 10e41f4b71Sopenharmony_ci 11e41f4b71Sopenharmony_ci ```ts 12e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 13e41f4b71Sopenharmony_ci // Define a webTag and pass it to WebviewController when it is created to establish the mapping between controller and webTag. 14e41f4b71Sopenharmony_ci webTag: string = 'ArkWeb1'; 15e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 16e41f4b71Sopenharmony_ci ... 17e41f4b71Sopenharmony_ci // Use aboutToAppear() to pass the webTag to C++ through the native API. The webTag uniquely identifies the C++ ArkWeb component. 18e41f4b71Sopenharmony_ci aboutToAppear() { 19e41f4b71Sopenharmony_ci console.info("aboutToAppear") 20e41f4b71Sopenharmony_ci // Initialize the NDK API of the Web component. 21e41f4b71Sopenharmony_ci testNapi.nativeWebInit(this.webTag); 22e41f4b71Sopenharmony_ci } 23e41f4b71Sopenharmony_ci ... 24e41f4b71Sopenharmony_ci ``` 25e41f4b71Sopenharmony_ci 26e41f4b71Sopenharmony_ci## Obtaining the Native API Struct 27e41f4b71Sopenharmony_ci 28e41f4b71Sopenharmony_ciObtain the ArkWeb native APIs using [OH_ArkWeb_GetNativeAPI](../reference/apis-arkweb/_ark_web___any_native_a_p_i.md#arkweb_anynativeapi). You can pass different parameters to obtain the corresponding function pointer structs. The following APIs are provided: [ArkWeb_ControllerAPI](../reference/apis-arkweb/_ark_web___controller_a_p_i.md#arkweb_controllerapi), [ArkWeb_WebMessageAPI](../reference/apis-arkweb/_ark_web___web_message_a_p_i.md#arkweb_webmessageapi) and [ArkWeb_WebMessagePortAPI](../reference/apis-arkweb/_ark_web___web_message_port_a_p_i.md#arkweb_webmessageportapi). 29e41f4b71Sopenharmony_ci 30e41f4b71Sopenharmony_ci ```c++ 31e41f4b71Sopenharmony_ci static ArkWeb_ControllerAPI *controller = nullptr; 32e41f4b71Sopenharmony_ci static ArkWeb_WebMessagePortAPI *webMessagePort = nullptr; 33e41f4b71Sopenharmony_ci static ArkWeb_WebMessageAPI *webMessage = nullptr; 34e41f4b71Sopenharmony_ci ... 35e41f4b71Sopenharmony_ci controller = reinterpret_cast<ArkWeb_ControllerAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_CONTROLLER)); 36e41f4b71Sopenharmony_ci webMessagePort = 37e41f4b71Sopenharmony_ci reinterpret_cast<ArkWeb_WebMessagePortAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE_PORT)); 38e41f4b71Sopenharmony_ci webMessage = reinterpret_cast<ArkWeb_WebMessageAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE)); 39e41f4b71Sopenharmony_ci ``` 40e41f4b71Sopenharmony_ci 41e41f4b71Sopenharmony_ci## Sample Code 42e41f4b71Sopenharmony_ci 43e41f4b71Sopenharmony_ciUse [ARKWEB_MEMBER_MISSING](../reference/apis-arkweb/_web.md#arkweb_member_missing) to check whether the function struct has the corresponding pointer before calling an API to avoid crash caused by mismatch between the SDK and the device ROM. [createWebMessagePorts](../reference/apis-arkweb/_ark_web___controller_a_p_i.md#createwebmessageports), [postWebMessage](../reference/apis-arkweb/_ark_web___controller_a_p_i.md#postwebmessage) and [close](../reference/apis-arkweb/_ark_web___web_message_port_a_p_i.md#close) must be used in the UI thread. 44e41f4b71Sopenharmony_ci 45e41f4b71Sopenharmony_ci* Frontend page code: 46e41f4b71Sopenharmony_ci 47e41f4b71Sopenharmony_ci ```html 48e41f4b71Sopenharmony_ci <!-- entry/src/main/resources/rawfile/index.html --> 49e41f4b71Sopenharmony_ci <!-- index.html --> 50e41f4b71Sopenharmony_ci <!DOCTYPE html> 51e41f4b71Sopenharmony_ci <html lang="en-gb"> 52e41f4b71Sopenharmony_ci <body> 53e41f4b71Sopenharmony_ci <h1>etsRunJavaScriptExt test demo</h1>; 54e41f4b71Sopenharmony_ci <h1 id="h1"></h1> 55e41f4b71Sopenharmony_ci <h3 id="msg">Receive string:</h3> 56e41f4b71Sopenharmony_ci <h3 id="msg2">Receive arraybuffer:</h3> 57e41f4b71Sopenharmony_ci 58e41f4b71Sopenharmony_ci </body> 59e41f4b71Sopenharmony_ci <script type="text/javascript"> 60e41f4b71Sopenharmony_ci var h5Port; 61e41f4b71Sopenharmony_ci 62e41f4b71Sopenharmony_ci window.addEventListener('message', function (event) { 63e41f4b71Sopenharmony_ci if (event.data == 'init_web_messageport') { 64e41f4b71Sopenharmony_ci const port = event.ports.at(0); // 1. Save the port sent from the application. 65e41f4b71Sopenharmony_ci if (port) { 66e41f4b71Sopenharmony_ci console.log("hwd In html got message"); 67e41f4b71Sopenharmony_ci h5Port = port; 68e41f4b71Sopenharmony_ci port.onmessage = function (event) { 69e41f4b71Sopenharmony_ci console.log("hwd In html got message"); 70e41f4b71Sopenharmony_ci // 2. Receive the message sent from the application. 71e41f4b71Sopenharmony_ci var result = event.data; 72e41f4b71Sopenharmony_ci var type_s = typeof (result) 73e41f4b71Sopenharmony_ci switch (type_s) { 74e41f4b71Sopenharmony_ci case "object": 75e41f4b71Sopenharmony_ci if (result instanceof ArrayBuffer) { 76e41f4b71Sopenharmony_ci type_s = "ArrayBuffer"; 77e41f4b71Sopenharmony_ci var view = new Uint8Array(result); 78e41f4b71Sopenharmony_ci const decoder = new TextDecoder('utf-8'); 79e41f4b71Sopenharmony_ci result = decoder.decode(result); 80e41f4b71Sopenharmony_ci } else if (result instanceof Error) { 81e41f4b71Sopenharmony_ci type_s = "Error"; 82e41f4b71Sopenharmony_ci } else if (result instanceof Array) { 83e41f4b71Sopenharmony_ci type_s = "Array"; 84e41f4b71Sopenharmony_ci } 85e41f4b71Sopenharmony_ci break; 86e41f4b71Sopenharmony_ci default: 87e41f4b71Sopenharmony_ci break; 88e41f4b71Sopenharmony_ci } 89e41f4b71Sopenharmony_ci console.log("H5 recv type: " + type_s + "\nH5 recv result: " + result) 90e41f4b71Sopenharmony_ci document.getElementById("msg").innerHTML = "recv type: " + type_s; 91e41f4b71Sopenharmony_ci document.getElementById("msg2").innerHTML = "recv value: " + result; 92e41f4b71Sopenharmony_ci } 93e41f4b71Sopenharmony_ci h5Port.onmessageerror = (event) => { 94e41f4b71Sopenharmony_ci console.error(`hwd In html Error receiving message: ${event}`); 95e41f4b71Sopenharmony_ci }; 96e41f4b71Sopenharmony_ci } 97e41f4b71Sopenharmony_ci } 98e41f4b71Sopenharmony_ci }) 99e41f4b71Sopenharmony_ci window.onerror = function(message, url, line, column, error) { 100e41f4b71Sopenharmony_ci console.log("JavaScript Error: " + message + " on line " + line + " in " + url); 101e41f4b71Sopenharmony_ci document.getElementById("h1").innerHTML = "Failed to execute the function." 102e41f4b71Sopenharmony_ci }; 103e41f4b71Sopenharmony_ci 104e41f4b71Sopenharmony_ci // 3. Use h5Port to send messages to the application. 105e41f4b71Sopenharmony_ci function postStringToApp() { 106e41f4b71Sopenharmony_ci if (h5Port) { 107e41f4b71Sopenharmony_ci h5Port.postMessage("send string from H5"); 108e41f4b71Sopenharmony_ci } else { 109e41f4b71Sopenharmony_ci console.error("In html h5port is null, please init first"); 110e41f4b71Sopenharmony_ci } 111e41f4b71Sopenharmony_ci } 112e41f4b71Sopenharmony_ci function postBufferToApp() { 113e41f4b71Sopenharmony_ci if (h5Port) { 114e41f4b71Sopenharmony_ci const str = "Hello, World!"; 115e41f4b71Sopenharmony_ci const encoder = new TextEncoder(); 116e41f4b71Sopenharmony_ci const uint8Array = encoder.encode(str); 117e41f4b71Sopenharmony_ci h5Port.postMessage(uint8Array.buffer); 118e41f4b71Sopenharmony_ci } else { 119e41f4b71Sopenharmony_ci console.error("In html h5port is null, please init first"); 120e41f4b71Sopenharmony_ci } 121e41f4b71Sopenharmony_ci } 122e41f4b71Sopenharmony_ci 123e41f4b71Sopenharmony_ci function postJsonToApp() { 124e41f4b71Sopenharmony_ci if (h5Port) { 125e41f4b71Sopenharmony_ci var e = {"json": "json"}; 126e41f4b71Sopenharmony_ci h5Port.postMessage(e); 127e41f4b71Sopenharmony_ci } else { 128e41f4b71Sopenharmony_ci console.error("In html h5port is null, please init first"); 129e41f4b71Sopenharmony_ci } 130e41f4b71Sopenharmony_ci } 131e41f4b71Sopenharmony_ci 132e41f4b71Sopenharmony_ci function postArrayStringToApp() { 133e41f4b71Sopenharmony_ci if (h5Port) { 134e41f4b71Sopenharmony_ci h5Port.postMessage(["1", "2", "3"]); 135e41f4b71Sopenharmony_ci } else { 136e41f4b71Sopenharmony_ci console.error("In html h5port is null, please init first"); 137e41f4b71Sopenharmony_ci } 138e41f4b71Sopenharmony_ci } 139e41f4b71Sopenharmony_ci 140e41f4b71Sopenharmony_ci function postNumberToApp() { 141e41f4b71Sopenharmony_ci if (h5Port) { 142e41f4b71Sopenharmony_ci h5Port.postMessage(123); 143e41f4b71Sopenharmony_ci } else { 144e41f4b71Sopenharmony_ci console.error("In html h5port is null, please init first"); 145e41f4b71Sopenharmony_ci } 146e41f4b71Sopenharmony_ci } 147e41f4b71Sopenharmony_ci class MyClass { 148e41f4b71Sopenharmony_ci constructor() { 149e41f4b71Sopenharmony_ci // Constructor. 150e41f4b71Sopenharmony_ci this.myProperty = 'Hello, World!'; 151e41f4b71Sopenharmony_ci } 152e41f4b71Sopenharmony_ci 153e41f4b71Sopenharmony_ci myMethod() { 154e41f4b71Sopenharmony_ci // Instance method. 155e41f4b71Sopenharmony_ci console.log(this.myProperty); 156e41f4b71Sopenharmony_ci } 157e41f4b71Sopenharmony_ci 158e41f4b71Sopenharmony_ci static myStaticMethod() { 159e41f4b71Sopenharmony_ci // Static method. 160e41f4b71Sopenharmony_ci console.log('This is a static method.'); 161e41f4b71Sopenharmony_ci } 162e41f4b71Sopenharmony_ci } 163e41f4b71Sopenharmony_ci function postObjectToApp() { 164e41f4b71Sopenharmony_ci if (h5Port) { 165e41f4b71Sopenharmony_ci h5Port.postMessage(new MyClass()); 166e41f4b71Sopenharmony_ci } else { 167e41f4b71Sopenharmony_ci console.error("In html h5port is null, please init first"); 168e41f4b71Sopenharmony_ci } 169e41f4b71Sopenharmony_ci } 170e41f4b71Sopenharmony_ci 171e41f4b71Sopenharmony_ci </script> 172e41f4b71Sopenharmony_ci </html> 173e41f4b71Sopenharmony_ci ``` 174e41f4b71Sopenharmony_ci 175e41f4b71Sopenharmony_ci* ArkTS code: 176e41f4b71Sopenharmony_ci 177e41f4b71Sopenharmony_ci ```javascript 178e41f4b71Sopenharmony_ci // entry/src/main/ets/pages/Index.ets 179e41f4b71Sopenharmony_ci import testNapi from 'libentry.so' 180e41f4b71Sopenharmony_ci import web_webview from '@ohos.web.webview'; 181e41f4b71Sopenharmony_ci import { BusinessError } from '@ohos.base'; 182e41f4b71Sopenharmony_ci 183e41f4b71Sopenharmony_ci @Entry 184e41f4b71Sopenharmony_ci @Component 185e41f4b71Sopenharmony_ci struct Index { 186e41f4b71Sopenharmony_ci @State webTag: string = 'postMessage'; 187e41f4b71Sopenharmony_ci controller: web_webview.WebviewController = new web_webview.WebviewController(this.webTag); 188e41f4b71Sopenharmony_ci @State h5Log: string = 'Display received message send from HTML'; 189e41f4b71Sopenharmony_ci 190e41f4b71Sopenharmony_ci aboutToAppear() { 191e41f4b71Sopenharmony_ci web_webview.WebviewController.setWebDebuggingAccess(true); 192e41f4b71Sopenharmony_ci // Initialize the NDK API of the Web component. 193e41f4b71Sopenharmony_ci testNapi.nativeWebInit(this.webTag); 194e41f4b71Sopenharmony_ci } 195e41f4b71Sopenharmony_ci 196e41f4b71Sopenharmony_ci aboutToDisAppear() { 197e41f4b71Sopenharmony_ci console.error("aboutToDisAppear") 198e41f4b71Sopenharmony_ci } 199e41f4b71Sopenharmony_ci 200e41f4b71Sopenharmony_ci build() { 201e41f4b71Sopenharmony_ci Scroll() { 202e41f4b71Sopenharmony_ci Column({ space: 10 }) { 203e41f4b71Sopenharmony_ci // Display the content received by the HTML5 page. 204e41f4b71Sopenharmony_ci Text ("The message received by the HTML5 page from the application") 205e41f4b71Sopenharmony_ci TextArea({text: this.h5Log}) 206e41f4b71Sopenharmony_ci .id("log_area") 207e41f4b71Sopenharmony_ci .width("100%") 208e41f4b71Sopenharmony_ci .height(100) 209e41f4b71Sopenharmony_ci .border({ width: 1 }) 210e41f4b71Sopenharmony_ci Text ("Button on the application") 211e41f4b71Sopenharmony_ci Row() { 212e41f4b71Sopenharmony_ci Button('createNoControllerTagPort') 213e41f4b71Sopenharmony_ci .id("create_no_tag_btn") 214e41f4b71Sopenharmony_ci .onClick(() => { 215e41f4b71Sopenharmony_ci try { 216e41f4b71Sopenharmony_ci testNapi.createWebMessagePorts("noTag"); 217e41f4b71Sopenharmony_ci } catch (error) { 218e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 219e41f4b71Sopenharmony_ci } 220e41f4b71Sopenharmony_ci }) 221e41f4b71Sopenharmony_ci Button('createPort') 222e41f4b71Sopenharmony_ci .id("create_port_btn") 223e41f4b71Sopenharmony_ci .onClick(() => { 224e41f4b71Sopenharmony_ci try { 225e41f4b71Sopenharmony_ci testNapi.createWebMessagePorts(this.webTag); 226e41f4b71Sopenharmony_ci } catch (error) { 227e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 228e41f4b71Sopenharmony_ci } 229e41f4b71Sopenharmony_ci }) 230e41f4b71Sopenharmony_ci } 231e41f4b71Sopenharmony_ci 232e41f4b71Sopenharmony_ci Row({ space: 10 }) { 233e41f4b71Sopenharmony_ci 234e41f4b71Sopenharmony_ci Button('setHandler') 235e41f4b71Sopenharmony_ci .id("set_handler_btn") 236e41f4b71Sopenharmony_ci .onClick(() => { 237e41f4b71Sopenharmony_ci try { 238e41f4b71Sopenharmony_ci testNapi.setMessageEventHandler(this.webTag); 239e41f4b71Sopenharmony_ci } catch (error) { 240e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 241e41f4b71Sopenharmony_ci } 242e41f4b71Sopenharmony_ci }) 243e41f4b71Sopenharmony_ci 244e41f4b71Sopenharmony_ci Button('setHandlerThread') 245e41f4b71Sopenharmony_ci .id("set_handler_thread_btn") 246e41f4b71Sopenharmony_ci .onClick(() => { 247e41f4b71Sopenharmony_ci try { 248e41f4b71Sopenharmony_ci testNapi.setMessageEventHandlerThread(this.webTag); 249e41f4b71Sopenharmony_ci } catch (error) { 250e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 251e41f4b71Sopenharmony_ci } 252e41f4b71Sopenharmony_ci }) 253e41f4b71Sopenharmony_ci } 254e41f4b71Sopenharmony_ci 255e41f4b71Sopenharmony_ci Row({ space: 10 }) { 256e41f4b71Sopenharmony_ci Button('SendString') 257e41f4b71Sopenharmony_ci .id("send_string_btn") 258e41f4b71Sopenharmony_ci .onClick(() => { 259e41f4b71Sopenharmony_ci try { 260e41f4b71Sopenharmony_ci this.h5Log = "" 261e41f4b71Sopenharmony_ci testNapi.postMessage(this.webTag); 262e41f4b71Sopenharmony_ci } catch (error) { 263e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 264e41f4b71Sopenharmony_ci } 265e41f4b71Sopenharmony_ci }) 266e41f4b71Sopenharmony_ci Button('SendStringThread') 267e41f4b71Sopenharmony_ci .id("send_string_thread_btn") 268e41f4b71Sopenharmony_ci .onClick(() => { 269e41f4b71Sopenharmony_ci try { 270e41f4b71Sopenharmony_ci this.h5Log = "" 271e41f4b71Sopenharmony_ci testNapi.postMessageThread(this.webTag); 272e41f4b71Sopenharmony_ci } catch (error) { 273e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 274e41f4b71Sopenharmony_ci } 275e41f4b71Sopenharmony_ci }) 276e41f4b71Sopenharmony_ci } 277e41f4b71Sopenharmony_ci 278e41f4b71Sopenharmony_ci Row({ space: 10 }) { 279e41f4b71Sopenharmony_ci Button('SendBuffer') 280e41f4b71Sopenharmony_ci .id("send_buffer_btn") 281e41f4b71Sopenharmony_ci .onClick(() => { 282e41f4b71Sopenharmony_ci try { 283e41f4b71Sopenharmony_ci this.h5Log = "" 284e41f4b71Sopenharmony_ci testNapi.postBufferMessage(this.webTag); 285e41f4b71Sopenharmony_ci } catch (error) { 286e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 287e41f4b71Sopenharmony_ci } 288e41f4b71Sopenharmony_ci }) 289e41f4b71Sopenharmony_ci Button('SendNone') 290e41f4b71Sopenharmony_ci .id("send_none_btn") 291e41f4b71Sopenharmony_ci .onClick(() => { 292e41f4b71Sopenharmony_ci try { 293e41f4b71Sopenharmony_ci this.h5Log = "" 294e41f4b71Sopenharmony_ci testNapi.postNoneMessage(this.webTag); 295e41f4b71Sopenharmony_ci } catch (error) { 296e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 297e41f4b71Sopenharmony_ci } 298e41f4b71Sopenharmony_ci }) 299e41f4b71Sopenharmony_ci } 300e41f4b71Sopenharmony_ci 301e41f4b71Sopenharmony_ci Row({ space: 10 }) { 302e41f4b71Sopenharmony_ci 303e41f4b71Sopenharmony_ci Button('closePort') 304e41f4b71Sopenharmony_ci .id("close_port_btn") 305e41f4b71Sopenharmony_ci .onClick(() => { 306e41f4b71Sopenharmony_ci try { 307e41f4b71Sopenharmony_ci testNapi.closeMessagePort(this.webTag); 308e41f4b71Sopenharmony_ci } catch (error) { 309e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 310e41f4b71Sopenharmony_ci } 311e41f4b71Sopenharmony_ci }) 312e41f4b71Sopenharmony_ci Button('destroyNullPort') 313e41f4b71Sopenharmony_ci .id("destroy_null_btn") 314e41f4b71Sopenharmony_ci .onClick(() => { 315e41f4b71Sopenharmony_ci try { 316e41f4b71Sopenharmony_ci testNapi.destroyNullMessagePort(this.webTag); 317e41f4b71Sopenharmony_ci } catch (error) { 318e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 319e41f4b71Sopenharmony_ci } 320e41f4b71Sopenharmony_ci }) 321e41f4b71Sopenharmony_ci Button('destroyPort') 322e41f4b71Sopenharmony_ci .id("destroy_port_btn") 323e41f4b71Sopenharmony_ci .onClick(() => { 324e41f4b71Sopenharmony_ci try { 325e41f4b71Sopenharmony_ci testNapi.destroyMessagePort(this.webTag); 326e41f4b71Sopenharmony_ci } catch (error) { 327e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 328e41f4b71Sopenharmony_ci } 329e41f4b71Sopenharmony_ci }) 330e41f4b71Sopenharmony_ci } 331e41f4b71Sopenharmony_ci .width("100%") 332e41f4b71Sopenharmony_ci .padding(10) 333e41f4b71Sopenharmony_ci .border({ width: 1 }) 334e41f4b71Sopenharmony_ci 335e41f4b71Sopenharmony_ci Column({ space: 10 }) { 336e41f4b71Sopenharmony_ci Text ("The Send button on the HTML5 page") 337e41f4b71Sopenharmony_ci Row({ space: 10 }) { 338e41f4b71Sopenharmony_ci Button('H5String') 339e41f4b71Sopenharmony_ci .id("h5_send_string_btn") 340e41f4b71Sopenharmony_ci .onClick(() => { 341e41f4b71Sopenharmony_ci try { 342e41f4b71Sopenharmony_ci this.controller.runJavaScript("for(var i = 0; i < 2000; i++) postStringToApp()") 343e41f4b71Sopenharmony_ci } catch (error) { 344e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 345e41f4b71Sopenharmony_ci } 346e41f4b71Sopenharmony_ci }) 347e41f4b71Sopenharmony_ci Button('H5Buffer') 348e41f4b71Sopenharmony_ci .id("h5_send_buffer_btn") 349e41f4b71Sopenharmony_ci .onClick(() => { 350e41f4b71Sopenharmony_ci try { 351e41f4b71Sopenharmony_ci this.controller.runJavaScript("postBufferToApp()") 352e41f4b71Sopenharmony_ci } catch (error) { 353e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 354e41f4b71Sopenharmony_ci } 355e41f4b71Sopenharmony_ci }) 356e41f4b71Sopenharmony_ci Button('H5Number') 357e41f4b71Sopenharmony_ci .id("h5_send_number_btn") 358e41f4b71Sopenharmony_ci .onClick(() => { 359e41f4b71Sopenharmony_ci try { 360e41f4b71Sopenharmony_ci this.controller.runJavaScript("postNumberToApp()") 361e41f4b71Sopenharmony_ci } catch (error) { 362e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 363e41f4b71Sopenharmony_ci } 364e41f4b71Sopenharmony_ci }) 365e41f4b71Sopenharmony_ci } 366e41f4b71Sopenharmony_ci 367e41f4b71Sopenharmony_ci Row({ space: 10 }) { 368e41f4b71Sopenharmony_ci Button('H5Json') 369e41f4b71Sopenharmony_ci .id("h5_send_json_btn") 370e41f4b71Sopenharmony_ci .onClick(() => { 371e41f4b71Sopenharmony_ci try { 372e41f4b71Sopenharmony_ci this.controller.runJavaScript("postJsonToApp()") 373e41f4b71Sopenharmony_ci } catch (error) { 374e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 375e41f4b71Sopenharmony_ci } 376e41f4b71Sopenharmony_ci }) 377e41f4b71Sopenharmony_ci Button('H5Array') 378e41f4b71Sopenharmony_ci .id("h5_send_array_btn") 379e41f4b71Sopenharmony_ci .onClick(() => { 380e41f4b71Sopenharmony_ci try { 381e41f4b71Sopenharmony_ci this.controller.runJavaScript("postArrayStringToApp()") 382e41f4b71Sopenharmony_ci } catch (error) { 383e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 384e41f4b71Sopenharmony_ci } 385e41f4b71Sopenharmony_ci }) 386e41f4b71Sopenharmony_ci Button('H5Object') 387e41f4b71Sopenharmony_ci .id("h5_send_object_btn") 388e41f4b71Sopenharmony_ci .onClick(() => { 389e41f4b71Sopenharmony_ci try { 390e41f4b71Sopenharmony_ci this.controller.runJavaScript("postObjectToApp()") 391e41f4b71Sopenharmony_ci } catch (error) { 392e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 393e41f4b71Sopenharmony_ci } 394e41f4b71Sopenharmony_ci }) 395e41f4b71Sopenharmony_ci } 396e41f4b71Sopenharmony_ci } 397e41f4b71Sopenharmony_ci .width("100%") 398e41f4b71Sopenharmony_ci .margin(10) 399e41f4b71Sopenharmony_ci .padding(10) 400e41f4b71Sopenharmony_ci .border({ width: 1 }) 401e41f4b71Sopenharmony_ci 402e41f4b71Sopenharmony_ci Web({ src: $rawfile('index.html'), controller: this.controller }) 403e41f4b71Sopenharmony_ci .onConsole((event) => { 404e41f4b71Sopenharmony_ci if (event) { 405e41f4b71Sopenharmony_ci let msg = event.message.getMessage() 406e41f4b71Sopenharmony_ci if (msg.startsWith("H5")) { 407e41f4b71Sopenharmony_ci this.h5Log = event.message.getMessage() + "\n" + this.h5Log 408e41f4b71Sopenharmony_ci } 409e41f4b71Sopenharmony_ci } 410e41f4b71Sopenharmony_ci return false; 411e41f4b71Sopenharmony_ci }) 412e41f4b71Sopenharmony_ci } 413e41f4b71Sopenharmony_ci }.height('100%') 414e41f4b71Sopenharmony_ci .scrollable(ScrollDirection.Vertical) 415e41f4b71Sopenharmony_ci .scrollBar(BarState.Off) 416e41f4b71Sopenharmony_ci .edgeEffect(EdgeEffect.Spring) 417e41f4b71Sopenharmony_ci } 418e41f4b71Sopenharmony_ci } 419e41f4b71Sopenharmony_ci ``` 420e41f4b71Sopenharmony_ci 421e41f4b71Sopenharmony_ci* ArkTS APIs exposed on the native APIs: 422e41f4b71Sopenharmony_ci 423e41f4b71Sopenharmony_ci ```javascript 424e41f4b71Sopenharmony_ci // entry/src/main/cpp/types/libentry/index.d.ts 425e41f4b71Sopenharmony_ci export const nativeWebInit: (webName: string) => void; 426e41f4b71Sopenharmony_ci export const createWebMessagePorts: (webName: string) => void; 427e41f4b71Sopenharmony_ci export const postMessage: (webName: string) => void; 428e41f4b71Sopenharmony_ci export const postNoneMessage: (webName: string) => void; 429e41f4b71Sopenharmony_ci export const setMessageEventHandler: (webName: string) => void; 430e41f4b71Sopenharmony_ci export const closeMessagePort: (webName: string) => void; 431e41f4b71Sopenharmony_ci export const destroyMessagePort: (webName: string) => void; 432e41f4b71Sopenharmony_ci export const postBufferMessage: (webName: string) => void; 433e41f4b71Sopenharmony_ci export const destroyNullMessagePort: (webName: string) => void; 434e41f4b71Sopenharmony_ci export const setMessageEventHandlerThread: (webName: string) => void; 435e41f4b71Sopenharmony_ci export const postMessageThread: (webName: string) => void; 436e41f4b71Sopenharmony_ci ``` 437e41f4b71Sopenharmony_ci 438e41f4b71Sopenharmony_ci* Compilation configuration of the native APIs: 439e41f4b71Sopenharmony_ci 440e41f4b71Sopenharmony_ci ```c++ 441e41f4b71Sopenharmony_ci # entry/src/main/cpp/CMakeLists.txt 442e41f4b71Sopenharmony_ci # the minimum version of CMake. 443e41f4b71Sopenharmony_ci cmake_minimum_required(VERSION 3.4.1) 444e41f4b71Sopenharmony_ci project(NDKPostMessage) 445e41f4b71Sopenharmony_ci 446e41f4b71Sopenharmony_ci set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR}) 447e41f4b71Sopenharmony_ci 448e41f4b71Sopenharmony_ci if(DEFINED PACKAGE_FIND_FILE) 449e41f4b71Sopenharmony_ci include(${PACKAGE_FIND_FILE}) 450e41f4b71Sopenharmony_ci endif() 451e41f4b71Sopenharmony_ci 452e41f4b71Sopenharmony_ci include_directories(${NATIVERENDER_ROOT_PATH} 453e41f4b71Sopenharmony_ci ${NATIVERENDER_ROOT_PATH}/include) 454e41f4b71Sopenharmony_ci 455e41f4b71Sopenharmony_ci add_library(entry SHARED hello.cpp) 456e41f4b71Sopenharmony_ci 457e41f4b71Sopenharmony_ci find_library( 458e41f4b71Sopenharmony_ci # Sets the name of the path variable. 459e41f4b71Sopenharmony_ci hilog-lib 460e41f4b71Sopenharmony_ci # Specifies the name of the NDK library that 461e41f4b71Sopenharmony_ci # you want CMake to locate. 462e41f4b71Sopenharmony_ci hilog_ndk.z 463e41f4b71Sopenharmony_ci ) 464e41f4b71Sopenharmony_ci 465e41f4b71Sopenharmony_ci target_link_libraries(entry PUBLIC libace_napi.z.so ${hilog-lib} libohweb.so) 466e41f4b71Sopenharmony_ci ``` 467e41f4b71Sopenharmony_ci 468e41f4b71Sopenharmony_ci* Native API code: 469e41f4b71Sopenharmony_ci 470e41f4b71Sopenharmony_ci ```c++ 471e41f4b71Sopenharmony_ci // entry/src/main/cpp/hello.cpp 472e41f4b71Sopenharmony_ci #include "napi/native_api.h" 473e41f4b71Sopenharmony_ci #include <bits/alltypes.h> 474e41f4b71Sopenharmony_ci #include <memory> 475e41f4b71Sopenharmony_ci #include <string> 476e41f4b71Sopenharmony_ci #include <sys/types.h> 477e41f4b71Sopenharmony_ci #include <iostream> 478e41f4b71Sopenharmony_ci #include <map> 479e41f4b71Sopenharmony_ci #include "hilog/log.h" 480e41f4b71Sopenharmony_ci #include "web/arkweb_interface.h" 481e41f4b71Sopenharmony_ci #include <thread> 482e41f4b71Sopenharmony_ci 483e41f4b71Sopenharmony_ci constexpr unsigned int LOG_PRINT_DOMAIN = 0xFF00; 484e41f4b71Sopenharmony_ci ArkWeb_ControllerAPI *controller = nullptr; 485e41f4b71Sopenharmony_ci 486e41f4b71Sopenharmony_ci ArkWeb_WebMessagePortAPI *webMessagePort = nullptr; 487e41f4b71Sopenharmony_ci ArkWeb_WebMessageAPI *webMessage = nullptr; 488e41f4b71Sopenharmony_ci size_t web_message_port_size = 0; 489e41f4b71Sopenharmony_ci ArkWeb_WebMessagePortPtr *g_web_message_port_arr = nullptr; 490e41f4b71Sopenharmony_ci 491e41f4b71Sopenharmony_ci static void WebMessagePortCallback(const char *webTag, const ArkWeb_WebMessagePortPtr port, 492e41f4b71Sopenharmony_ci const ArkWeb_WebMessagePtr message, void *userData) { 493e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 494e41f4b71Sopenharmony_ci "ndk WebMesagePortCallback webTag:%{public}s,messageType:%{public}d", webTag, 495e41f4b71Sopenharmony_ci webMessage->getType(message)); 496e41f4b71Sopenharmony_ci size_t len = 0; 497e41f4b71Sopenharmony_ci void *back = webMessage->getData(message, &len); 498e41f4b71Sopenharmony_ci if (webMessage->getType(message) == ArkWeb_WebMessageType::ARKWEB_STRING) { 499e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 500e41f4b71Sopenharmony_ci "ndk WebMesagePortCallback message:%{public}s,messageSize:%{public}d", back, len); 501e41f4b71Sopenharmony_ci } else if (webMessage->getType(message) == ArkWeb_WebMessageType::ARKWEB_BUFFER) { 502e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 503e41f4b71Sopenharmony_ci "ndk WebMesagePortCallback messageSize:%{public}d", len); 504e41f4b71Sopenharmony_ci } 505e41f4b71Sopenharmony_ci } 506e41f4b71Sopenharmony_ci 507e41f4b71Sopenharmony_ci static napi_value NativeWebInit(napi_env env, napi_callback_info info) { 508e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk NativeWebInit start"); 509e41f4b71Sopenharmony_ci size_t argc = 1; 510e41f4b71Sopenharmony_ci napi_value args[1] = {nullptr}; 511e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 512e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 513e41f4b71Sopenharmony_ci size_t webTagSize = 0; 514e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 515e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 516e41f4b71Sopenharmony_ci size_t webTagLength = 0; 517e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 518e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "ndk NativeWebInit webTag:%{public}s", webTagValue); 519e41f4b71Sopenharmony_ci 520e41f4b71Sopenharmony_ci controller = reinterpret_cast<ArkWeb_ControllerAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_CONTROLLER)); 521e41f4b71Sopenharmony_ci if (controller) 522e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "get ArkWeb_ControllerAPI success"); 523e41f4b71Sopenharmony_ci 524e41f4b71Sopenharmony_ci webMessagePort = 525e41f4b71Sopenharmony_ci reinterpret_cast<ArkWeb_WebMessagePortAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE_PORT)); 526e41f4b71Sopenharmony_ci if (webMessagePort) 527e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "get ArkWeb_WebMessagePortAPI success"); 528e41f4b71Sopenharmony_ci 529e41f4b71Sopenharmony_ci webMessage = reinterpret_cast<ArkWeb_WebMessageAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE)); 530e41f4b71Sopenharmony_ci if (webMessage) 531e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "get ArkWeb_WebMessageAPI success"); 532e41f4b71Sopenharmony_ci 533e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk NativeWebInit end"); 534e41f4b71Sopenharmony_ci 535e41f4b71Sopenharmony_ci return nullptr; 536e41f4b71Sopenharmony_ci } 537e41f4b71Sopenharmony_ci 538e41f4b71Sopenharmony_ci static napi_value createWebMessagePorts(napi_env env, napi_callback_info info) { 539e41f4b71Sopenharmony_ci size_t argc = 2; 540e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 541e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 542e41f4b71Sopenharmony_ci 543e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 544e41f4b71Sopenharmony_ci size_t webTagSize = 0; 545e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 546e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 547e41f4b71Sopenharmony_ci size_t webTagLength = 0; 548e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 549e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 550e41f4b71Sopenharmony_ci 551e41f4b71Sopenharmony_ci // Initialize the ports. 552e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk createWebMessagePorts begin"); 553e41f4b71Sopenharmony_ci g_web_message_port_arr = controller->createWebMessagePorts(webTagValue, &web_message_port_size); 554e41f4b71Sopenharmony_ci // Send one of the ports to the HTML page. 555e41f4b71Sopenharmony_ci ArkWeb_ErrorCode code = 556e41f4b71Sopenharmony_ci controller->postWebMessage(webTagValue, "init_web_messageport", g_web_message_port_arr, 1, "*"); 557e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postWebMessage ArkWeb_ErrorCode:%{public}d", code); 558e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 559e41f4b71Sopenharmony_ci "ndk createWebMessagePorts end, web message port size:%{public}d", web_message_port_size); 560e41f4b71Sopenharmony_ci return nullptr; 561e41f4b71Sopenharmony_ci } 562e41f4b71Sopenharmony_ci 563e41f4b71Sopenharmony_ci static napi_value postMessage(napi_env env, napi_callback_info info) { 564e41f4b71Sopenharmony_ci size_t argc = 2; 565e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 566e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 567e41f4b71Sopenharmony_ci 568e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 569e41f4b71Sopenharmony_ci size_t webTagSize = 0; 570e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 571e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 572e41f4b71Sopenharmony_ci size_t webTagLength = 0; 573e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 574e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 575e41f4b71Sopenharmony_ci 576e41f4b71Sopenharmony_ci // Send a message. 577e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage begin"); 578e41f4b71Sopenharmony_ci 579e41f4b71Sopenharmony_ci if (g_web_message_port_arr == nullptr) { 580e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr"); 581e41f4b71Sopenharmony_ci return nullptr; 582e41f4b71Sopenharmony_ci } 583e41f4b71Sopenharmony_ci ArkWeb_WebMessagePtr message = webMessage->createWebMessage(); 584e41f4b71Sopenharmony_ci webMessage->setType(message, ArkWeb_WebMessageType::ARKWEB_STRING); 585e41f4b71Sopenharmony_ci std::string str = "send string from native"; 586e41f4b71Sopenharmony_ci webMessage->setData(message, (void *)str.c_str(), str.length() + 1); 587e41f4b71Sopenharmony_ci ArkWeb_ErrorCode code = webMessagePort->postMessage(g_web_message_port_arr[1], webTagValue, message); 588e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage ArkWeb_ErrorCode:%{public}d", code); 589e41f4b71Sopenharmony_ci webMessage->destroyWebMessage(&message); 590e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage end, web message port size:%{public}d", 591e41f4b71Sopenharmony_ci web_message_port_size); 592e41f4b71Sopenharmony_ci return nullptr; 593e41f4b71Sopenharmony_ci } 594e41f4b71Sopenharmony_ci 595e41f4b71Sopenharmony_ci // Send a message in the thread. 596e41f4b71Sopenharmony_ci void sendMessage(const char *webTag, const ArkWeb_WebMessagePtr message) { 597e41f4b71Sopenharmony_ci // Send the message for 1000 times. 598e41f4b71Sopenharmony_ci for (int i = 0; i < 1000; i++) { 599e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "sendMessage in thread %{public}d", i); 600e41f4b71Sopenharmony_ci if (g_web_message_port_arr && webTag && message) { 601e41f4b71Sopenharmony_ci webMessagePort->postMessage(g_web_message_port_arr[1], webTag, message); 602e41f4b71Sopenharmony_ci } 603e41f4b71Sopenharmony_ci } 604e41f4b71Sopenharmony_ci } 605e41f4b71Sopenharmony_ci static napi_value postMessageThread(napi_env env, napi_callback_info info) { 606e41f4b71Sopenharmony_ci size_t argc = 2; 607e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 608e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 609e41f4b71Sopenharmony_ci 610e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 611e41f4b71Sopenharmony_ci size_t webTagSize = 0; 612e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 613e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 614e41f4b71Sopenharmony_ci size_t webTagLength = 0; 615e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 616e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 617e41f4b71Sopenharmony_ci 618e41f4b71Sopenharmony_ci // Construct a message. 619e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage begin"); 620e41f4b71Sopenharmony_ci 621e41f4b71Sopenharmony_ci if (g_web_message_port_arr == nullptr) { 622e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr"); 623e41f4b71Sopenharmony_ci return nullptr; 624e41f4b71Sopenharmony_ci } 625e41f4b71Sopenharmony_ci ArkWeb_WebMessagePtr message = webMessage->createWebMessage(); 626e41f4b71Sopenharmony_ci webMessage->setType(message, ArkWeb_WebMessageType::ARKWEB_STRING); 627e41f4b71Sopenharmony_ci std::string str = "thread message"; 628e41f4b71Sopenharmony_ci webMessage->setData(message, (void *)str.c_str(), str.length() + 1); 629e41f4b71Sopenharmony_ci const int numThreads = 5; 630e41f4b71Sopenharmony_ci std::thread threads[numThreads]; 631e41f4b71Sopenharmony_ci 632e41f4b71Sopenharmony_ci // Create the threads. 633e41f4b71Sopenharmony_ci for (int i = 0; i < numThreads; ++i) { 634e41f4b71Sopenharmony_ci threads[i] = std::thread(sendMessage, webTagValue, message); 635e41f4b71Sopenharmony_ci } 636e41f4b71Sopenharmony_ci 637e41f4b71Sopenharmony_ci // Wait until all threads are detached. 638e41f4b71Sopenharmony_ci for (int i = 0; i < numThreads; ++i) { 639e41f4b71Sopenharmony_ci threads[i].detach(); 640e41f4b71Sopenharmony_ci } 641e41f4b71Sopenharmony_ci return nullptr; 642e41f4b71Sopenharmony_ci } 643e41f4b71Sopenharmony_ci 644e41f4b71Sopenharmony_ci // Register a callback in the thread. 645e41f4b71Sopenharmony_ci void setHandler(const char *webTag) { 646e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "setMessageEventHandler in thread"); 647e41f4b71Sopenharmony_ci webMessagePort->setMessageEventHandler(g_web_message_port_arr[1], webTag, WebMessagePortCallback, NULL); 648e41f4b71Sopenharmony_ci } 649e41f4b71Sopenharmony_ci 650e41f4b71Sopenharmony_ci static napi_value setMessageEventHandlerThread(napi_env env, napi_callback_info info) { 651e41f4b71Sopenharmony_ci size_t argc = 2; 652e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 653e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 654e41f4b71Sopenharmony_ci 655e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 656e41f4b71Sopenharmony_ci size_t webTagSize = 0; 657e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 658e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 659e41f4b71Sopenharmony_ci size_t webTagLength = 0; 660e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 661e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 662e41f4b71Sopenharmony_ci 663e41f4b71Sopenharmony_ci // Register a callback. 664e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin"); 665e41f4b71Sopenharmony_ci if (g_web_message_port_arr == nullptr) { 666e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr"); 667e41f4b71Sopenharmony_ci return nullptr; 668e41f4b71Sopenharmony_ci } 669e41f4b71Sopenharmony_ci std::thread thread(setHandler, webTagValue); 670e41f4b71Sopenharmony_ci thread.detach(); 671e41f4b71Sopenharmony_ci webMessagePort->setMessageEventHandler(g_web_message_port_arr[1], webTagValue, WebMessagePortCallback, NULL); 672e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 673e41f4b71Sopenharmony_ci "ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size); 674e41f4b71Sopenharmony_ci return nullptr; 675e41f4b71Sopenharmony_ci } 676e41f4b71Sopenharmony_ci static napi_value postNoneMessage(napi_env env, napi_callback_info info) { 677e41f4b71Sopenharmony_ci size_t argc = 2; 678e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 679e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 680e41f4b71Sopenharmony_ci 681e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 682e41f4b71Sopenharmony_ci size_t webTagSize = 0; 683e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 684e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 685e41f4b71Sopenharmony_ci size_t webTagLength = 0; 686e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 687e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 688e41f4b71Sopenharmony_ci 689e41f4b71Sopenharmony_ci // Send a message. 690e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage begin"); 691e41f4b71Sopenharmony_ci 692e41f4b71Sopenharmony_ci if (g_web_message_port_arr == nullptr) { 693e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr"); 694e41f4b71Sopenharmony_ci return nullptr; 695e41f4b71Sopenharmony_ci } 696e41f4b71Sopenharmony_ci ArkWeb_WebMessagePtr message = webMessage->createWebMessage(); 697e41f4b71Sopenharmony_ci webMessage->setType(message, ArkWeb_WebMessageType::ARKWEB_NONE); 698e41f4b71Sopenharmony_ci std::string str = "send string from native"; 699e41f4b71Sopenharmony_ci webMessage->setData(message, (void *)str.c_str(), str.length() + 1); 700e41f4b71Sopenharmony_ci webMessagePort->postMessage(g_web_message_port_arr[1], webTagValue, message); 701e41f4b71Sopenharmony_ci webMessage->destroyWebMessage(&message); 702e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage end, web message port size:%{public}d", 703e41f4b71Sopenharmony_ci web_message_port_size); 704e41f4b71Sopenharmony_ci return nullptr; 705e41f4b71Sopenharmony_ci } 706e41f4b71Sopenharmony_ci 707e41f4b71Sopenharmony_ci static napi_value postBufferMessage(napi_env env, napi_callback_info info) { 708e41f4b71Sopenharmony_ci size_t argc = 2; 709e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 710e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 711e41f4b71Sopenharmony_ci 712e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 713e41f4b71Sopenharmony_ci size_t webTagSize = 0; 714e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 715e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 716e41f4b71Sopenharmony_ci size_t webTagLength = 0; 717e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 718e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 719e41f4b71Sopenharmony_ci 720e41f4b71Sopenharmony_ci // Send a message. 721e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage begin"); 722e41f4b71Sopenharmony_ci 723e41f4b71Sopenharmony_ci if (g_web_message_port_arr == nullptr) { 724e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr"); 725e41f4b71Sopenharmony_ci return nullptr; 726e41f4b71Sopenharmony_ci } 727e41f4b71Sopenharmony_ci ArkWeb_WebMessagePtr message1 = webMessage->createWebMessage(); 728e41f4b71Sopenharmony_ci webMessage->setType(message1, ArkWeb_WebMessageType::ARKWEB_BUFFER); 729e41f4b71Sopenharmony_ci std::string str1 = "send buffer from native"; 730e41f4b71Sopenharmony_ci webMessage->setData(message1, (void *)str1.c_str(), str1.length()); 731e41f4b71Sopenharmony_ci webMessagePort->postMessage(g_web_message_port_arr[1], webTagValue, message1); 732e41f4b71Sopenharmony_ci webMessage->destroyWebMessage(&message1); 733e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage end, web message port size:%{public}d", 734e41f4b71Sopenharmony_ci web_message_port_size); 735e41f4b71Sopenharmony_ci return nullptr; 736e41f4b71Sopenharmony_ci } 737e41f4b71Sopenharmony_ci 738e41f4b71Sopenharmony_ci static napi_value setMessageEventHandler(napi_env env, napi_callback_info info) { 739e41f4b71Sopenharmony_ci size_t argc = 2; 740e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 741e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 742e41f4b71Sopenharmony_ci 743e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 744e41f4b71Sopenharmony_ci size_t webTagSize = 0; 745e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 746e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 747e41f4b71Sopenharmony_ci size_t webTagLength = 0; 748e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 749e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 750e41f4b71Sopenharmony_ci 751e41f4b71Sopenharmony_ci // Register a callback. 752e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin"); 753e41f4b71Sopenharmony_ci if (g_web_message_port_arr == nullptr) { 754e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr"); 755e41f4b71Sopenharmony_ci return nullptr; 756e41f4b71Sopenharmony_ci } 757e41f4b71Sopenharmony_ci webMessagePort->setMessageEventHandler(g_web_message_port_arr[1], webTagValue, WebMessagePortCallback, NULL); 758e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 759e41f4b71Sopenharmony_ci "ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size); 760e41f4b71Sopenharmony_ci return nullptr; 761e41f4b71Sopenharmony_ci } 762e41f4b71Sopenharmony_ci 763e41f4b71Sopenharmony_ci static napi_value closeMessagePort(napi_env env, napi_callback_info info) { 764e41f4b71Sopenharmony_ci size_t argc = 2; 765e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 766e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 767e41f4b71Sopenharmony_ci 768e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 769e41f4b71Sopenharmony_ci size_t webTagSize = 0; 770e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 771e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 772e41f4b71Sopenharmony_ci size_t webTagLength = 0; 773e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 774e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 775e41f4b71Sopenharmony_ci 776e41f4b71Sopenharmony_ci // Disable the port by calling close() and then destroyWebMessagePorts(). 777e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin"); 778e41f4b71Sopenharmony_ci if (g_web_message_port_arr == nullptr) { 779e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr"); 780e41f4b71Sopenharmony_ci return nullptr; 781e41f4b71Sopenharmony_ci } 782e41f4b71Sopenharmony_ci webMessagePort->close(g_web_message_port_arr[0], webTagValue); 783e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 784e41f4b71Sopenharmony_ci "ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size); 785e41f4b71Sopenharmony_ci controller->refresh(webTagValue); 786e41f4b71Sopenharmony_ci return nullptr; 787e41f4b71Sopenharmony_ci } 788e41f4b71Sopenharmony_ci 789e41f4b71Sopenharmony_ci static napi_value destroyMessagePort(napi_env env, napi_callback_info info) { 790e41f4b71Sopenharmony_ci size_t argc = 2; 791e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 792e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 793e41f4b71Sopenharmony_ci 794e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 795e41f4b71Sopenharmony_ci size_t webTagSize = 0; 796e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 797e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 798e41f4b71Sopenharmony_ci size_t webTagLength = 0; 799e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 800e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 801e41f4b71Sopenharmony_ci 802e41f4b71Sopenharmony_ci // Release the memory by calling close() and then destroyWebMessagePorts(). 803e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin"); 804e41f4b71Sopenharmony_ci if (g_web_message_port_arr == nullptr) { 805e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr"); 806e41f4b71Sopenharmony_ci return nullptr; 807e41f4b71Sopenharmony_ci } 808e41f4b71Sopenharmony_ci controller->destroyWebMessagePorts(&g_web_message_port_arr, web_message_port_size); 809e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 810e41f4b71Sopenharmony_ci "ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size); 811e41f4b71Sopenharmony_ci return nullptr; 812e41f4b71Sopenharmony_ci } 813e41f4b71Sopenharmony_ci 814e41f4b71Sopenharmony_ci static napi_value destroyNullMessagePort(napi_env env, napi_callback_info info) { 815e41f4b71Sopenharmony_ci size_t argc = 2; 816e41f4b71Sopenharmony_ci napi_value args[2] = {nullptr}; 817e41f4b71Sopenharmony_ci napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 818e41f4b71Sopenharmony_ci 819e41f4b71Sopenharmony_ci // Obtain the first parameter webTag. 820e41f4b71Sopenharmony_ci size_t webTagSize = 0; 821e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize); 822e41f4b71Sopenharmony_ci char *webTagValue = new (std::nothrow) char[webTagSize + 1]; 823e41f4b71Sopenharmony_ci size_t webTagLength = 0; 824e41f4b71Sopenharmony_ci napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength); 825e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue); 826e41f4b71Sopenharmony_ci 827e41f4b71Sopenharmony_ci // Release the memory by calling close() and then destroyWebMessagePorts(). 828e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin"); 829e41f4b71Sopenharmony_ci 830e41f4b71Sopenharmony_ci controller->destroyWebMessagePorts(&g_web_message_port_arr, web_message_port_size); 831e41f4b71Sopenharmony_ci 832e41f4b71Sopenharmony_ci OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", 833e41f4b71Sopenharmony_ci "ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size); 834e41f4b71Sopenharmony_ci return nullptr; 835e41f4b71Sopenharmony_ci } 836e41f4b71Sopenharmony_ci 837e41f4b71Sopenharmony_ci EXTERN_C_START 838e41f4b71Sopenharmony_ci static napi_value Init(napi_env env, napi_value exports) { 839e41f4b71Sopenharmony_ci napi_property_descriptor desc[] = { 840e41f4b71Sopenharmony_ci {"nativeWebInit", nullptr, NativeWebInit, nullptr, nullptr, nullptr, napi_default, nullptr}, 841e41f4b71Sopenharmony_ci {"createWebMessagePorts", nullptr, createWebMessagePorts, nullptr, nullptr, nullptr, napi_default, nullptr}, 842e41f4b71Sopenharmony_ci {"postMessage", nullptr, postMessage, nullptr, nullptr, nullptr, napi_default, nullptr}, 843e41f4b71Sopenharmony_ci {"postNoneMessage", nullptr, postNoneMessage, nullptr, nullptr, nullptr, napi_default, nullptr}, 844e41f4b71Sopenharmony_ci {"postBufferMessage", nullptr, postBufferMessage, nullptr, nullptr, nullptr, napi_default, nullptr}, 845e41f4b71Sopenharmony_ci {"setMessageEventHandler", nullptr, setMessageEventHandler, nullptr, nullptr, nullptr, napi_default, nullptr}, 846e41f4b71Sopenharmony_ci {"closeMessagePort", nullptr, closeMessagePort, nullptr, nullptr, nullptr, napi_default, nullptr}, 847e41f4b71Sopenharmony_ci {"destroyMessagePort", nullptr, destroyMessagePort, nullptr, nullptr, nullptr, napi_default, nullptr}, 848e41f4b71Sopenharmony_ci {"postMessageThread", nullptr, postMessageThread, nullptr, nullptr, nullptr, napi_default, nullptr}, 849e41f4b71Sopenharmony_ci {"setMessageEventHandlerThread", nullptr, setMessageEventHandlerThread, nullptr, nullptr, nullptr, napi_default, 850e41f4b71Sopenharmony_ci nullptr}, 851e41f4b71Sopenharmony_ci {"destroyNullMessagePort", nullptr, destroyNullMessagePort, nullptr, nullptr, nullptr, napi_default, nullptr}, 852e41f4b71Sopenharmony_ci }; 853e41f4b71Sopenharmony_ci napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc); 854e41f4b71Sopenharmony_ci return exports; 855e41f4b71Sopenharmony_ci } 856e41f4b71Sopenharmony_ci EXTERN_C_END 857e41f4b71Sopenharmony_ci 858e41f4b71Sopenharmony_ci static napi_module demoModule = { 859e41f4b71Sopenharmony_ci .nm_version = 1, 860e41f4b71Sopenharmony_ci .nm_flags = 0, 861e41f4b71Sopenharmony_ci .nm_filename = nullptr, 862e41f4b71Sopenharmony_ci .nm_register_func = Init, 863e41f4b71Sopenharmony_ci .nm_modname = "entry", 864e41f4b71Sopenharmony_ci .nm_priv = ((void *)0), 865e41f4b71Sopenharmony_ci .reserved = {0}, 866e41f4b71Sopenharmony_ci }; 867e41f4b71Sopenharmony_ci 868e41f4b71Sopenharmony_ci extern "C" __attribute__((constructor)) void RegisterEntryModule(void) { napi_module_register(&demoModule); } 869e41f4b71Sopenharmony_ci ``` 870e41f4b71Sopenharmony_ci 871e41f4b71Sopenharmony_ci<!--no_check-->