GithubHelp home page GithubHelp logo

myapos / chatroom Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 4.1 MB

A server-client demo for implementing websockets protocol

License: MIT License

JavaScript 15.79% HTML 0.09% CSS 84.11% Shell 0.01%

chatroom's Introduction

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

chatroom's People

Contributors

myapos avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.