chat-window-web

• A customizable chat window to be integrated into web sites.
• Made with Node.js , socket.io and MongoDB.
• Chat window FAB remains fixed on scroll, can be clicked to open the window and start chatting.
• User is prompted to enter name and email on first visit which is stored in localstorage along with all his chats and is fetched on next visit to continue chat from that point.
• A new chat section is added dynamically in the admin panel whenever a new client connects and if the client is a returning user, his messages are added to his previous chat history.

Pre-requisites

• MongoDB
• Node.js

Quick Start

• Clone this repository on your local machine.

• cd to this repository and enter npm install in the terminal to install all dependencies.

• Enter mongo in your terminal and make a collection named chat to store messages and a collection named users to store user details. (not necessary )

• Change the name of the collection in the server.js(9th line onwards) according to the names of your collections.

• Open another terminal, cd to this repo and shoot up a node server by typing node server.js and a python server by typing python-m SimpleHTTPServer (specify the port if required, default is 8000).

• Open your browser and go to localhost:8080/chat.html and in another window open localhost:8080/admin-2.html

• User is prompted to enter name and email on first visit which is stored in localstorage, check whether it is being stored or not and messages are being received on the admin panel or not.

• Start chatting and check whether the messages are being communicated properly or not by using db.collection.find() in your mongo CLI. (replace collection by your collection name, say messages)

• Customize the server.js file to change storage and access methods. (right now , every message is stored as an object with the fields name : 'name of sender', message : 'message content', uid : 'user id', createdOn : 'timestamp')

Demo screenshots

• After you have successfully followed the steps mentioned above, you should see a FAB at the address localhost:8000/chat.html like this.

• Click on the FAB to open a chat window. For first time users, it asks your name and email (even validates the email and prompts you to enter again if wrong). It connects you to an admin if someone is online from the admin panel(checked by emitting a unique hashed string from admin account) or simply prompts you to leave your message if admin is offline.

• Every time a new client is added, his name and chat history div is added dynamically to the client list. For returning users, the message is sent to the existing chat history div. The admin can switch among chats simply by clicking on the names of the clients in the client list. The last screenshot represents a returning user.

• All of the messages and the user information is stored in localstorage on the client end to recognize returning users and fetch their older messages. On the admin end, the messages are fetched directly from the database by making use of client id to recognize the messages of different clients.