├── .gitignore
├── config
    ├── appConfig.js
    └── dbconfig.json
├── public
    ├── images
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   └── 3.jpg
    ├── login.ejs
    └── chat.ejs
├── debug.log
├── migrations
    ├── 20170203112134-users-migration.js
    └── 20170204111728-messages-migration.js
├── routes
    ├── index.js
    ├── authenticationRoutes.js
    └── chatRoutes.js
├── package.json
├── models
    ├── index.js
    ├── messages.js
    └── users.js
├── seeders
    └── 20170825054100-createNewUsersToLoginWith.js
├── README.md
└── server.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea/*


--------------------------------------------------------------------------------
/config/appConfig.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     'secret': 'iamthebest',
3 | };


--------------------------------------------------------------------------------
/public/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirhamdy/real-time-chat/HEAD/public/images/1.jpg


--------------------------------------------------------------------------------
/public/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirhamdy/real-time-chat/HEAD/public/images/2.jpg


--------------------------------------------------------------------------------
/public/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirhamdy/real-time-chat/HEAD/public/images/3.jpg


--------------------------------------------------------------------------------
/debug.log:
--------------------------------------------------------------------------------
1 | [0724/221757.280:ERROR:crash_report_database_win.cc(428)] unexpected header
2 | [0724/222830.241:ERROR:crash_report_database_win.cc(428)] unexpected header
3 | [0724/223359.930:ERROR:crash_report_database_win.cc(428)] unexpected header
4 | 


--------------------------------------------------------------------------------
/migrations/20170203112134-users-migration.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var models = require("../models/index.js");
 3 | module.exports = {
 4 |   up: function (queryInterface, Sequelize) {
 5 | 
 6 |     return queryInterface.createTable(models.users.tableName, 
 7 |       models.users.attributes);
 8 |   },
 9 | 
10 |   down: function (queryInterface, Sequelize) {
11 |      return queryInterface.dropTable('users');
12 |   }
13 | };
14 | 
15 | 


--------------------------------------------------------------------------------
/migrations/20170204111728-messages-migration.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var models = require("../models/index.js");
 3 | module.exports = {
 4 |   up: function (queryInterface, Sequelize) {
 5 |       return queryInterface.createTable(models.messages.tableName,
 6 |           models.messages.attributes);
 7 |   },
 8 | 
 9 |   down: function (queryInterface, Sequelize) {
10 |     return queryInterface.dropTable('messages');
11 |   }
12 | };
13 | 


--------------------------------------------------------------------------------
/config/dbconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "development": {
 3 |     "username": "root",
 4 |     "password": null,
 5 |     "database": "chat",
 6 |     "host": "127.0.0.1",
 7 |     "dialect": "mysql"
 8 |   },
 9 |   "test": {
10 |     "username": "root",
11 |     "password": null,
12 |     "database": "chat",
13 |     "host": "127.0.0.1",
14 |     "dialect": "mysql"
15 |   },
16 |   "production": {
17 |     "username": "root",
18 |     "password": null,
19 |     "database": "chat",
20 |     "host": "127.0.0.1",
21 |     "dialect": "mysql"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/routes/index.js:
--------------------------------------------------------------------------------
 1 | "use strict"
 2 | var authenticationRouter =require("./authenticationRoutes");
 3 | var chatRouter = require('./chatRoutes');
 4 | // import cors                         from "cors";
 5 | 
 6 | module.exports=  function ConfigApiRoutes(app) {
 7 |     // app.use(cors());
 8 |     app.use('/api',authenticationRouter);
 9 |     app.use('/api',chatRouter);
10 | 
11 |     app.get('/', (req, res) => {
12 |         res.render('login');
13 |     });
14 | 
15 |     app.get('/chat', (req, res) => {
16 |         res.render('chat');
17 |     });
18 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chat",
 3 |   "version": "1.0.0",
 4 |   "description": "Real Time chat using sockets.io",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "node server.js"
 8 |   },
 9 |   "author": "amgad atef mohamed",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "body-parser": "^1.17.2",
13 |     "ejs": "^2.5.7",
14 |     "express": "^4.15.4",
15 |     "jsonwebtoken": "^7.4.3",
16 |     "md5": "^2.2.1",
17 |     "mysql2": "^1.4.1",
18 |     "open": "0.0.5",
19 |     "sequelize": "^4.7.5",
20 |     "socket.io": "^2.0.3"
21 |   },
22 |   "devDependencies": {
23 |     "nodemon": "^1.11.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/models/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var fs        = require('fs');
 4 | var path      = require('path');
 5 | var Sequelize = require('sequelize');
 6 | var basename  = path.basename(module.filename);
 7 | var env       = process.env.NODE_ENV || 'development';
 8 | var config    = require(__dirname + '/../config/dbconfig.json')[env];
 9 | var db        = {};
10 | 
11 | if (config.use_env_variable) {
12 |   var sequelize = new Sequelize(process.env[config.use_env_variable]);
13 | } else {
14 |   var sequelize = new Sequelize(config.database, config.username, config.password, config);
15 | }
16 | 
17 | fs
18 |   .readdirSync(__dirname)
19 |   .filter(function(file) {
20 |     return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js');
21 |   })
22 |   .forEach(function(file) {
23 |     var model = sequelize['import'](path.join(__dirname, file));
24 |     db[model.name] = model;
25 |   });
26 | 
27 | Object.keys(db).forEach(function(modelName) {
28 |   if (db[modelName].associate) {
29 |     db[modelName].associate(db);
30 |   }
31 | });
32 | 
33 | db.sequelize = sequelize;
34 | db.Sequelize = Sequelize;
35 | 
36 | module.exports = db;
37 | 


--------------------------------------------------------------------------------
/routes/authenticationRoutes.js:
--------------------------------------------------------------------------------
 1 | "user strict";
 2 | var express = require('express');
 3 | var authenticationRouter = express.Router();
 4 | var jwt    = require('jsonwebtoken');
 5 | var appSeckertKey = require('../config/appConfig').secret;
 6 | var models = require('../models/index');
 7 | var md5 = require('md5');
 8 | 
 9 | authenticationRouter.post('/login', function (req, res) {
10 |     try {
11 |          models.users.findOne({where:{email: req.body.email, password: md5(req.body.password) }}).then( user => {
12 |             if (!user)
13 |                 return  res.status(401).json({ success: false, message: 'Authentication failed. User not found.' });
14 | 
15 |             jwt.sign({'user_id': user.id,'first_name':user.first_name,'email': user.email,'avatar_path': user.avatar_path},
16 |                  appSeckertKey, {expiresIn: 60 * 60* 60*24}, (err, token) =>{
17 |                      if (err)
18 |                          console.log(err);
19 |                      return  res.status(200).json({ success: true,'userToken': token });
20 |             });
21 |         }).catch(error => res.status(400).json(error));
22 |     }
23 |     catch (err) {
24 |         return  res.status(500).json({success: false, message: "There was an error attempting to login. Please try again later."});
25 |     }
26 | });
27 | 
28 | module.exports = authenticationRouter;


--------------------------------------------------------------------------------
/seeders/20170825054100-createNewUsersToLoginWith.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var md5 = require('md5');
 3 | module.exports = {
 4 |   up: function (queryInterface, Sequelize) {
 5 | 
 6 |       return queryInterface.bulkInsert('users', [{
 7 |           first_name: 'Amir Hamdy',
 8 |           email: 'amirhamdy4@gmail.com',
 9 |           password: md5('123456'),
10 |           remember_token: 'remember_token',
11 |           avatarPath: '1.jpg',
12 |           isActive: 0,
13 |           socketID: null
14 |       },{
15 |           first_name: 'Ahmed Hamdy',
16 |           email: 'ahmedhamdy4@gmail.com',
17 |           password: md5('123456'),
18 |           remember_token: 'remember_token',
19 |           avatarPath: '2.jpg',
20 |           isActive: 0,
21 |           socketID: null
22 |       },{
23 |           first_name: 'Abdo Hamdy',
24 |           email: 'abdohamdy4@gmail.com',
25 |           password: md5('123456'),
26 |           remember_token: 'remember_token',
27 |           avatarPath: '3.jpg',
28 |           isActive: 0,
29 |           socketID: null
30 |       }], {});
31 |   },
32 | 
33 |   down: function (queryInterface, Sequelize) {
34 |     /*
35 |       Add reverting commands here.
36 |       Return a promise to correctly handle asynchronicity.
37 | 
38 |       Example:
39 |       return queryInterface.bulkDelete('Person', null, {});
40 |     */
41 |   }
42 | };
43 | 


