Game Iframe File Example
In order to get the JWT token from the parent website ( bananaclip.io ) use these functions in your main game html file :
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Game iframe file example</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<!-- Adding SockJS and STOMP CDN links -->
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" tabindex="-1"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo" style="display: none;"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning" style="display: none;"></div>
</div>
<script>
const pendingRequests = new Map();
// Utility function to generate a GUID
function generateGUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = (Math.random() * 16) | 0;
const v = c === 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
}
function requestGetMessage(type, functionToInvoke) {
return new Promise((resolve, reject) => {
const requestId = generateGUID(); // Generate a unique identifier for the request
// Store the resolver and function in the map
pendingRequests.set(requestId, { resolve, functionToInvoke });
// Send the request to the parent window with the requestId
window.parent.postMessage({ type: type, requestId }, '*');
// Timeout to reject the promise if no response is received
setTimeout(() => {
if (pendingRequests.has(requestId)) {
pendingRequests.delete(requestId);
reject(new Error(`Request for type "${type}" timed out`));
}
}, 5000); // 5 seconds timeout
});
}
// Event listener to handle messages from the parent window
window.addEventListener('message', (event) => {
const data = event.data;
// Handle localStorage response
if (data.type && data.requestId) {
const requestEntry = pendingRequests.get(data.requestId);
if (requestEntry) {
const { resolve, functionToInvoke } = requestEntry;
// Invoke the stored function, if provided
if (typeof functionToInvoke === 'function') {
try {
functionToInvoke(data.value);
} catch (err) {
console.error('Error while invoking callback function:', err);
}
}
// Resolve the promise with the value
resolve(data.value);
// Clean up the map
pendingRequests.delete(data.requestId);
}
}
});
// requestGetMessage('getAccessToken').then(token => {
// console.log('Received Access Token:', token);
// }).catch(err => console.error(err));
// requestGetMessage('getRoomId').then(roomId => {
// console.log('Received Room ID:', roomId);
// }).catch(err => console.error(err));
</script>
</body>
</html>Last updated