index.html

  
 <!DOCTYPE html>
<html>

<head>
    <title>WebSocket Example</title>
</head>

<body>
    <h1>WebSocket Example</h1>
    <input type="text" id="message" placeholder="Type a message">
    <button onclick="sendMessage()">Send</button>
    <br>
    <textarea id="responsearea"></textarea>

    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
    <script type="text/javascript">
        var socket = io.connect('http://' + document.domain + ':' + location.port);

        socket.on('connect', function () {
            console.log('Connected to the server');
        });

        socket.on('response', function (data) {
            $('#responsearea').val($('#responsearea').val() + '\n' + data);
        });

        function sendMessage() {
            var message = document.getElementById('message').value;
            socket.emit('message', message);
        }
    </script>
</body>

</html>