--------------------------------------------------------------------------------
/models/messages.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | module.exports = function(sequelize, DataTypes) {
 4 |   var messages = sequelize.define("messages", {
 5 |     id: {
 6 |         type: DataTypes.INTEGER.UNSIGNED ,
 7 |         primaryKey: true ,
 8 |         autoIncrement: true
 9 |     },
10 |     message_subject : {
11 |         type:DataTypes.STRING
12 |     },
13 |     message_body :{
14 |         type: DataTypes.TEXT,
15 |         allowNull:false
16 |     } ,
17 |     sender_id : {
18 |         type: DataTypes.INTEGER.UNSIGNED ,
19 |         allowNull: false,
20 |         references: {
21 |             model: "users",
22 |             key: "id"
23 |         }
24 |     },
25 |     receiver_id :{
26 |         type: DataTypes.INTEGER.UNSIGNED ,
27 |         allowNull: false,
28 |         references: {
29 |             model: "users",
30 |             key: "id"
31 |         }
32 |     },
33 |     conversation_id : {
34 |         type:DataTypes.STRING,
35 |         allowNull : false
36 |     } ,
37 |     created_at : {
38 |         type: 'TIMESTAMP' ,
39 |         allowNull: false,
40 |         defaultValue: DataTypes.NOW
41 |     },
42 |     updated_at :{
43 |         type: 'TIMESTAMP' ,
44 |         allowNull: false,
45 |         defaultValue: DataTypes.NOW
46 |     },
47 |     viewed : DataTypes.BOOLEAN
48 |   },
49 |   {
50 |     timestamps: false,
51 |     freezeTableName:true,
52 |       tableName: 'messages'
53 |   }, {
54 |     classMethods: {
55 |       associate: function(models) {
56 |       }
57 |     }
58 |   });
59 |     messages.associate = function(models) {
60 |         messages.belongsTo(models.users, {
61 |             onDelete: "CASCADE",
62 |             foreignKey:  'sender_id',
63 |             targetKey: 'id',
64 |             as :'user'
65 |         });
66 |     };
67 |   return messages;
68 | };
69 | 


