Moved chat example to chatserver.

2015-07-09 11:40:15 -07:00
parent 26a44967e8
commit 6121a207ca
11 changed files with 23 additions and 28 deletions
--- a/examples/chatserver/static/css/style.css
+++ b/examples/chatserver/static/css/style.css
@@ -0,0 +1,53 @@
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+}
+
+body {
+    background-color: #dec;
+    margin: 0;
+}
+
+#input {
+    height: 60px;
+    width: 100%;
+}
+
+.footer {
+    background-color: #ac9;
+    box-shadow: 0 0 5px #333;
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+.footer textarea {
+    background-color: #dec;
+    border: none;
+    border-radius: 4px;
+    padding: 4px;
+}
+
+.messages {
+    padding: 10px;
+}
+
+.message {
+    background-color: #efd;
+    border-radius: 4px;
+    font-size: 10pt;
+    margin-bottom: 4px;
+    padding: 8px 16px;
+}
+
+.message.system {
+    color: #777;
+}
+
+.spacer {
+    height: 80px;
+}
--- a/examples/chatserver/static/index.html
+++ b/examples/chatserver/static/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>QHttpEngine Chat</title>
+
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <div class="footer">
+            <textarea id="input" placeholder="Type here and press enter..."></textarea>
+        </div>
+
+        <div class="messages">
+            <div class="message system">
+                Greetings! Welcome to the QHttpEngine chat demo. Please type a message using the entry box below.
+            </div>
+        </div>
+
+        <div class="spacer"></div>
+
+        <script src="js/jquery.min.js"></script>
+        <script src="js/chat.js"></script>
+    </body>
+</html>
--- a/examples/chatserver/static/js/chat.js
+++ b/examples/chatserver/static/js/chat.js
@@ -0,0 +1,46 @@
+$(function() {
+
+    var index = -1,
+        $document = $(document),
+        $messages = $('.messages');
+
+    // Retrieve all messages after the specified index
+    function update() {
+        $.ajax({
+            type: 'POST',
+            url: '/api/getMessages',
+            data: JSON.stringify({index: index}),
+            contentType: 'application/json',
+            complete: function() {
+                window.setTimeout(update, 2000);
+            },
+            success: function(data) {
+                $.each(data.messages, function(i, e) {
+                    $('<div>')
+                        .addClass('message')
+                        .text(e.message)
+                        .appendTo($messages);
+                    index = e.index;
+                });
+                $document.scrollTop(10000);
+            }
+        });
+    }
+
+    update();
+
+    // Find the message input box and set the appropriate handler for [enter]
+    var $input = $('#input').focus().keypress(function(e) {
+        if(e.which == 13) {
+            $.ajax({
+                type: 'POST',
+                url: '/api/postMessage',
+                data: JSON.stringify({message: $(this).val()}),
+                contentType: 'application/json'
+            });
+            // Clear the contents
+            $(this).val('');
+            return false;
+        }
+    });
+});
--- a/examples/chatserver/static/js/jquery.min.js
+++ b/examples/chatserver/static/js/jquery.min.js