/chatRoom

A server-client demo for implementing websockets protocol

Primary LanguageCSSMIT LicenseMIT

Chat Room Demo

A demo implementation of a chat room that is using websockets protocol with socket.io, firebase, React and Redux

Commands

  • yarn server to start server
  • yarn startDev for both client and server. Then visit demo app in http://localhost:1234/demo/
  • yarn build to build client
  • yarn visualize to build graph

Internal stucture

Here is a chart of how the package is set up:

  • info https://www.netlify.com/blog/2018/08/23/how-to-easily-visualize-a-projects-dependency-graph-with-dependency-cruiser/

Steps

  • yarn
  • Try yarn visualize. If it fails install system dependency sudo apt install graphviz and try again.
  • Create graph folder in ./graph path
  • dependencygraph.svg is generated in ./graph folder

Graph

Env variables

If you want to use it in your machine you have to configure firebase settings with environment variables. Please see the example below. The values have to be replaced by the values of your app. Place these values in ~/.profile files and restart your machine to activate.

  • export APIKEY=XXXXXXXXXXXXXXXX
  • export AUTHDOMAIN=XXXXXXXXXXXXXXXX
  • export DATABASEURL=XXXXXXXXXXXXXXXX
  • export PROJECTID=XXXXXXXXXXXXXXXX
  • export STORAGEBUCKET=XXXXXXXXXXXXXXXX
  • export MESSANGINSSENDERID=XXXXXXXXXXXXXXXX

Puppeteer and CircleCI

  • https://github.com/xfumihiro/jest-puppeteer-example

TODOS

  • Keep messages on refresh
  • Keep login status on refresh
  • Add validation
  • Tests -- puppeteer
    • Setup
    • Add tests
  • Deploy to server
  • Automation / CI--> Add Circle CI
  • Filter and enable small emoticons
  • Add which user is typing info in a layer
  • Use it with electron --> this may not be implemented
  • Storybook
  • Add firebase database and a sidebar list of users in chat room
    • Model user in DB. User will have firstname, lastname, status (active/away/inactive). Status will be configured through a small pop up from list. Status will be configured only by the matching user that has the permission to do it
    • Save user in firebase DB on login
    • Get all users on display rendering and show them in BS table
    • Delete User from Database on logout
    • setup node env for firebase and production
    • bug fix for build files with firebase --> removed package dependency and added it as external one with injecting scripti in index.html
  • Logout after an amount of time where the system is idle
    • Detect no key and no mouse interaction
    • Detect no focus
  • Attach files / images etc --> this may not be implemented
  • Add more stories

NOTES

  • To start client and server with single command: https://kb.iu.edu/d/afnz
  • Online Demo: https://chatroomsimpledemo.herokuapp.com/
  • Firebase tutorials: https://www.robinwieruch.de/react-firebase-realtime-database/
  • https://www.npmjs.com/package/firebase
  • https://howtofirebase.com/save-and-query-firebase-data-ed73fb8c6e3a
  • https://gist.github.com/anantn/4325082