From 8c220ad0764902da4a94fdc510c95a8d6a3f2c54 Mon Sep 17 00:00:00 2001
From: Metin <metinsyln@gmail.com>
Date: Mon, 9 May 2016 19:22:55 +0300
Subject: [PATCH] okay

---
 example/index.html       | 18 ++++++++----
 example/server/server.js | 63 ++++++++++++++++++++++++++++++++++++++++
 example/style.css        | 23 +++++++++++++++
 3 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 example/server/server.js

diff --git a/example/index.html b/example/index.html
index 0e9a82c..8f19058 100644
--- a/example/index.html
+++ b/example/index.html
@@ -16,10 +16,13 @@
 <div class="container">
 
     <div v-if="!join" id="join" class="text-center">
-        <div class="form-group">
-            <input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name">
-        </div>
-        <button @click="joinChat(name)" class="btn btn-primary btn-lg">Join Chat</button>
+        <form @submit.prevent="joinChat(name)">
+            <div class="form-group">
+                <input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name">
+            </div>
+            <button class="btn btn-primary btn-lg" type="submit">Join Chat</button>
+        </form>
+
     </div>
 
     <div v-if="join" id="group">
@@ -33,7 +36,10 @@
 
             <div class="messages">
                 <ul class="list-unstyled">
-                    <li v-for="m in messages" :class="{me: (m.name === name)}">{{m.name}} - {{m.message}}</li>
+                    <li v-for="m in messages" :class="{me: (m.name === name), clearfix: true}">
+                        <div class="name">{{m.name}}</div>
+                        <span>{{m.message}}</span>
+                    </li>
                 </ul>
             </div>
 
@@ -55,7 +61,7 @@
 <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.22/vue.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.6/socket.io.min.js"></script>
-<script src="test.js"></script>
+<script src="../vue-socketio.min.js"></script>
 <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/example/server/server.js b/example/server/server.js
new file mode 100644
index 0000000..f218c1b
--- /dev/null
+++ b/example/server/server.js
@@ -0,0 +1,63 @@
+var socket = require('socket.io');
+
+var io = socket.listen(1923);
+
+var users = [];
+var messages = [];
+
+var names = [];
+
+io.on('connection', function (client) {
+
+
+    client.on('join', function (name) {
+
+        client.join('chat');
+
+        users.push(name);
+        names[client.id] = name;
+
+        client.emit('users', users);
+        client.emit('messages', messages);
+        client.emit('joined', true);
+        client.broadcast.emit('adduser', name);
+    });
+
+
+    client.on('send', function (message) {
+
+        var data = {
+            name: names[client.id],
+            message: message
+        };
+
+        if (messages.length > 10) {
+            messages.splice(0, 10);
+        }
+
+        messages.push(data);
+
+        io.emit('onmessage', data);
+
+    });
+
+
+    client.on('disconnect', function () {
+
+        var name = names[client.id];
+
+
+        delete names[client.id];
+
+        var index = users.indexOf(name);
+
+        if (index != -1) {
+            delete users[index];
+        }
+
+        io.emit('users', users);
+
+    });
+
+
+});
\ No newline at end of file
diff --git a/example/style.css b/example/style.css
index e10dca2..c8919cd 100644
--- a/example/style.css
+++ b/example/style.css
@@ -55,6 +55,29 @@ body {
     height: 240px;
     margin: 0;
     overflow-y: scroll;
+    padding-top: 5px;
+}
+
+.chat .messages ul li .name {
+    font-size: 12px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.chat .messages ul li {
+    margin-bottom: 10px;
+}
+
+.chat .messages ul li span {
+    border-radius: 5px !important;
+    background: #E0EDFF;
+    padding: 5px 12px;
+    font-size: 15px;
+}
+
+.chat .messages ul li.me {
+    text-align: right;
+    margin-right: 10px;
 }
 
 .chat .input {