okay

example/index.html

@@ -16,10 +16,13 @@
 <div class="container">
 
     <div v-if="!join" id="join" class="text-center">
-        <div class="form-group">
+        <form @submit.prevent="joinChat(name)">
-            <input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name">
+            <div class="form-group">
-        </div>
+                <input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name">
-        <button @click="joinChat(name)" class="btn btn-primary btn-lg">Join Chat</button>
+            </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>

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);
+
+    });
+
+
+});

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 {