<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chat</title> <script src="/js/jquery-1.12.1.min"></script> <script src="/js/jquery-ui.js"></script> <script src="/socket.io/socket.io.js"></script> <script type="text/javascript"> var iosocket; function initSocketIO() { iosocket = io.connect(); iosocket.on('connect', function() { createSystemMessage('[Connected]'); console.log("connect"); iosocket.on('debugMessage', function(message) { alert(message); }); iosocket.on('disconnect', function() { createSystemMessage('[Disconnected]'); }); }); } window.onload = function() { initSocketIO(); }; function createSystemMessage(message) { var message = document.createTextNode(message); var messageBox = document.createElement('p'); messageBox.className = 'system'; messageBox.appendChild(message); var chat = document.getElementById('chat_box'); chat.appendChild(messageBox); } function createUserMessage(user, message) { var user = document.createTextNode(user + ': '); var userBox = document.createElement('span'); userBox.className = 'username'; userBox.appendChild(user); var message = document.createTextNode(message); var messageBox = document.createElement('p'); messageBox.appendChild(userBox); messageBox.appendChild(message); var chat = document.getElementById('chat_box'); chat.appendChild(messageBox); } function sendMessage() { var user = document.getElementById('user'); var message = document.getElementById('message'); var number = document.getElementById('number'); var currentDate = new Date(); var time = currentDate.toLocaleTimeString(); var date = currentDate.getDate()+"/"+currentDate.getMonth()+"/"+currentDate.getFullYear(); iosocket.emit('demoMessage',number.value.toString(),date,time,message.value); createUserMessage(time,message.value); message.value = ""; }; // added a little wrapper for enter submit function submitEnter(e){ if (( e.keyCode == 13 )&&(e.shiftKey === false)) { sendMessage(); } } </script> <style type="text/css"> * { font-family: "Arial"; font-size: 24px; } html, body, #wrapper { margin: 0; padding: 0; height: 100%; } #wrapper { background-color: #ecf0f1; } #chat_box { box-sizing: border-box; height: calc(100% - 50px); overflow: auto; padding-bottom: 50px; } #footer { box-sizing: border-box; position: fixed; bottom: 0; height: 50px; width: 100%; background-color: #2980b9; } #footer .content { padding-top: 4px; position: relative; } #number { width: 20%; max-width: 240px; } #message { width: calc(90% - 360px); } #send_btn { width: 120px; position: relative; margin: 2px; } .content { width: 70%; margin: 0 auto; } input[type="text"], input[type="button"] { border: 0; color: #fff; } input[type="text"] { background-color: #146EA8; padding: 3px 10px; margin: 2px; max-width: 92%; } input[type="button"] { background-color: #f39c12; border-right: 1px solid #e67e22; border-bottom: 1px solid #e67e22; min-width: 70px; display: inline-block; position: relative; } input[type="button"]:hover { background-color: #e67e22; border-right: 1px solid #f39c12; border-bottom: 1px solid #f39c12; cursor: pointer; } .system, .username { color: #aaa; font-style: italic; font-family: monospace; font-size: 16px; } @media screen and (max-width: 1000px) { .content { width: 90%; } #send_btn { position: relative; } } @media screen and (max-width: 780px) { #footer { height: 91px; } #chat_box { padding-bottom: 91px; height: calc(100% - 91px); } #number { width: 100%; } #message { min-width: 60%; } #send_btn { position: absolute; right: 0; bottom: 3px; margin: 0; width: 10%; } } @media screen and (max-width: 400px) { #footer { height: 135px; } #chat_box { padding-bottom: 135px; height: calc(100% - 135px); } #number { max-width: none; width: 93%; } #message { width: 93%; } #send_btn { position: relative; margin-top: 3px; width: 100%; } } </style> </head> <body> <div id="wrapper"> <div id="chat_box" class="content"></div> <div id="footer"> <div class="content"> <input type="text" id="number" value="+4301234567890" /> <input type="text" id="message" onkeypress="return submitEnter(event)" placeholder="Enter a Message" /> <input type="button" id="send_btn" value="Send" onclick="sendMessage()"> </div> </div> </div> </body> </html>