Modern Chat Interface - Copy this Html, Bootstrap Component to your project

Create a chat front end based on this code: {% extends 'base.html' %} {% block content %} <div class="message box"> <h2>Sala do Chat: {{code}}</h2> <div class="messages" id="messages"></div> <div class="inputs"> <input type="text" rows="3" placeholder="Mensagem" name="message" id="message" /> <button type="button" name="send" id="send btn" onClick="sendMessage()"> Enviar </button> </div> </div> <script type="text/javascript"> var socketio = io(); const messages = document.getElementById("messages"); const createMessage = (name, msg) => { const content = ` <div class="text"> <span> <strong>${name}</strong>: ${msg} </span> <span class="muted"> ${new Date().toLocaleString()} </span> </div> `; messages.innerHTML += content; }; socketio.on("message", (data) => { createMessage(data.name, data.message); }); const sendMessage = () => { const message = document.getElementById("message"); if (message.value == "") return; socketio.emit("message", { data: message.value }); message.value = ""; }; </script> {% for msg in messages %} <script type="text/javascript"> createMessage("{{msg.name}}", "{{msg.message}}"); </script> {% endfor %} {% endblock %}