48 lines
1.3 KiB
HTML
48 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Interactive Text Program</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
|
|
<script>
|
|
var socket = io();
|
|
|
|
socket.on('output', function(data) {
|
|
// Append the received text output to the page
|
|
var outputDiv = document.getElementById('output');
|
|
outputDiv.innerHTML += data.data + '<br>';
|
|
outputDiv.scrollTop = outputDiv.scrollHeight;
|
|
});
|
|
|
|
function sendInput() {
|
|
var inputField = document.getElementById('input');
|
|
var userInput = inputField.value;
|
|
|
|
// Send the user input to the server
|
|
socket.emit('input', {data: userInput});
|
|
|
|
// Clear the input field
|
|
inputField.value = '';
|
|
}
|
|
|
|
const eventSource = new EventSource('/stream');
|
|
|
|
eventSource.addEventListener('output', function (event) {
|
|
const data = JSON.parse(event.data);
|
|
// Update the web page with the received output data
|
|
// (e.g., append it to a <div> element)
|
|
});
|
|
|
|
eventSource.onerror = function () {
|
|
// Handle errors
|
|
};
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="output"></div>
|
|
<input type="text" id="input" onkeydown="if (event.key === 'Enter') sendInput()" autofocus>
|
|
<button onclick="sendInput()">Send</button>
|
|
</body>
|
|
</html>
|