<!DOCTYPE html>
<html>
<head>
    <title>iperf3 Service</title>
    <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>
    <style>
        #output {
            height: 200px;
            overflow-y: auto;
        }
    </style>
</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);

        socket.on('stream_output', function (output) {
            var outputDiv = $('#output');
            outputDiv.append(output + '&lt;br&gt;');
            var lines = outputDiv.find('br');
            if (lines.length &gt; 20) {
                lines.first().prev().remove();
            }
            outputDiv.scrollTop(outputDiv[0].scrollHeight);
        });

        $('#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) {
                    var outputDiv = $('#output');
                    outputDiv.append(response.message + '&lt;br&gt;');
                    var lines = outputDiv.find('br');
                    if (lines.length &gt; 20) {
                        lines.first().prev().remove();
                    }
                    outputDiv.scrollTop(outputDiv[0].scrollHeight);
                },
                error: function (error) {
                    var outputDiv = $('#output');
                    outputDiv.append(error.responseJSON.message + '&lt;br&gt;');
                    var lines = outputDiv.find('br');
                    if (lines.length &gt; 20) {
                        lines.first().prev().remove();
                    }
                    outputDiv.scrollTop(outputDiv[0].scrollHeight);
                }
            });

            $('#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) {
                    var outputDiv = $('#output');
                    outputDiv.append(response.message + '&lt;br&gt;');
                    var lines = outputDiv.find('br');
                    if (lines.length &gt; 20) {
                        lines.first().prev().remove();
                    }
                    outputDiv.scrollTop(outputDiv[0].scrollHeight);
                },
                error: function (error) {
                    var outputDiv = $('#output');
                    outputDiv.append(error.responseJSON.message + '&lt;br&gt;');
                    var lines = outputDiv.find('br');
                    if (lines.length &gt; 20) {
                        lines.first().prev().remove();
                    }
                    outputDiv.scrollTop(outputDiv[0].scrollHeight);
                }
            });

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

原文地址: http://www.cveoy.top/t/topic/iTda 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录