https://github.com/unyt-org/example-window-communication

A example project to showcase direct window / iframe communication via DATEX
https://github.com/unyt-org/example-window-communication

datex datex-example post-message uix uix-example unyt unyt-org window-communication

Last synced: about 2 months ago
JSON representation

A example project to showcase direct window / iframe communication via DATEX

• Host: GitHub
• URL: https://github.com/unyt-org/example-window-communication
• Owner: unyt-org
• License: mit
• Created: 2024-04-08T11:07:52.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-10-16T17:04:13.000Z (3 months ago)
• Last Synced: 2024-10-18T08:53:41.779Z (3 months ago)
• Topics: datex, datex-example, post-message, uix, uix-example, unyt, unyt-org, window-communication
• Language: TypeScript
• Homepage:
• Size: 14.6 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Example: Window communication

This repository provides a simple setup to showcase a bidirectional communication interface between your app and a popup window.

*[UIX Docs](https://docs.unyt.org/manual/datex/communication-interfaces#window)*

The DATEX API to open a window (page, popup or tab) is similar to the [window.open](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) API with the difference that it is asynchronously and returns an object of the remote endpoint (the endpoint of the window) and the actual [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) containing the DOM document.

```ts

import { WindowInterface } from "datex-core-legacy/network/communication-interfaces/window-interface.ts";

const { endpoint, window } = await WindowInterface.createWindow(

	"https://popup.com",   // URL of our window

	"MyWindow",            // Target specifying the name of the context

	`popup=yes`            // Window feature list

);

```

The DATEX app on the window site can connect to the parent site by creating a parentWindow:

```ts

const parentInterface = WindowInterface.createParentInterface(

	globalThis.opener,  // Parent window instance (app)

	"https://myapp.com" // URL of the parent window (app)

);

// The connection event is fired if we got a response from the app

parentInterface.addEventListener("connect", (event) => {

	// connection is established

	// event.endpoint gives us the endpoint of the app

});

```

When the `createWindow` call of the app did resolve, all DATEX traffic of the app directed to the [endpoint](https://docs.unyt.org/manual/datex/endpoints) of the window is directly routed via [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) API.

---

© unyt 2024 • [unyt.org](https://unyt.org)