iperf3 Service - 监控网络带宽和性能 - 常规

<!DOCTYPE html>
<html>
<head>
<title>iperf3 Service - 监控网络带宽和性能</title>
<style>
#output {
height: 400px;
overflow-y: scroll;
border: 1px solid black;
padding: 10px;
background-color: white;
color: black;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>iperf3 Service</h1>
<form id="startForm">
<label for="port">Port:</label>
<input type="text" id="port" name="port" required>
<button type="submit">Start</button>
</form>
<form id="stopForm">
<label for="stopPort">Port:</label>
<input type="text" id="stopPort" name="port" required>
<button type="submit">Stop</button>
</form>
<div id="output"></div>
<script type="text/javascript">
$(document).ready(function () {
var socket = io.connect('http://' + document.domain + ':' + location.port);
<p>socket.on('stream_output', function (output) {
$('#output').append(output + '<br>');
$('#output').scrollTop($('#output')[0].scrollHeight);
});</p>
<p>$('#startForm').submit(function (event) {
event.preventDefault();
var port = $('#port').val();</p>
<p>if (port &lt; 22222 || port &gt; 22322) {
$('#output').append('Error: 端口必须在 22222 to 22322 范围内。<br>');
$('#output').scrollTop($('#output')[0].scrollHeight);
return;
}</p>
<p>$.ajax({
url: '/start',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ 'port': port }),
success: function (response) {
$('#output').append(response.message + '<br>');
$('#output').scrollTop($('#output')[0].scrollHeight);
},
error: function (error) {
$('#output').append(error.responseJSON.message + '<br>');
$('#output').scrollTop($('#output')[0].scrollHeight);
}
});</p>
<p>$('#port').val('');
});</p>
<p>$('#stopForm').submit(function (event) {
event.preventDefault();
var port = $('#stopPort').val();</p>
<p>if (port &lt; 22222 || port &gt; 22322) {
$('#output').append('Error: 端口必须在 22222 to 22322 范围内。<br>');
$('#output').scrollTop($('#output')[0].scrollHeight);
return;
}</p>
<p>$.ajax({
url: '/stop',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ 'port': port }),
success: function (response) {
$('#output').append(response.message + '<br>');
$('#output').scrollTop($('#output')[0].scrollHeight);
},
error: function (error) {
$('#output').append(error.responseJSON.message + '<br>');
$('#output').scrollTop($('#output')[0].scrollHeight);
}
});</p>
<p>$('#stopPort').val('');
});
});
</script></p>
</body>
</html>