Send a message to a backend file via frontend HTML component

Ask the community
1

I need to send a message to a backend file via frontend HTML component. How to achieve this?

The thing is I need to send a message(json) format to a API that is configured in a backend web.js file

2

Hi, Guru_Lokesh !!

I have quoted an example of how to use postMessage() from the Wix official reference. I have marked important sections with comments saying ‘important !!!’ so please refer to them. :raised_hands:

/* * * * * * * * * * * * * * * * * * * * * * * * *
 * Paste the following into the HTML Component:  *
 * * * * * * * * * * * * * * * * * * * * * * * * *

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
  sendReturnMessage("Message from the HTML Component!");
}

// send message to the page code
function sendReturnMessage(msg) {
  window.parent.postMessage(msg, "http://mysite.com"); // important !!!
}
</script>

</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>

 * * * * * * * * * * * * * * * * * * * * * * * * *
 * This is the page code:                        *
 * * * * * * * * * * * * * * * * * * * * * * * * */

$w.onReady(function () {
  // when a message is received from the HTML Component
  $w("#myHtmlComponent").onMessage((event) => {  // important !!!
    someBackendFunc(event); // important !!! (Please extract the contents of the received event yourself and pass them to the backend function)
    console.log(`Message received by page code: ${event.data}`);
  });
});

https://dev.wix.com/docs/velo/api-reference/$w/html-component/post-message

3

I noticed that I can send the message from my html component to the masterpage.js but when I am checking both developer and browser console. The thing is that even simple backend function is not getting called from the masterpage.js

The below is the code from masterpage.js

import { testBackendFunction } from "backend/vbotproxy.web";

$w.onReady(() => {
    testBackendFunction()
        .then((response) => {
            console.log("Test Backend Response:", response);
        })
        .catch((error) => {
            console.error("Error calling test backend function:", error);
        });
});

And this is the backend code , the file name is vbotproxy.web.js located in the “Backend”:

import { fetch } from 'wix-fetch'; 
export async function testBackendFunction(userMessage) {
    console.log("Test message received in backend:", userMessage);
    return "Fixed test response";
}

When I preview the site with the above codes, I am getting the below error in the wix dev console:

TypeError: (0 , backend_vbotproxy_web__WEBPACK_IMPORTED_MODULE_0__.testBackendFunction) is not a function```

Not sure what is wrong here. Can you please advise here?
5

Please take a look at this line and try to fix it. :wink: :raised_hands:

import { fetch } from 'wix-fetch'; 
export async function testBackendFunction(userMessage) {
    console.log("Test message received in backend:", userMessage);
    return "Fixed test response";
}

↓

import { fetch } from 'wix-fetch'; 
import { Permissions, webMethod } from "wix-web-module";

export const testBackendFunction = webMethod(
    Permissions.Anyone,
    (userMessage) => {
        console.log("Test message received in backend:", userMessage);
        return "Fixed test response";
    }
);