@uipath/apps-communication-driver
Advanced tools
A lightweight and secure communication library for cross-window messaging between parent windows and iframes.
A lightweight and secure communication library for cross-window messaging between parent windows and iframes.
npm install @uipath/apps-communication-driver
# or
yarn add @uipath/apps-communication-driver
Here's how to integrate the communication-driver in your parent window:
import { handshake } from '@uipath/apps-communication-driver;
// Create an iframe element
const iframe = document.createElement('iframe');
iframe.src = 'https://your-child-origin.com';
document.body.appendChild(iframe);
// Initialize communication
const { channel } = await handshake({
targetOrigin: 'https://your-child-origin.com',
iframe: iframe,
timeout: 10000 // Optional: Set a custom timeout in milliseconds (default: 5000ms)
});
// Listen for messages from the child
channel.on('someEvent', (data) => {
console.log('Received from child:', data);
});
// Send messages to the child
channel.send('someEvent', { message: 'Hello from parent!' });
Here's a complete example of a parent window implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
</head>
<body>
<h1>Parent Window</h1>
<div style="display: flex; gap: 16px; margin-bottom: 16px;">
<input type="text" id="messageInput" placeholder="Enter your message">
<input type="text" id="eventName" placeholder="Enter event name">
<button onclick="sendMessage()">Submit</button>
</div>
<iframe id="app-frame"
src="https://your-child-origin.com"
width="100%" height="800">
</iframe>
<script>
var channel;
function sendMessage() {
const messageInput = document.getElementById('messageInput');
const eventName = document.getElementById('eventName').value;
const message = messageInput.value;
if (message.trim()) {
channel.send(`${eventName}`, { message });
messageInput.value = '';
}
}
</script>
<script type="module">
import { handshake } from './driver.js';
try {
const iframe = document.getElementById("app-frame");
const { channel: localChannel } = await handshake({
targetOrigin: "https://your-child-origin.com",
iframe,
targetWindow: iframe.contentWindow,
timeout: 10000 // Optional: Set a custom timeout in milliseconds
});
channel = localChannel;
// Listen for messages from the child
channel.on("EVENT_FROM_APP", (data) => {
console.log("Received from App:", data);
});
} catch (error) {
console.error('Communication error:', error);
}
</script>
</body>
</html>
This example demonstrates:
In your child window or iframe:
import { handshake } from '@uipath/apps-communication-driver';
// Initialize communication with parent
const { channel } = await handshake({
targetOrigin: 'https://your-parent-origin.com',
timeout: 10000 // Optional: Set a custom timeout in milliseconds
});
// Listen for messages from the parent
channel.on('someEvent', (data) => {
console.log('Received from parent:', data);
});
// Send messages to the parent
channel.send('someEvent', { message: 'Hello from parent!' });
interface HandshakeOptions {
targetOrigin: string; // The expected origin for messages
targetWindow?: Window; // The window to communicate with (optional)
iframe?: HTMLIFrameElement; // Optional iframe instance for communication
timeout?: number; // Optional timeout in milliseconds (default: 5000ms)
}
interface Channel {
send: (event: string, data: any) => void;
on: (event: string, callback: (data: any) => void) => void;
}
targetOrigin to ensure messages are only accepted from trusted sourcesError Handling: Always wrap the handshake in a try-catch block:
try {
const { channel } = await handshake({
targetOrigin: 'https://your-child-origin.com',
iframe: iframe,
timeout: 10000 // Set an appropriate timeout for your use case
});
} catch (error) {
console.error('Failed to establish communication:', error);
// Handle timeout errors specifically
if (error.message.includes('timed out')) {
console.error('Handshake timed out. The other party did not respond in time.');
}
}
Event Naming: Use consistent and descriptive event names across your application
Data Validation: Validate data received through the channel before processing
Cleanup: Remove event listeners when they're no longer needed:
channel.on('someEvent', null); // Remove the listener
Timeout Configuration: Set an appropriate timeout value based on your application's needs:
The library uses the standard postMessage API and is supported in all modern browsers:
MIT
FAQs
A lightweight and secure communication library for cross-window messaging between parent windows and iframes.
The npm package @uipath/apps-communication-driver receives a total of 14 weekly downloads. As such, @uipath/apps-communication-driver popularity was classified as not popular.
We found that @uipath/apps-communication-driver demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 19 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A new federal program will let vetted U.S. cybersecurity firms help investigate and disrupt foreign cybercrime groups under government direction.
Research
/Security News
The campaign amassed more than 75,000 installs by targeting Russian-speaking users seeking access to blocked services.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.