Developing the interface for the quantum cryptography simulation
Following the setup of the backend server here, I focused on creating the user interface for the quantum cryptography simulator. This frontend allows users to interact with the simulation, sending messages and observing the effects of different cryptographic protocols and eavesdropping attempts.
Interface structure with HTML and Bootstrap
I used standard HTML to structure the web page. The layout is organized using Bootstrap 5’s grid system (row, col) to create distinct sections for Alice, Bob, and Eve. Each section contains input fields and buttons relevant to their roles in the simulation.
- Alice: Input field for the plain message, buttons to initiate key exchange, reconcile the key, and send the message.
- Bob: Input field displaying the received encrypted message, a button to trigger decoding, and a read-only field for the decoded result.
- Eve: Read-only field showing the intercepted encrypted message (if eavesdropping is active), a button to attempt decoding, and an input field for her decoded result.
Additional sections allow selecting the encryption protocol (“No Protocol”, “BB84 Protocol”, “Ekert Protocol”) via a dropdown menu and enabling/disabling Eve’s eavesdropping via a checkbox. A log area displays real-time updates about the actions performed and messages exchanged.
<body class="container mt-4">
<h1>Quantum Cryptography Simulation</h1>
<div class="row row-cols-1 row-cols-md-3 gy-3">
<div class="col border p-3">
<h3>Alice</h3>
<input id="aliceInput" type="text" class="form-control" placeholder="Plain Message">
<button onclick="sendAliceKey()" class="btn btn-primary mt-2">Send Key</button>
<button onclick="reconcileKey()" class="btn btn-primary mt-2">Reconcile Key</button>
<button onclick="sendAliceMessage()" class="btn btn-primary mt-2">Send Message</button>
</div>
<div class="col border p-3">
<h3>Bob</h3>
<input id="bobReceivedEncrypted" type="text" class="form-control" placeholder="Encrypted Message">
<button onclick="decodeBobMessage()" class="btn btn-primary mt-2">Decode</button>
<input id="bobDecoded" type="text" class="form-control mt-2" placeholder="Decoded Message" readonly>
</div>
<div class="col border p-3">
<h3>Eve</h3>
<input id="eveEavesdrop" type="text" class="form-control" placeholder="Encrypted Eavesdropped" readonly>
<button onclick="decodeEveMessage()" class="btn btn-secondary mt-2">Decode</button>
<input id="eveDecoded" type="text" class="form-control mt-2" placeholder="Decoded Message">
</div>
</div>
<div class="row mt-4">
<div class="col border p-3">
<h3>Encryption Model</h3>
<select id="encryptionModel" class="form-control">...</select>
</div>
</div>
<div class="row mt-4">
<div class="col border p-3">
<h3>Settings</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="eavesdropping">
<label class="form-check-label" for="eavesdropping">Enable eavesdropping</label>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col border p-3">
<h3>Logs</h3>
<div id="logArea" style="height:300px; overflow:auto;"></div>
</div>
</div>
<script src="/path/to/socket.io.min.js"></script>
<script src="/path/to/socket.js"></script>
</body>
Client-side logic with JavaScript and Socket.IO
The core interactivity is handled by JavaScript, utilizing the Socket.IO client library to communicate with the Flask backend.
Connection: A Socket.IO client instance connects to the server upon page load.
var socket = io();
Event Emission: Functions are defined for each user action (e.g., sendAliceMessage, decodeBobMessage). These functions read relevant data from the UI (message content, selected protocol, eavesdropping status) and emit corresponding events to the server via socket.emit().
function sendAliceMessage() {
const message = document.getElementById("aliceInput").value;
updateLog('Alice', 'send Message: ' + message + ' - model: ' + getEncryptionModel() + ' - eavesdropping: ' + isEavesdroppingEnabled());
socket.emit("alice_message", { message, encryption: getEncryptionModel(), eavesdropping: isEavesdroppingEnabled() });
}
// Expose functions to be called from HTML onclick attributes
window.sendAliceMessage = sendAliceMessage;
// ... other functions similarly exposed
Event Handling: Listeners (socket.on()) are set up to handle events pushed from the server. When an event (e.g., bob_receive_encrypted, eve_receive) is received, the corresponding JavaScript callback function updates the relevant parts of the UI, such as populating input fields with encrypted or decrypted messages, and adding entries to the log area.
// Listen for Bob receiving an encrypted message
socket.on("bob_receive_encrypted", (data) => {
updateLog('Bob', 'received encrypted: ' + data.message);
document.getElementById("bobReceivedEncrypted").value = data.message;
});
// Listen for Bob receiving the decoded message
socket.on("bob_receive", data => {
updateLog('Bob', 'received decoded: ' + data.message);
document.getElementById("bobDecoded").value = data.message;
});
// Update log utility function
function updateLog(sender, content) {
const log = document.getElementById("logArea");
log.innerHTML += `<div><strong>{sender}:</strong> {content}</div>`;
log.scrollTop = log.scrollHeight; // Auto-scroll
}
Helper Functions: Simple utility functions like getEncryptionModel() and isEavesdroppingEnabled() retrieve the current settings from the UI elements.
This frontend provides a functional interface for controlling the simulation and observing the outcomes in real-time, directly reflecting the operations handled by the backend server.
For access to the complete simulation code, please visit the GitHub repository here.