</form>
</p>
+ <ul id="comments">
+ </ul>
+
+ <p>
+ <form action="" id="comment-form">
+ <input id="comment" type="text" style="width:100%" autocomplete="off" placeholder="Add a comment" />
+ </form>
+ </p>
+
<div align="center">
<div class="animate-flicker">
<p>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
+
+ var comments = document.querySelector("#comments");
+ var form = document.querySelector("#comment-form");
+ var comment = document.querySelector("#comment");
+
+ form.addEventListener('submit', function(e) {
+ e.preventDefault();
+ if (comment.value) {
+ socket.emit('comment', comment.value);
+ comment.value = '';
+ }
+ });
+
+ socket.on('comment', function(msg) {
+ var item = document.createElement('li');
+ item.textContent = msg;
+ comments.appendChild(item);
+ });
</script>
</body>
</html>