Web Ping Tool: Real-time Network Monitoring

<html>
<head>
    <title>Web Ping</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
</head>
<body>
    <h1>Web Ping</h1>
    <button id="start-button">Start</button>
    <button id="stop-button">Stop</button>
    <div id="output"></div>
<pre><code>&lt;script&gt;
    var socket = io.connect('http://' + document.domain + ':' + location.port);
    var outputDiv = document.getElementById('output');
    var outputLines = [];

    socket.on('stream_output', function(output) {
        outputLines.push(output);
        if (outputLines.length &gt; 10) {
            outputLines.shift();
        }
        outputDiv.innerHTML = outputLines.join('&lt;br&gt;');
    });

    document.getElementById('start-button').addEventListener('click', function() {
        fetch('/start', {method: 'POST'})
            .then(response =&gt; response.json())
            .then(data =&gt; console.log(data));
    });

    document.getElementById('stop-button').addEventListener('click', function() {
        fetch('/stop', {method: 'POST'})
            .then(response =&gt; response.json())
            .then(data =&gt; console.log(data));
    });
&lt;/script&gt;
</code></pre>
</body>
</html>