This exercise will demonstrate how to setup a basic receiver to receive the JSON message (stored as a file within IndexedDB from the previous page) peer-to-peer. Enter the same Room Identifier used for the transmitter and also enter a Local Peer Identifier for the receiver. Also, enter the Remote Peer Identifier and the Remote File Identifier which must match the Local Peer Identifier and the Local File Identifier on the transmitter, respectively. Enter the password for the receiver which must match the transmitter password. Next, click the button 'Register Receiver' - which similarly registers the receiver on the signalling server. Then click 'Load Stream' to connect (or subscribe) the receiver to the transmitter stream. Lastly, clicking 'Get File' should fetch the persisted file from IndexedDB on the transmitter side and store it into IndexedDB on the receiver side. Additionally, the original JSON message should be displayed inside the textarea.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Pull Receiver</title> <!-- Set the page title -->
<meta name = "robots" content = "noindex, follow">
</head>
<body>
<!-- Add the UI elements to the page -->
<div>
<textarea id = "text-area-1" rows = "5" cols = "35" placeholder = "Json message"></textarea>
</div>
<div style = "margin-top: 7px;">
<input id = "input-1" size = "35" type = "text" placeholder = "Room Identifier (ID)">
</div>
<div style = "margin-top: 7px;">
<input id = "input-2" size = "35" type = "text" placeholder = "Local Peer Identifier (ID)">
</div>
<div style = "margin-top: 14px;">
<input id = "input-3" size = "35" type = "text" placeholder = "Remote Peer Identifier (ID)">
</div>
<div style = "margin-top: 7px;">
<input id = "input-4" size = "35" type = "text" placeholder = "Remote File Identifier (ID)">
</div>
<div style = "margin-top: 14px;">
<input id = "input-5" size = "35" type = "text" placeholder = "Receiver Password">
</div>
<div style = "margin-top: 20px;">
<button id = "button-1">Register Receiver</button>
<button id = "button-2">Load Stream</button>
<button id = "button-3">Get File</button>
</div>
<!-- Include the framework script tag -->
<script type = "module" src = "https://www.javaika.com/frame/web-stream@main/api.js"></script>
<script type = "module" src = "https://www.javaika.com/frame/web-persist@main/api.js"></script>
<!-- Run the demo as an ES Module -->
<script type = "module">
const textArea1 = document.getElementById('text-area-1');
const input1 = document.getElementById('input-1');
const input2 = document.getElementById('input-2');
const input3 = document.getElementById('input-3');
const input4 = document.getElementById('input-4');
const input5 = document.getElementById('input-5');
const button1 = document.getElementById('button-1');
const button2 = document.getElementById('button-2');
const button3 = document.getElementById('button-3');
// Initialize a shorter prefix for referencing.
const jws = window.javaika.webStream;
const jwp = window.javaika.webPersist;
// Initialize the developer token endpoint.
jws.init({
tokenEndpoint: "https://www.javaika.com/pscript/jwt-access.php"
});
// Authenticate before using the framework.
jws.requestToken({
framework: "web_stream" // Specify the framework for token issuance.
});
// Listener for button click event.
button1.addEventListener('click', () => {
jws.realtimeReceiver.registerReceiver
(
input1.value, input2.value, [input5.value] // Parse the credentials.
);
});
// Listener for button click event.
button2.addEventListener('click', () => {
jws.realtimeReceiver.loadStream(input3.value);
});
// Listener for button click event.
button3.addEventListener('click', () => {
jws.realtimeReceiver.getFile(input3.value, input4.value);
});
// Authenticate callback handler.
function onAuthenticate(event)
{
jws.refreshToken(); // Refresh the authentication token.
console.log('[Web Stream] Authentication received callback:', event);
}
// Initialized callback handler.
function onInitialized(event)
{
console.log('[Web Stream] Framework initialized callback:', event);
}
// File record stored callback handler.
async function onFileRecordStored(event)
{
const file = event.detail.file; const text = await file.text();
textArea1.value = JSON.stringify(JSON.parse(text), null, 2);
console.log('[Web Persist] File record stored callback:', event);
}
// File received callback handler.
function onFileReceived(event)
{
const key = event.detail.key; const file = event.detail.file;
const options = {
'storeName': 'web-stream', 'source': 'remote'
};
jwp.storeFileRecord(key, file, options);
console.log('[Web Stream] File received callback:', event);
}
// Stream loaded callback handler.
function onStreamLoaded(event)
{
console.log('[Web Stream] Stream loaded callback:', event);
}
// Receiver registered callback handler.
function onReceiverRegistered(event)
{
console.log('[Web Stream] Receiver registered callback:', event);
}
// Callback event after authenticate.
document.addEventListener
(
'javaika.webStream.authenticate', onAuthenticate
);
// Callback event after initialized.
document.addEventListener
(
'javaika.webStream.initialized', onInitialized
);
// Callback event after file record stored.
document.addEventListener
(
'javaika.webPersist.fileRecordStored', onFileRecordStored
);
// Callback event after file received.
document.addEventListener
(
'javaika.webStream.realtimeReceiver.fileReceived', onFileReceived
);
// Callback event after stream loaded.
document.addEventListener
(
'javaika.webStream.realtimeReceiver.streamLoaded', onStreamLoaded
);
// Callback event after receiver registered.
document.addEventListener
(
'javaika.webStream.realtimeReceiver.receiverRegistered', onReceiverRegistered
);
</script>
</body>
</html>