Giter Club home page Giter Club logo

cmwylie19 / realtimechat Goto Github PK

View Code? Open in Web Editor NEW
5.0 2.0 5.0 23.56 MB

An application that utilizes a caching strategies to manage concurrent users. Relies on rest and socket protocols for communication and keycloak for authentication. Written in React and Node. This app was developed as in conjunction with a blog, url of the blog coming soon!

HTML 1.73% CSS 3.08% JavaScript 54.05% Dockerfile 0.01% TypeScript 41.12%
reactjs keycloak curl docker react keycloak-instance cache nodejs patternfly socket-io socketio socket-io-client socket-io-server cache-strategy

realtimechat's Issues

Remove Sessions from Cache Upon User Logout

Clean up the cache system and remove the sessions from the cache as soon as users logout.

Spawn two websocket events for LOGIN and LOGOUT and adjust the cache when the state of the concurrent users changes.

Second: Write a Cache Subscriber, that is subscribed to the state of the cache and will notify and change the cache automatically upon changes.

Landing Page for Unauthenticated Users

Created a landing page that does not require authentication.

Requirements

  • Incorporates the theme changer but in minimal form, like the other components, no drastic changes in theme.
  • Has animations that are triggered by during non-active times.
  • Has a button for signing back on.

Images for users

write a component in the top nav bar for uploading user images. The component should be a modal where the user can add attributes to their user.

There is an endpoint in the Cache app that allows you to point out remove images and the node service downloads the resources. They will be in the public directory of the cache site and the names need to be intuitive so they will be easy to pull during the login process.

The image will sit in the top nav bar and there will be a component for editing and changing images.

Update chat message component in the DashboardContainer

The chat bubbles sometimes render without the text inside.

To provider more detail. When you have the app running and all the latest code pulled, you will notice the very first Chat send renders in a small circle without text.

I have trimmed the message of null and whitespace already.

Update user reducer with keycloak session info

Take user info from keycloak object and store into the UserReducer.

  • realmAccess roles
  • resourceAccess account roles
  • token
  • idToken
  • refreshToken
  • idTokenParsed- email
  • idTokenParsed- name
  • idTokenParsed- preferred_username
  • idTokenParsed- given_name
  • idTokenParsed- family_name

Containerize Application

To container the app, we will need:
Check the README.md file for how to pull and use the redis and keycloak containers.

  • Dockerfile for the frontend
  • Dockerfile for the cache service
  • docker-compose.yml file to start the
    - Redis Container
    - keycloak server container
    - frontend
    - redis micro-service

Current Sessions from Cache

Upon being redirect tp DashboardContainer, call the cache endpoint to get all sessions.

  • call all sessions endpoint
  • Populate left panel with current usernames

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.