<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask-SocketIO Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.js"></script>    
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> -->
    <script>
        // Connect to Socket.IO server
      // var socket = io.connect('http://' + document.domain + ':' + location.port);
      const socket = io.connect({
          //  transports: ['websocket'],
      });
      
      // Event handlers
      socket.on('connect', () => {
          console.log('Connected');
      });
      
      socket.on('disconnect', () => {
          console.log('Disconnected');
      });
      
      socket.on('message', (data) => {
          console.log('Received message:', data);
      });
      
      
      socket.on('matrix', function(matrix_json) {
          var matrix = JSON.parse(matrix_json);
          console.log('Received matrix:');
          console.log(matrix);
      });
      
        // // Example: Sending a message
        // function sendMessage() {
        //     const message = document.getElementById('message').value;
        //     socket.emit('message', message);
        // }
    </script>
</head>
<body>
    <input type="text" id="message" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
</body>
</html>
