index.html

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>Chatter - Direct Messaging / Chating App</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
        <style type="text/css">
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="container" id="app">
                <div class="left">
                    <div class="top">
                        <input type="text" />
                    </div>
                    <ul class="people" v-cloak>
                        <li v-bind:class="'person' + (toUserID == user.id ? ' active' : '')" v-bind:data-chat="user.name" v-for="user in onlineUsers" @click="toUserID = user.id">
                            <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png" alt="" />
                            <span class="name">{{ user.name }}</span>
                            <span class="time">{{ '4:00 PM' }}</span>
                            <span class="preview">{{ '...' }}</span>
                        </li>
                    </ul>
                </div>
                <div class="right" v-if="toUserID" v-cloak>
                    <div class="top"><span>To: <span class="name">{{ toUser.name }}</span></span></div>
                    <div v-bind:class="'chat' + (toUserID == user.id ? ' active-chat' : '')" v-bind:data-chat="user.id" v-for="user in onlineUsers">
                        <div v-bind:class="'bubble ' + (msg.from == currentUser.id ? 'me' : 'you')" v-for="msg in myMessages">
                            {{ msg.text }}
                        </div>
                    </div>

                    <div class="write">
                        <a href="javascript:;" class="write-link attach"></a>
                        <input type="text" v-model="message" @keyup.enter.prevent="sendMessage" />
                        <!--<a href="javascript:;" class="write-link smiley"></a>-->
                        <a href="#" class="write-link send" @click.prevent="sendMessage"></a>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
        <script src="https://unpkg.com/vue"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    socket: null,
                    message: '',
                    messages: [],
                    users: [],
                    currentUser: {},
                    toUserID: ''
                },
                mounted: function () {
                    var userName = window.prompt('Enter Your User Name');
                    var userID = parseInt(window.prompt('Enter Your User ID'));

                    this.currentUser = {id: userID, name: userName};

                    /* Socket Start Here */
                    this.socket = io();
                    this.socket.emit('online user', this.currentUser);

                    var self = this;

                    this.socket.on('online users list', function(users) {
                        Vue.set(self, 'users', users);
                    });

                    this.socket.on('chat message', function(msg, from) {
                        var id = self.messages.length + 1;
                        self.messages.push({ id: id, from: from, to: self.currentUser.id, text: msg });
                        //@Todo - Store the messages somewhere
                    });
                    /* Socket End Here */
                },
                computed: {
                    onlineUsers: function () {
                        var self = this;

                        return this.users.filter(function (user) {
                            return user.id != self.currentUser.id;
                        });
                    },
                    toUser: function () {
                        var self = this;

                        return this.users.filter(function (user) {
                            return (user.id == self.toUserID);
                        })[0];
                    },
                    myMessages: function () {
                        var self = this;

                        return this.messages.filter(function (message) {
                            if ((message.from == self.toUserID && message.to == self.currentUser.id) || (message.from == self.currentUser.id && message.to == self.toUserID)) {
                                return message;
                            }
                        }).sort(function (a, b) {
                            a.id - b.id;
                        });
                    }
                },
                methods: {
                    sendMessage: function () {
                        var id = this.messages.length + 1;
                        this.messages.push({ id: id, from: this.currentUser.id, to: this.toUserID, text: this.message });
                        //@Todo - Store the messages somewhere

                        this.socket.emit('chat message', this.message, this.toUserID, this.currentUser.id);
                        this.message = '';
                    }
                }
            })
        </script>
    </body>
</html>