--------------------------------------------------------------------------------
/models/users.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var md5 = require('md5');
 3 | module.exports = function(sequelize, DataTypes) {
 4 |   var users = sequelize.define("users", {
 5 |     id: {
 6 |       type: DataTypes.INTEGER.UNSIGNED ,
 7 |         primaryKey: true ,
 8 |         autoIncrement: true
 9 |     },
10 |     first_name : {
11 |       type:DataTypes.STRING,
12 |       allowNull: false,
13 |     },
14 |     email : {
15 |         type:DataTypes.STRING,
16 |         allowNull: false,
17 |         unique:true
18 |     } ,
19 |     password : {
20 |         type:DataTypes.STRING,
21 |         allowNull: false,
22 |         set(val) {
23 |             this.setDataValue('password', md5(val));
24 |         }
25 |     },
26 |     remember_token :{
27 |         type:DataTypes.STRING,
28 |         allowNull: false,
29 |     },
30 |     created_at :{
31 |       type: 'TIMESTAMP' ,
32 |       allowNull: false,
33 |       defaultValue: DataTypes.NOW
34 |     },
35 |     updated_at :{
36 |       type: 'TIMESTAMP' ,
37 |       allowNull: false,
38 |       defaultValue: DataTypes.NOW
39 |     },
40 |     avatarPath : DataTypes.TEXT ,
41 |     isActive: DataTypes.BOOLEAN,
42 |     socketID: {
43 |         type:DataTypes.STRING(255),
44 |         defaultValue:null,
45 |         allowNull:true
46 |     }
47 | 
48 |       }
49 |   ,
50 |   {
51 |     timestamps: false,
52 |     freezeTableName:true,
53 |     tableName: 'users'
54 |   }
55 |   , {
56 |     classMethods: {
57 |       associate: function(models) {
58 |       }
59 |     }
60 |   });
61 |     users.associate = function(models) {
62 |         users.hasMany(models.messages, {
63 |             onDelete: "CASCADE",
64 |             foreignKey:'sender_id',
65 |             targetKey: 'id',
66 |             as: 'userMessages'
67 |         });
68 |     };
69 |   return users;
70 | };
71 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | A Real Time Chat Application built using Node.js, Express, MYSQL , Socket.io, JWT
 2 | # Features
 3 | * Uses Express as the application Framework.
 4 | * Manages authentication  using [express jwt  package](https://www.npmjs.com/package/jwt-express).
 5 | * Passwords are hashed using [md5 package](https://www.npmjs.com/package/md5) .
 6 | * Real-time communication between a client and a server using [Socket.io](https://socket.io/).
 7 | * Uses [Sequelize ORM](https://github.com/sequelize/sequelize) for storing and querying data to MYSQL.
 8 | * - [x] After User Logging to the system , he can see all users in the system.
 9 | * - [x] Can define each user is online or offline.
10 | * - [x] User can messaging with any user in the system , see all previous messages (private messages).
11 | * - [x] When user send a new message to another user , he get notification that he has a new message.
12 | 
13 | # incomming Features:
14 | * - [ ] When user send message to another one and that one is offline , get get notification
15 | after login agian that he has new message from sender user.
16 | 
17 | 
18 | > # Installation steps:
19 | 
20 | * make sure you have mysql , node js and npm installed in your operation system .
21 | * Create new database named chat .
22 | * Clone or Download the repository
23 | ```
24 | git clone https://github.com/amirhamdy4b/real-time-chat.git
25 | ```
26 | * Install Dependencies
27 | ```
28 | npm install
29 | npm install sequelize-cli -g
30 | ```
31 | * Edit configuration file in config/dbconfig.json with your credentials.
32 | * run migrations to create tables in database.
33 | ```
34 | * sequelize db:migrate --config config/dbconfig.json
35 | ```
36 | * run seeds to insert 5 new user in database to be used in the system.
37 | ```
38 | * sequelize db:seed:all --config config/dbconfig.json
39 | ```
40 | * Start the application
41 | ```
42 | * npm start
43 | ```
44 | Your app should now be running on localhost:3000.
45 | 


--------------------------------------------------------------------------------
/public/login.ejs:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 9 |     <meta name="description" content="">
10 |     <meta name="author" content="">
11 |     <link rel="icon" href="https://getbootstrap.com/docs/3.3/favicon.ico">
12 | 
13 |     <title>Signin Template for Bootstrap</title>
14 | 
15 |     <!-- Bootstrap core CSS -->
16 |     <link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
17 | 
18 |     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
19 |     <link href="https://getbootstrap.com/docs/3.3/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
20 | 
21 |     <!-- Custom styles for this template -->
22 |     <link href="https://getbootstrap.com/docs/3.3/examples/signin/signin.css" rel="stylesheet">
23 | 
24 |     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
25 |     <!--[if lt IE 9]><script src="https://getbootstrap.com/docs/3.3/assets/js/ie-emulation-modes-warning.js"></script><![endif]-->
26 |     <script src="https://getbootstrap.com/docs/3.3/assets/js/ie-emulation-modes-warning.js"></script>
27 | 
28 |     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
29 |     <!--[if lt IE 9]>
30 |     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
31 |     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
32 |     <![endif]-->
33 | </head>
34 | 
35 | <body>
36 | 
37 | <div class="container">
38 | 
39 |     <form class="form-signin">
40 |         <h2 class="form-signin-heading">Please sign in</h2>
41 |         <h4>To Enter System chat</h4>
42 |         <label for="inputEmail" class="sr-only">Email address</label>
43 |         <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
44 |         <label for="inputPassword"  class="sr-only">Password</label>
45 |         <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
46 |         <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
47 |     </form>
48 | 
49 | </div> <!-- /container -->
50 | 
51 | 
52 | <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
53 | <script src="https://getbootstrap.com/docs/3.3/assets/js/ie10-viewport-bug-workaround.js"></script>
54 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
55 | <script>
56 |   $('.btn').click(function (event) {
57 |       event.preventDefault();
58 |       console.log();
59 |       var URL = window.location.protocol + '//' + window.location.hostname+':'+window.location.port;
60 |       console.log(URL);
61 |       $.ajax({
62 |           method: "POST",
63 |           url: URL+"/api/login",
64 |           data: $('form').serializeArray()
65 |       }).done(function( msg ) {
66 |             if(msg.success){
67 |                 window.location= "http://127.0.0.1:7000/chat?token="+msg.userToken+"";
68 |             }
69 |       }).fail(function (error) {
70 |           console.log(error.responseText);
71 |           $('button').after('<p style="color:red;">'+JSON.parse(error.responseText).message+'</p>');
72 |       });
73 | 
74 |   });
75 | </script>
76 | </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | "user strict";
 2 | 
 3 | var express = require('express');
 4 | var app = express();
 5 | var bodyParser = require('body-parser');
 6 | var routesConfig = require('./routes/index');
 7 | var open = require("open")
 8 | , server = require('http').createServer(app)
 9 | , io = require("socket.io")(server)
10 | ,model = require('./models/index');
11 | var jwt    = require('jsonwebtoken');
12 | var appSeckertKey = require('./config/appConfig').secret;
13 | 
14 | const PORT = process.env.port || 7000;
15 | const URL = '127.0.0.1';
16 | app.set('views', __dirname + '/public');
17 | app.use(express.static(__dirname + '/public'));
18 | app.use(express.static(__dirname+'/public/images'));
19 | app.use(bodyParser.urlencoded({ extend: false}));
20 | app.use(bodyParser());
21 | app.set('view engine', 'ejs');
22 | 
23 | 
24 | 
25 | 
26 | routesConfig(app);
27 | 
28 | io.use((socket, next) => {
29 |     let token = socket.handshake.query.token;
30 |     jwt.verify(token, appSeckertKey, (err, decoded) => {
31 |         if (err) {
32 |             console.log(err);
33 |             return next(new Error('authentication error'));
34 |         }
35 | 
36 |         socket.decodedtoken = decoded;
37 |         return next();
38 |     });
39 | });
40 | io.of('/chat').on('connection', function(socket) {
41 |     console.log('a user connected');
42 |     console.log(socket.id);
43 | 
44 |     jwt.verify(socket.handshake.query.token, appSeckertKey, (err, decoded) => {
45 |         let decodedToken = decoded;
46 | 
47 |         model.users.update({'isActive': 1, 'socketID': socket.id}, {where: {'id': decodedToken.user_id}})
48 |             .then(user => {
49 |                 console.log('user is online');
50 |                 socket.broadcast.emit('online User', decodedToken.user_id);
51 |             });
52 | 
53 |         socket.on('disconnect', function (data) {
54 |             model.users.update({'isActive': 0, 'socketID': null}, {where: {'id': decodedToken.user_id}}).then(user => {
55 |                 console.log('user is offline');
56 |                 socket.broadcast.emit('disconnected User', decodedToken.user_id);
57 |             });
58 |             console.log('user disconnected');
59 |             socket.emit('disconnected');
60 |         });
61 | 
62 |         socket.on('message', function (msg) {
63 |             console.log('new message');
64 |             model.users.findOne({where: {'id': decodedToken.user_id}}).then(user => {
65 |                 socket.to(msg.conversation_id).emit('new message',
66 |                     {
67 |                         message_body: msg.message_body, user: {avatarPath: user.avatarPath, first_name: user.first_name},
68 |                         created_at: msg.created_at
69 |                 });
70 |                 socket.emit(msg.conversation_id,message);
71 |             });
72 | 
73 |             model.users.findOne({where: {'id': msg.receiver_id}}).then(user => {
74 |                 socket.to(user.socketID).emit('notify', {
75 |                     message_body: msg.message_body, sender_id: decodedToken.user_id,
76 |                     created_at: msg.created_at
77 |                 });
78 |             });
79 |         });
80 | 
81 | 
82 |         socket.on('join room', function (roomname) {
83 |             console.log('joined room ' + roomname);
84 |             socket.join(roomname);
85 |         });
86 | 
87 | 
88 |     });
89 | });
90 | 
91 | server.listen(PORT, function (error) {
92 |     if(error)
93 |         console.log(error);
94 |     console.log(`The Server Is Running ${URL}:${PORT}`);
95 |     open(`http://${URL}:${PORT}`, "chrome");
96 | });


--------------------------------------------------------------------------------
/routes/chatRoutes.js:
--------------------------------------------------------------------------------
  1 | "user strict";
  2 | var express = require('express');
  3 | var chatRouter = express.Router();
  4 | var jwt    = require('jsonwebtoken');
  5 | var appSeckertKey = require('../config/appConfig').secret;
  6 | var model = require('../models/index');
  7 | 
  8 | chatRouter.use(function(req, res, next) {
  9 |     var token = req.body.token || req.query.token || req.headers['x-access-token'];
 10 |     if(!token)
 11 |         return res.status(403).json({success: false, message: 'No token provided.'});
 12 | 
 13 |     jwt.verify(token, appSeckertKey, (err, decoded) => {
 14 |         if (err) {
 15 |             return res.status(403).json({ success: false, message: 'Failed to authenticate token.' });
 16 |         } else {
 17 |             // if everything is good, save to request for use in other routes
 18 |             req.decoded = decoded;
 19 |             next();
 20 |         }
 21 |     });
 22 | 
 23 | });
 24 | 
 25 | chatRouter.post('/users', function(req, res){
 26 |     model.users.findAll({ where: {'id':{$ne: req.decoded.user_id}},
 27 |         include:[{
 28 |             model: model.messages,
 29 |             as: 'userMessages',
 30 |             order: [['id', 'DESC']],
 31 |             limit: 1}],
 32 |         order: [['id', 'DESC'],]
 33 |     }).then( users => {
 34 |         return res.status(200).json({success: true, message: users});
 35 |     }).catch( error => {
 36 |         return res.status(400).json({success: false, message: error });
 37 |     });
 38 | });
 39 | 
 40 | 
 41 | chatRouter.post('/messages', function(req, res){
 42 |     var message = {'message_subject':'private Message', 'message_body':req.body.message_body,
 43 |         'sender_id': req.decoded.user_id, 'receiver_id':req.body.receiver_id, 'conversation_id': req.body.conversation_id,
 44 |         'delivered': 0};
 45 |      model.messages.create(message)
 46 |         .then(userMessages => {
 47 |             model.users.findOne({where: { 'id': req.decoded.user_id }}).then( user => {
 48 |                 message['user']= {avatarPath: user.avatarPath, first_name: user.first_name};
 49 |                 message['created_at']= userMessages.created_at;
 50 |                 console.log(message);
 51 |                 return  res.status(200).json(message  );
 52 |             });
 53 |         }).catch(error => res.status(400).json(error));
 54 | });
 55 | 
 56 | 
 57 | chatRouter.post('/chat/:id', function(req, res){
 58 |     return model.messages.findAll({
 59 |             where:{
 60 |                 $or:[
 61 |                     {'sender_id': req.params.id, 'receiver_id': req.decoded.user_id},
 62 |                     {'sender_id': req.decoded.user_id, 'receiver_id': req.params.id},
 63 |                 ]
 64 |             }, include: [{
 65 |                     model: model.users,
 66 |                     as :'user'
 67 |             }]
 68 |         }).then(userMessages =>  res.status(200).json( userMessages))
 69 |           .catch(error => res.status(400).json(error));
 70 | });
 71 | 
 72 | 
 73 | 
 74 | // chatRouter.post('/mymessages', function(req, res){
 75 | //     // console.log(req.decoded);
 76 | //     model.users.findAll({where:{'id':{$ne: req.decoded.user_id}},include:[{
 77 | //         model: model.messages,
 78 | //         as: 'userMessages',
 79 | //         order: [
 80 | //             ['id', 'DESC'],
 81 | //         ],
 82 | //         limit: 1
 83 | //     }],order: [
 84 | //         ['id', 'DESC'],
 85 | //     ],}).then( users => {
 86 | //         model.messages.findAll({where:{ $or: [
 87 | //             {'sender_id': users[0].id, 'receiver_id': '2'},
 88 | //             {'sender_id': '2', 'receiver_id': users[0].id}
 89 | //         ]},
 90 | //             include:[{
 91 | //                 model:model.users,
 92 | //                 as: 'user'
 93 | //             }]}).then( userMessages => {
 94 | //             // res.render('chat', {'users': users,userMessages: userMessages});
 95 | //             return res.status(200).json({success: true, users: users, userMessages: userMessages});
 96 | //         });
 97 | //     });
 98 | //
 99 | // });
100 | 
101 | // chatRouter.post('/singleThread', function(req, res){
102 | //     var msg = req.body;
103 | //     return model.messages.findAll({
104 | //         where:{
105 | //             $or:[
106 | //                 {'sender_id': msg.talkTo, 'receiver_id': req.decoded.user_id},
107 | //                 {'sender_id': req.decoded.user_id, 'receiver_id': msg.talkTo},
108 | //
109 | //             ]
110 | //         },
111 | //         include: [
112 | //             {
113 | //                 model: model.users,
114 | //                 as :'user'
115 | //             }
116 | //         ]}).then(userMessages =>  res.status(200).json(userMessages))
117 | //         .catch(error => res.status(400).json(error));
118 | // });
119 | module.exports = chatRouter;


--------------------------------------------------------------------------------
/public/chat.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <!--  This file has been downloaded from bootdey.com    @bootdey on twitter -->
  6 |     <!--  All snippets are MIT license http://bootdey.com/license -->
  7 |     <!-- 
  8 |       The codes are free, but we require linking to our web site.
  9 |       Why to Link?
 10 |       A true story: one girl didn't set a link and had no decent date for two years, and another guy set a link and got a top ranking in Google! 
 11 |       Where to Put the Link?
 12 |       home, about, credits... or in a good page that you want
 13 |       THANK YOU MY FRIEND!
 14 |     -->
 15 |     <title>chat room - Bootdey.com</title>
 16 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 17 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 18 |     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 19 |     <!-- <link href="style.css" rel="stylesheet"> -->
 20 | <style type="text/css">
 21 |       body {
 22 |         padding-top: 0;
 23 |         font-size: 12px;
 24 |         color: #777;
 25 |         background: #f9f9f9;
 26 |         font-family: 'Open Sans',sans-serif;
 27 |         margin-top:20px;
 28 |       }
 29 | 
 30 |       .bg-white {
 31 |         background-color: #fff;
 32 |       }
 33 | 
 34 |       .friend-list {
 35 |         list-style: none;
 36 |         margin-left: -40px;
 37 |         border: 1px dodgerblue;
 38 |       }
 39 | 
 40 |       .friend-list li {
 41 |         border-bottom: 1px solid #eee;
 42 |       }
 43 | 
 44 |       .friend-list li a img {
 45 |         float: left;
 46 |         width: 45px;
 47 |         height: 45px;
 48 |         margin-right: 10px;
 49 |       }
 50 | 
 51 |        .friend-list li a {
 52 |         position: relative;
 53 |         display: block;
 54 |         padding: 10px;
 55 |         transition: all .2s ease;
 56 |         -webkit-transition: all .2s ease;
 57 |         -moz-transition: all .2s ease;
 58 |         -ms-transition: all .2s ease;
 59 |         -o-transition: all .2s ease;
 60 |       }
 61 | 
 62 |       .friend-list li.active a {
 63 |         background-color: #f1f5fc;
 64 |       }
 65 | 
 66 |       .friend-list li a .friend-name, 
 67 |       .friend-list li a .friend-name:hover {
 68 |         color: #777;
 69 |       }
 70 | 
 71 |       .friend-list li a .last-message {
 72 |         width: 65%;
 73 |         white-space: nowrap;
 74 |         text-overflow: ellipsis;
 75 |         overflow: hidden;
 76 |       }
 77 | 
 78 |       .friend-list li a .time {
 79 |         position: absolute;
 80 |         top: 20px;
 81 |         right: 8px;
 82 |       }
 83 | 
 84 |       small, .small {
 85 |         font-size: 85%;
 86 |       }
 87 | 
 88 |       .friend-list li a .chat-alert {
 89 |         position: absolute;
 90 |         right: 30px;
 91 |         top: 3px;
 92 |         font-size: 10px;
 93 |         padding: 3px 5px;
 94 |       }
 95 | 
 96 |       .chat-message {
 97 |         /*padding: 60px 20px 0px;*/
 98 |       }
 99 | 
100 |       .chat {
101 |           list-style: none;
102 |           margin: 0;
103 |       }
104 | 
105 |       .chat-message{
106 |           background: #f9f9f9;  
107 |       }
108 | 
109 |       .chat li img {
110 |         width: 45px;
111 |         height: 45px;
112 |         border-radius: 50em;
113 |         -moz-border-radius: 50em;
114 |         -webkit-border-radius: 50em;
115 |       }
116 | 
117 |       img {
118 |         max-width: 100%;
119 |       }
120 | 
121 |       .chat-body {
122 |         padding-bottom: 20px;
123 |       }
124 | 
125 |       .chat li.left .chat-body {
126 |         margin-left: 70px;
127 |         background-color: #fff;
128 |       }
129 | 
130 |       .chat li .chat-body {
131 |         position: relative;
132 |         font-size: 11px;
133 |         padding: 10px;
134 |         border: 1px solid #f1f5fc;
135 |         box-shadow: 0 1px 1px rgba(0,0,0,.05);
136 |         -moz-box-shadow: 0 1px 1px rgba(0,0,0,.05);
137 |         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
138 |       }
139 | 
140 |       .chat li .chat-body .header {
141 |         padding-bottom: 5px;
142 |         border-bottom: 1px solid #f1f5fc;
143 |       }
144 | 
145 |       .chat li .chat-body p {
146 |         margin: 0;
147 |       }
148 | 
149 |       .chat li.left .chat-body:before {
150 |         position: absolute;
151 |         top: 10px;
152 |         left: -8px;
153 |         display: inline-block;
154 |         background: #fff;
155 |         width: 16px;
156 |         height: 16px;
157 |         border-top: 1px solid #f1f5fc;
158 |         border-left: 1px solid #f1f5fc;
159 |         content: '';
160 |         transform: rotate(-45deg);
161 |         -webkit-transform: rotate(-45deg);
162 |         -moz-transform: rotate(-45deg);
163 |         -ms-transform: rotate(-45deg);
164 |         -o-transform: rotate(-45deg);
165 |       }
166 | 
167 |       .chat li.right .chat-body:before {
168 |         position: absolute;
169 |         top: 10px;
170 |         right: -8px;
171 |         display: inline-block;
172 |         background: #fff;
173 |         width: 16px;
174 |         height: 16px;
175 |         border-top: 1px solid #f1f5fc;
176 |         border-right: 1px solid #f1f5fc;
177 |         content: '';
178 |         transform: rotate(45deg);
179 |         -webkit-transform: rotate(45deg);
180 |         -moz-transform: rotate(45deg);
181 |         -ms-transform: rotate(45deg);
182 |         -o-transform: rotate(45deg);
183 |       }
184 | 
185 |       .chat li {
186 |         margin: 15px 0;
187 |       }
188 | 
189 |       .chat li.right .chat-body {
190 |         margin-right: 70px;
191 |         background-color: #fff;
192 |       }
193 | 
194 |       .chat-box {
195 |           position: relative;
196 |         bottom: 0;
197 |         right: 0;
198 |         padding: 15px;
199 |         border-top: 1px solid #eee;
200 |         transition: all .5s ease;
201 |         -webkit-transition: all .5s ease;
202 |         -moz-transition: all .5s ease;
203 |         -ms-transition: all .5s ease;
204 |         -o-transition: all .5s ease;
205 |       }
206 | 
207 |       .primary-font {
208 |         color: #3c8dbc;
209 |       }
210 | 
211 |       a:hover, a:active, a:focus {
212 |         text-decoration: none;
213 |         outline: 0;
214 |       }
215 |     <!-- -->
216 |       .led-box {
217 |           height: 30px;
218 |           width: 25%;
219 |           margin: 10px 0;
220 |           float: left;
221 |       }
222 | 
223 |       .led-box p {
224 |           font-size: 12px;
225 |           text-align: center;
226 |           margin: 1em;
227 |       }
228 | 
229 |       @-webkit-keyframes blinkRed {
230 |           from { background-color: #F00; }
231 |           50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
232 |           to { background-color: #F00; }
233 |       }
234 |       @-moz-keyframes blinkRed {
235 |           from { background-color: #F00; }
236 |           50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
237 |           to { background-color: #F00; }
238 |       }
239 |       @-ms-keyframes blinkRed {
240 |           from { background-color: #F00; }
241 |           50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
242 |           to { background-color: #F00; }
243 |       }
244 |       @-o-keyframes blinkRed {
245 |           from { background-color: #F00; }
246 |           50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
247 |           to { background-color: #F00; }
248 |       }
249 |       @keyframes blinkRed {
250 |           from { background-color: #F00; }
251 |           50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
252 |           to { background-color: #F00; }
253 |       }
254 | 
255 |       @-webkit-keyframes blinkYellow {
256 |           from { background-color: #FF0; }
257 |           50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
258 |           to { background-color: #FF0; }
259 |       }
260 |       @-moz-keyframes blinkYellow {
261 |           from { background-color: #FF0; }
262 |           50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
263 |           to { background-color: #FF0; }
264 |       }
265 |       @-ms-keyframes blinkYellow {
266 |           from { background-color: #FF0; }
267 |           50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
268 |           to { background-color: #FF0; }
269 |       }
270 |       @-o-keyframes blinkYellow {
271 |           from { background-color: #FF0; }
272 |           50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
273 |           to { background-color: #FF0; }
274 |       }
275 |       @keyframes blinkYellow {
276 |           from { background-color: #FF0; }
277 |           50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
278 |           to { background-color: #FF0; }
279 |       }
280 | 
281 |       .led-green {
282 |           position: absolute;
283 |           top: 2px;
284 |           right: 3px;
285 |           margin: 0 auto;
286 |           width: 12px;
287 |           height: 12px;
288 |           background-color: #ABFF00;
289 |           border-radius: 50%;
290 |           box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
291 |       }
292 |       .input-group{
293 |           display: block;
294 |       }
295 | </style>
296 | </head>
297 |   <script src="/socket.io/socket.io.js"></script>
298 |   <script>
299 |     var socket = io(window.location.href);
300 | //    console.log(socket);
301 | 
302 |     socket.on('error', function(err) {
303 |         throw new Error(err);
304 |     });
305 |     socket.on('online User',function (data) {
306 |         $('.'+data).css('display','block');
307 |     });
308 | 
309 |     socket.on('disconnected User', function (data) {
310 |         $('.'+data).css('display','none');
311 |     });
312 | 
313 |     socket.on('notify', function (data) {
314 |         console.log('notify');
315 |         console.log(data);
316 |         $('#oneMem'+data.sender_id).css('class','active');
317 |         $('.message_body'+data.sender_id).text(data.message_body);
318 |         $('.chat-alert'+data.sender_id).show();
319 |         console.log('notify');
320 |     });
321 | 
322 |     socket.on('new message', function(msg){
323 |         console.log('new message');
324 |         console.log(msg);
325 |         var direction = 'right';
326 |         console.log('message in room');
327 |         console.log(msg);
328 |         messageElement(msg , direction);
329 |     });
330 | 
331 |     var genericPort = 7000;
332 |     var domain = "http://127.0.0.1";
333 |     var images_root_path = "http://127.0.0.1:7000";
334 |     var serverAddress = 'http://127.0.0.1:7000';
335 |   </script>
336 | <body onload="loadMyMessages();" id="body_id">
337 | <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
338 | <div class="container bootstrap snippet">
339 |     <div class="row">
340 |     <div class="col-md-4 bg-white ">
341 |             <div class=" row border-bottom padding-sm" style="height: 40px;">
342 |               Messages
343 |             </div>
344 |             
345 |             <!-- =============================================================== -->
346 |             <!-- member list -->
347 |            <!--  <a href="#" onclick="newMessage('147');" >
348 |             <i style="float: right;margin-top: -15px;margin-right: 5px;" class="fa fa-plus-square" aria-
349 |             hidden="true"></i>
350 |             </a> -->
351 |             <ul class="friend-list" id="member_area">
352 | 
353 |             </ul>
354 |     </div>
355 |         
356 |         <!--=========================================================-->
357 |         <!-- selected chat -->
358 |       <div class="col-md-8 bg-white ">
359 |             <div class="chat-message">
360 |                 <ul class="chat" id="messages" style="height: 900px;overflow-y: scroll;">
361 | 
362 |                 </ul>
363 |             </div>
364 |             <div class="chat-box bg-white">
365 |               <div class="input-group">
366 |                 <input style="" class="form-control border no-shadow no-rounded" id="m" placeholder="Type your message here">
367 | 
368 |                 <span class="input-group-btn">
369 |                 
370 |                   <button style="display: none;" id="sub" class="btn btn-success no-rounded" type="button">Send</button>
371 |                 </span>
372 |               </div><!-- /input-group --> 
373 |             </div>            
374 |     </div>        
375 |   </div>
376 | </div>
377 | 
378 | <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
379 | <script>
380 | var URL = window.location.protocol + '//' + window.location.hostname+':'+window.location.port;
381 | var active_rooms = [] ;
382 | var genericPort = 2020;
383 |   function messageElement(text,direction){
384 |       console.log(text);
385 |      var message = '<li class="'+direction+' clearfix">';
386 |          message +='<span class="chat-img pull-'+direction+'">';
387 |           message +='<img src="'+text['user'].avatarPath+'" alt="User Avatar">';
388 |         message +='</span>'
389 |         message +='<div class="chat-body clearfix">';
390 |           message +='<div class="header">';
391 |              message +='<strong class="primary-font">'+text['user'].first_name+'</strong>';
392 |              message +='<small class="pull-right text-muted">';
393 |              message +='<i class="fa fa-clock-o" style="margin-right: 5px;"></i>'+text.created_at+'</small>';
394 |           message +='</div>';
395 |           message +='<p>';
396 |            message +=text.message_body;
397 |           message +='</p>';
398 |         message +='</div>';
399 |         message +='</li>';
400 | 
401 |      $('#messages').append(message);
402 |   }
403 |   
404 |   function displayMember(user, elementClass) {
405 |        var newMember =  '<li id="oneMem'+ user.id+'" class= "'+elementClass+'" onclick="displayThread('+user.id+')">' +
406 |            '<a href="#" class="clearfix">' +
407 |                 '<img src="' + user.avatarPath +' " alt="" class="img-circle">' +
408 |            '<div class="friend-name">' +
409 |                 '<strong>' + user.first_name + '</strong>' +
410 |            '</div>';
411 |             if (user['userMessages'].length > 0)
412 |                 newMember += '<div class="last-message text-muted message_body'+user.id+'">' + user["userMessages"][0].message_body + '</div>';
413 |             else
414 |                 newMember += '<div class="last-message text-muted"></div>';
415 |             newMember += '<div class="led-box ' + user.id + ' " ';
416 |             if (user.isActive)
417 |                 newMember += 'style=" display: block;" >';
418 |             else
419 |                 newMember += 'style=" display: none;" >';
420 |              newMember += '<div class="led-green">' +
421 |                         '</div>' +
422 |                     '</div>' +
423 |                 '<small class="chat-alert chat-alert'+user.id+' label label-danger" style="display: none;">1</small>' +
424 |                 '</a>' +
425 |                 ' </li>';
426 |       $('#member_area').append(newMember);
427 |   }
428 | 
429 |   function loadMyMessages(){
430 |     $.ajax({
431 |         method: "POST",
432 |         url: URL+"/api/users?token="+window.location.href.split('=')[1],
433 |         }).done(function( data ) {
434 |             console.log(data);
435 |             if (data.success){
436 |                 data.message.forEach(function (user, key) {
437 |                     var elementClass= '';
438 |                     if (key == 0 )
439 |                         elementClass= 'active';
440 |                     displayMember(user, elementClass);
441 |                 });
442 |                 $('ul li:first').trigger('click');
443 |             }
444 |     });
445 |   }
446 | 
447 |   var lastActiveClass = '';
448 |   var activeRoom = 'empty';
449 |   var activeReceiver = '';
450 |   function initiateSockets(room, receiver_id){
451 |       console.log('Room : '+room);
452 | 
453 |       activeRoom = room;
454 |       activeReceiver = receiver_id;
455 |       socket.emit('join room',activeRoom);
456 | 
457 | 
458 |   }
459 | 
460 |   $("input").keypress(function(event) {
461 |       if (event.which == 13) {
462 |           var message = {'message_body': $('#m').val(),created_at: new Date() ,'receiver_id': activeReceiver, 'conversation_id': activeRoom};
463 | 
464 |           socket.emit('message',message);
465 |           $.ajax({
466 |               method: "POST",
467 |               url: URL+"/api/messages?token="+window.location.href.split('=')[1],
468 |               data: {'message_body': $('#m').val(), 'receiver_id': activeReceiver, 'conversation_id': activeRoom}
469 |           }).done(function( msg ) {
470 |               console.log('saved message');
471 |               messageElement(msg, 'right');
472 |           });
473 | 
474 |           $('#m').val('');
475 | 
476 |           var objDiv = document.getElementById("body_id");
477 |           objDiv.scrollTop = objDiv.scrollHeight;
478 | 
479 |           var objDiv = document.getElementById("messages");
480 |           objDiv.scrollTop = objDiv.scrollHeight;
481 |       }
482 |   });
483 | 
484 | 
485 | 
486 |   function generateMessageUniqueIdentifier(){
487 |        var text = "";
488 |        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
489 |        for( var i=0; i < 6; i++ )
490 |             text += possible.charAt(Math.floor(Math.random() * possible.length));
491 |         return text;
492 |   }
493 | 
494 |   function displayThread(receiver_id) {
495 |       console.log('element clicked');
496 |       console.log($('#oneMem'+receiver_id).hasClass('active'));
497 | 
498 |       $('.friend-list > li').attr('class','');
499 |       $('#messages').html("");
500 |       $.ajax({
501 |           method: "POST",
502 |           url: URL+"/api/chat/"+receiver_id+"?token="+window.location.href.split('=')[1],
503 |       }).done(function( msg ) {
504 | 
505 |           for (var i = 0; i < msg.length; i++) {
506 |               var direction = 'left';
507 |               var member = '';
508 |               if(msg[i].sender_id != receiver_id) direction = 'right';
509 |               var member = messageElement(msg[i],direction);
510 |               $('#messages').append(member);
511 |           }
512 |           var conv= '';
513 |           if(msg.length > 0)
514 |               conv = msg[0].conversation_id;
515 |           else
516 |               conv = generateMessageUniqueIdentifier();
517 | 
518 |           console.log(receiver_id);
519 |           // $('#sub').css('display','block');
520 |           $('#m').css('display','block');
521 |           if(lastActiveClass ==''){
522 |               $( "#oneMem"+receiver_id ).addClass( "active" );
523 |               lastActiveClass = "oneMem"+receiver_id;
524 |           }
525 |           else{
526 |               $( "#oneMem"+receiver_id ).addClass( "active" );
527 |               $( "#"+lastActiveClass ).removeClass( "active" );
528 |               lastActiveClass =  "oneMem"+receiver_id;
529 |           }
530 |           initiateSockets(conv,receiver_id);
531 |         });
532 |   }
533 |   </script>
534 | </body>
535 | </html>
536 | 


--------------------------------------------------------------------------------