iperf3 Service - Network Bandwidth Testing Tool - 常规

<!DOCTYPE html>
<html>
<head>
    <title>iperf3 Service - Network Bandwidth Testing Tool</title>
    <style>
        #output {
            height: 300px;
            overflow: auto;
            border: 1px solid 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>
<pre><code>&lt;form id=&quot;startForm&quot;&gt;
    &lt;label for=&quot;port&quot;&gt;Port:&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;port&quot; name=&quot;port&quot; required&gt;
    &lt;button type=&quot;submit&quot;&gt;Start&lt;/button&gt;
&lt;/form&gt;
&lt;form id=&quot;stopForm&quot;&gt;
    &lt;label for=&quot;stopPort&quot;&gt;Port:&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;stopPort&quot; name=&quot;port&quot; required&gt;
    &lt;button type=&quot;submit&quot;&gt;Stop&lt;/button&gt;
&lt;/form&gt;
&lt;div id=&quot;output&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function () {
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        var outputCount = 0;

        socket.on('stream_output', function (output) {
            if(outputCount &gt;= 50) {
                $('#output').html('');
                outputCount = 0;
            }
            $('#output').append(output + '&lt;br&gt;');
            outputCount++;
        });

        $('#startForm').submit(function (event) {
            event.preventDefault();
            var port = $('#port').val();

            $.ajax({
                url: '/start',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ 'port': port }),
                success: function (response) {
                    if(outputCount &gt;= 50) {
                        $('#output').html('');
                        outputCount = 0;
                    }
                    $('#output').append(response.message + '&lt;br&gt;');
                    outputCount++;
                },
                error: function (error) {
                    if(outputCount &gt;= 50) {
                        $('#output').html('');
                        outputCount = 0;
                    }
                    $('#output').append(error.responseJSON.message + '&lt;br&gt;');
                    outputCount++;
                }
            });

            $('#port').val('');
        });

        $('#stopForm').submit(function (event) {
            event.preventDefault();
            var port = $('#stopPort').val();

            $.ajax({
                url: '/stop',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ 'port': port }),
                success: function (response) {
                    if(outputCount &gt;= 50) {
                        $('#output').html('');
                        outputCount = 0;
                    }
                    $('#output').append(response.message + '&lt;br&gt;');
                    outputCount++;
                },
                error: function (error) {
                    if(outputCount &gt;= 50) {
                        $('#output').html('');
                        outputCount = 0;
                    }
                    $('#output').append(error.responseJSON.message + '&lt;br&gt;');
                    outputCount++;
                }
            });

            $('#stopPort').val('');
        });
    });
&lt;/script&gt;
</code></pre>
</body>
</html>