Here we will create an HTML document named data.php that will be used to send files of any file type to another user. The page will simply have a file selection input and a submit button. It will work with the concepts that we have already established so far. Make sure that the node server.js is running when running the tests.
The HTML document structure is defined, including the div with the ID of “chatBox” which will be used to show the link for the file sent , “fileInput” which is an input type meant to collect a file from the machine, and the "Send File" button to invoke the function that transmits the file to the peer. For now, we can create the script to have placeholder function names that will be used for the actual functionality.
To work with the WebSocket, I am using 3 main methods which include the "onopen", "onmessage" and "onclose". All of these three should be created inside the initWebSocket() function just as before.
We will need function for displaying the sent file or rather, to display a link to download the sent file, a function for actually sending the file and a function for converting arrayBuffer data to Base64.
Lastly, a function to convert Base64 data to Blob type. We can then call the initWebSocket() function at the end. .
The whole data.php document should look as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTC File Transfer Example</title>
<style>
#chatBox {
width: 300px;
margin: 20px;
}
#fileInput {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>WebRTC File Transfer Example</h1>
<div id="chatBox"></div>
<input type="file" id="fileInput">
<button onclick="sendFile()">Send File</button>
<script>
// Get references to HTML elements
const chatBox = document.getElementById('chatBox');
const fileInput = document.getElementById('fileInput');
// WebSocket and peer variables
let ws;
let peer;
// Prompt user for their name
const userName = prompt('Enter your name:');
// Reload the page if the user does not enter a name
if (!userName) {
alert('Please enter a name.');
window.location.reload();
}
// Initialize WebSocket connection
function initWebSocket() {
// Create a WebSocket connection to the specified server
ws = new WebSocket('ws://192.168.43.141:3000');
// Event handler when WebSocket connection is opened
ws.onopen = () => {
};
// Event handler for incoming WebSocket messages
ws.onmessage = async (event) => {
};
// Event handler when WebSocket connection is closed
ws.onclose = () => {
};
}
// Function to display a file in the chat box
function displayFile(fileData, sender, fileType) {
}
// Function to send a file
function sendFile() {
}
// Function to convert an ArrayBuffer to Base64 in chunks
function arrayBufferToBase64(buffer) {
}
// Function to convert Base64 data to a Blob
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
}
// Initialize the WebSocket connection when the page loads
initWebSocket();
</script>
</body>
</html>