Series Links
Beginner Friendly WEB RTC Tutorial
Creating a Data Transfer Application Part 1 (Advanced)
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.
Creating the WebRTC Data Transfer HTML Page Structure
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.
WebRTC Data Transfer Script
- Line 35 - The script prompts the user to enter their name using prompt('Enter your name:').
- Line 38 - 41 - If the user doesn't provide a name, an alert is shown, and the page is reloaded. This works exactly like in the texting application we created earlier.
- Line 44 - The “initWebSocket” function is created to establish a WebSocket connection to the server. We are creating it just like in the previous texting code by specifying the IP address of the nodeJS server and the port number.
- Line 46 - A WebSocket object (ws) is created, and event handlers for onopen, onmessage, and onclose are defined. The user's name is sent to the server after the WebSocket connection is opened.
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.
- The onopen event handler logs the successful WebSocket connection. The name of the user is sent to the peer.
- The onmessage event handler parses incoming JSON messages. If the message contains a peer's name (data.name), it is stored in the peer variable. This time we alert the other user that the peer has connected. If the message contains file-related data, the displayFile function is called to handle it. Its job will be to print a link to the screen that will allow a user to download the sent file.
- The onclose event handler logs the WebSocket connection closure.
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>