iperf3 服务 - 网络带宽测试工具 - 常规

使用 iperf3 服务进行网络带宽测试，提供简单的界面操作，支持启动和停止测试，并实时显示测试结果。

使用步骤:

填写需要测试的端口号（范围为 22222 到 22322）。
点击 'Start' 开始测试。
测试结果将实时显示在下方区域。
点击 'Stop' 结束测试。

注意：

确保后端服务器已经启动并且正在监听正确的端口。
确保前端代码中的 socket 连接已经成功建立。
检查浏览器的网络请求是否被阻止。
检查前端代码中的事件绑定是否正确。

代码示例：

<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>
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/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="form">
        <label for="port">Port:</label>
        <input type="text" id="port" name="port" required>
        <button type="submit" id="startButton">Start</button>
        <button type="submit" id="stopButton">Stop</button>
    </form>

    <div id="output"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            var socket = io.connect('http://' + document.domain + ':' + location.port);

            socket.on('stream_output', function (output) {
                $('#output').append(output + '<br>');
                $('#output').scrollTop($('#output')[0].scrollHeight);
            });

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

                if (port < 22222 || port > 22322) {
                    $('#output').append('Error: 端口必须在 22222 to 22322 范围内。<br>');
                    $('#output').scrollTop($('#output')[0].scrollHeight);
                    return;
                }

                if(event.originalEvent.explicitOriginalTarget.id === 'startButton') {
                    $.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);
                        }
                    });
                } else if(event.originalEvent.explicitOriginalTarget.id === 'stopButton') {
                    $.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);
                        }
                    });
                }

                $('#port').val('');
            });
        });
    </script>
</body>
</html>