sanath-kumar

const express  = require('express')
const bodyParser = require('body-parser')
const mongoose = require('mongoose')
const socket = require('socket.io')
const cors = require('cors')
const keys = require('./config/keys')
const message = require('./model/message')

const app = new express()
app.use(bodyParser.json())

sanath-kumar

const mongoose = require('mongoose');
const {Schema} = mongoose;

const MessageSchema = new Schema({
  'handle' : String,
  'message' : String,
  'created' : Date
})

module.exports = mongoose.model('message',MessageSchema);

sanath-kumar

module.exports = {
  mongoURI : 'mongodb://localhost:27017/socket-server',
}

sanath-kumar

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import socketIO from 'vue-socket.io'
import 'vuetify/dist/vuetify.min.css'

import { store } from './store'

Vue.use(Vuetify);
Vue.use(socketIO, 'http://localhost:5000');

sanath-kumar

<template lang="html">
  <v-card class="pl-3 pr-3 pt-5 pb-5 mt-5">
    <h3 class="text-xs-center mb-3">ENTER A HANDLE</h3>
    <v-text-field
      label="Solo"
      placeholder="Type Your Message"
      v-model="handle"
      outline
      single-line
      ref="message">

sanath-kumar

<template lang="html">
  <v-flex md8 offset-md2 class="pt-1" @submit.prevent="sendMessage">
    <v-form style="width:100%">
    <v-text-field
      label="Solo"
      placeholder="Type Your Message"
      v-model="message"
      solo
      ref="message"
      >

sanath-kumar

<template>
  <v-app id="app" class="fill-height">
    <v-layout row class="fill-height" style="padding-bottom:60px" >
        <v-flex md8 offset-md2 style="overflow:auto;" class="pr-3 pl-3" v-if="HANDLE" ref="chatContainer">
          <div v-for="chat in CHATS" class="mt-4 mb-4" style="max-width:80%">
              <app-chat-item :chat="chat"></app-chat-item>
          </div>
        </v-flex>
        <v-flex v-else md4 offset-md4 class="text-xs-center">
            <app-chat-handle></app-chat-handle>

sanath-kumar

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios'

Vue.use(Vuex);

export const store = new Vuex.Store({
  state : {
    chats : null,
    handle : ""

sanath-kumar

<template lang="html">
    <v-tooltip left>
       <span slot="activator">
         <p class="grey--text text--darken-2">
           <b class="indigo--text" v-if="isMyHandle(chat.handle)">{{chat.handle}} :</b>
           <b class="pink--text" v-else>Me :</b>
           {{chat.message}}
         </p>
       </span>
       <span>{{chat.created | moment("HH:MM, DD-MM-YY")}}</span>

sanath-kumar

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios'

Vue.use(Vuex);

export const store = new Vuex.Store({
  state : {},
  getters : {},
  mutations : {},