This exercise will demonstrate how to setup a basic transmitter which will send JSON files to a receiver.
Enter any value for the Room Identifier, Local Peer Identifier, Local File Identifier, and the Remote Peer
Identifier. After you have entered IDs for each of these, enter a password for the transmitter which must
be at least 14 characters in length. Click the button 'Register Transmitter'; this will register the
transmitter on the signalling server. Also click the button 'Store JSON'; this will store the
JSON message (displayed in the textarea) into IndexedDB as a file on the transmitter side.
Before we click 'Send File' (which fetches the file from IndexedDB and sends the file to the receiver),
we need to setup our receiver in the next section.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Push Transmitter</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 = "Local File Identifier (ID)">
</div>
<div style = "margin-top: 7px;">
<input id = "input-4" size = "35" type = "text" placeholder = "Remote Peer Identifier (ID)">
</div>
<div style = "margin-top: 14px;">
<input id = "input-5" size = "35" type = "text" placeholder = "Transmitter Password">
</div>
<div style = "margin-top: 20px;">
<button id = "button-1">Register Transmitter</button>
<button id = "button-2">Store JSON</button>
<button id = "button-3">Send 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 textarea and input values.
const defaultJsonObject = {message: "Hello world", type: "demo"};
textArea1.value = JSON.stringify(defaultJsonObject, null, 2);
// 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.realtimeTransmitter.registerTransmitter
(
input1.value, input2.value, input5.value // Parse the credentials.
);
});
// Listener for button click event.
button2.addEventListener('click', () => {
const key = {
'roomId': input1.value, 'peerId': input2.value, 'fileId': input3.value
};
const options = {
'storeName': 'web-stream', 'source': 'local'
};
jwp.storeJsonRecord(key, JSON.parse(textArea1.value), options);
});
// Listener for button click event.
button3.addEventListener('click', () => {
const key = {
'roomId': input1.value, 'peerId': input2.value, 'fileId': input3.value
};
const remoteId = input4.value;
const options = {
'storeName': 'web-stream', 'remoteId': remoteId
};
jwp.fetchFileRecord(key, options);
});
// 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);
}
// Json record stored callback handler.
function onJsonRecordStored(event)
{
console.log('[Web Persist] Json record stored callback:', event);
}
// File record fetched callback handler.
function onFileRecordFetched(event)
{
const key = event.detail.key; const file = event.detail.file;
const remoteId = event.detail.options.remoteId; // Remote id.
jws.realtimeTransmitter.sendFile(key, file, remoteId);
console.log('[Web Persist] File record fetched callback:', event);
}
// Stream loaded callback handler.
function onStreamLoaded(event)
{
console.log('[Web Stream] Stream loaded callback:', event);
}
// Transmitter registered callback handler.
function onTransmitterRegistered(event)
{
console.log('[Web Stream] Transmitter 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 json record stored.
document.addEventListener
(
'javaika.webPersist.jsonRecordStored', onJsonRecordStored
);
// Callback event after file record fetched.
document.addEventListener
(
'javaika.webPersist.fileRecordFetched', onFileRecordFetched
);
// Callback event after stream loaded.
document.addEventListener
(
'javaika.webStream.realtimeTransmitter.streamLoaded', onStreamLoaded
);
// Callback event after transmitter registered.
document.addEventListener
(
'javaika.webStream.realtimeTransmitter.transmitterRegistered', onTransmitterRegistered
);
</script>
</body>
</html>
Next capability: Discuss how receivers can receive files from push transmitters.