How to send/receive a message using js

Questions about Thunkable
1

Hi all.
Hope you all are having a great Day!

I am Working on a project that connects to my website.

I want to send a message from My web app.
And receive a message in My web app.

However When i search the Community/Google.
I can’t find any Working answer.

Can you Guys show me An example of the codes needed to send messages to my app and receive Them in My web app?

Thank You

Cheers
Luke

1 Like
2

Hi Luke,

You might have heard of this but just to confirm.

An example of the code goes as such.
Send Message to Website

image
image856×204 18.9 KB

Receive Message on Website

ThunkableWebviewerExtension.receiveMessage(function(message) {
  // Do something with your message
  alert(message)
});

Send a Message From Your Website to Thunkable

image
image792×196 18.5 KB

Receive Message from Website

ThunkableWebviewerExtension.postMessage('hello world');

Happy Coding,

Jay

2 Likes
3

I explained here how to use the web viewer block to send data to .html file and receive data from .html file.

4

Thanks @jaythemanchs that helps out a lot.

I didn’t see that one.

1 Like
5

Hi all.
I’ve just added the post message code to my web app with this code:
ThunkableWebviewerExtension.postMessage(xmlText);
but nothing happens:
blocks:
Screenshot 2021-06-25 4.45.44 PM

1 Like
6

Have you added the Thunkable library?
Have you tested your html/js code that is runs and the xmlText actually has a value?

7

Yes

8

Did you check the Dev Tools and notices no errors?

image

9

i am looking into it.

10

it does throw some errors.
i am looking into the Google community seem to be not t he only one with this error.
Here is the error:

Uncaught ReferenceError: ThunkableWebviewerExtension is not defined
    at dGkXWjzwOBzA:519
1 Like
11

Can you start with a vanilla setup.

<!DOCTYPE html>
<html>
<head>
<script 
    src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
    type="text/javascript">
</script>
</head>

<script>
    const textData = "This is from my page";
    ThunkableWebviewerExtension.postMessage(textData);
});
</script>
</html>

See if this works then you know it is not the extension. If you save if to .html file and call it from your web viewer it should give you the result in the receive message event.

12

Hi @muneer the console doesn’t show a error anymore.

Had to change a Line of code.
However i am not sure CodePen is having server issues at the moment :frowning:
And can’t debug Because of this.

Anyways Thanks for helping

1 Like
13

Hi @muneer i got this error message in console while debugging:

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': HTMLUnknownElement object could not be cloned.
    at Object.postMessageToWebview [as postMessage] (https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js:6:21)
    at HTMLDocument.<anonymous> (https://cdpn.io/lukeplays33/debug/eYvJBEa/WPALYROwJVwk:532:33)
    at n (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14784)
    at Object.fireWith (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:15553)
    at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:9773)
    at HTMLDocument.B (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14348)
1 Like
14

This means you are declaring the Thunkable library in a wrong section of the .html file or it could not be parsed to the file.

Can you try my earlier suggestion of the vanilla file.

2 Likes
15

doesn’t work either :frowning:

1 Like
16

When you copy anything from the community posts, check the quotation marks, the community app converts them to accented marks while development environments expects simple quotations.

This could be a reason that prevents your .html file from being processed correctly.

17

Hi @muneer
Thank you so much with helping.
Managed to make it work.
Thanks a lot!!

1 Like
19

Hi
Good Luck on your project :100:

1 Like
20

Thank you mam