Skip to content

Instantly share code, notes, and snippets.

@dkhd
Created Feb 18, 2019
Embed
What would you like to do?
Building A (Simple) Group Chat Using Node.js
<!DOCTYPE html>
<html>
<head>
<title>Simple Group Chat on Node.js</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #fff; padding: 3px; position: fixed; bottom: 0; width: 100%; border-color: #000; border-top-style: solid; border-top-width: 1px;}
form input { border-style: solid; border-width: 1px; padding: 10px; width: 85%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; margin-left: 2%; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form action="/" method="POST" id="chatForm">
<input id="txt" autocomplete="off" autofocus="on" placeholder="type your message here..." /><button>Send</button>
</form>
<script>
// submit text message without reload/refresh the page
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
$('#txt').val('');
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment