| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Flask SocketIO Chat</title> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script> |
| <script> |
| var socket = io(); |
| |
| function sendMessage() { |
| var message = document.getElementById("messageInput").value; |
| socket.emit('message', message); |
| document.getElementById("messageInput").value = ''; |
| } |
| |
| socket.on('message', function(message) { |
| var chat = document.getElementById('chat'); |
| var p = document.createElement('p'); |
| p.innerText = message; |
| chat.appendChild(p); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="chat"></div> |
| <input type="text" id="messageInput" /> |
| <button onclick="sendMessage()">Send</button> |
| </body> |
| </html> |
