Channel messaging demo

31:T482,The Godot Engine allows you to export your game to the web. It can use a [JavaScript Object](https://docs.godotengine.org/en/latest/classes/class_javascript.html) to communicate with its parent page, and thusly to communicate with other pages via [PostMessage](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API). The Godot Engine demo was generated by [Godot 3.4 Stable](https://godotengine.org/article/godot-3-4-is-released) and [exported](https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_projects.html) to HTML. It's hosted on [NeoCities](https://triptych.neocities.org/godot_iframe_test001/index.html) Where you can try out a lot of other JavaScript integration demos like updating the view from a `prompt()` etc. The idea is simple: Create a message channel between the parent frame ( this page ) and the child frame on Geocities. Then pass a message from here to the child frame and then into the Godot Engine demo. Then - as a response - the Godot demo sends a message back through the same channel to the parent page. You could use this to control a complex Godot visualization via Observable!32:[] 2f:{"title":"Godot Game <-> Browser Page Communication","cells":[{"id":0,"value":"# Godot Game <-> Browser Page Communication","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"How to test:\n* wait for Godot Demo to fully load.\n* click the `Click to post message` button.\n* Look at the `From Parent` field in the Godot demo -> shows the message you typed in Observable!\n* Note this only works *once* right now. Reload to see it again.","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"**Sample output files and Godot Source Code provided in attachments in this notebook-->** \n\nGithub link is below.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"foo = html`\n\n\n \n \n \n \n Channel messaging demo\n \n \n \n \n

Channel messaging demo Observable <-> Godot in Iframe

Message back from Godot: wait for godot to finish loading...

\n \n
\n \n \n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"{\n foo.querySelector(\"#postIt\").addEventListener(\"click\", (e)=>{\n console.log(\"clicked post message\")\n onLoad(e)\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"function onMessage(e) {\n var output = foo.querySelector('.output');\n output.innerHTML = e.data;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"channel = new MessageChannel();","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":" function onLoad() {\n var iframe = foo.querySelector('iframe');\n console.log(iframe)\n console.log(\"onload called\")\n // Listen for messages on port1\n channel.port1.onmessage = onMessage;\n // Transfer port2 to the iframe\n iframe.contentWindow.postMessage(\"Hello from Observable!\", '*', [channel.port2]);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"## Godot GDScript source","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"embed(embedcode)","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"embedcode=``","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"## References\n* https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API\n* https://godotengine.org/article/godot-web-progress-report-9 ( for understanding how to call into Godot from JS)\n* Git Source for Godot project: https://github.com/triptych/GodotTestingJavaScriptObject","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"import { embed } from \"@jerryjappinen/embed\"\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}