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

realtimechat's Introduction

Patternfly-Chat

Patternfly-Chat is a real time chat application that allows realtime communication for groups and individuals.

It features an architecture comprised of a frontend, a cache micro service, a redis cache, and an instance of a keycloak server.

The authentication side is leveraged by Keycloak and which makes management of client applications, users, and assignment of permissions and roles extremely simple. Management of application concurrency is handled by the cache micro service which relies on composite key and streaming features of redis.

The frontend communicates directly to keycloak server and the cache.

The frontend is React and the Cache is Node with es6 mods.

Build Cache Service

docker build -t cacheservice:chatapp . docker build -t frontend:chatapp .

Backend API

Cache API, assuming the Cache is running on http://localhost:3332.

Set Key in Cache

Ex. Store birthMonth to July and give it a time to live of 10 minutes

curl http://localhost:3332/store/600/birthMonth\?value=July

Get Key from Cache

Ex. get birthMonth

curl http://localhost:3332/name/birthMonth

Delete Key

Ex. Delete birthMonth

curl http://localhost:3332/delete/birthMonth

Fetch All Keys

curl http://localhost:3332/all


Set Up

All of the resources used in this app are run in docker containers. Everything is accessible locally and extremely simple and fast to spin up.

Cache Service

docker run -d -p 6379:6379 redis

Auth Service

docker run -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin -e DB_VENDOR=H2 jboss/keycloak

username: admin, password: admin

[Login|width=100px]

Hover your mouse over the top of the left panel where is says "master" and a button will appear that says Add Realm.

Add Realm

Upload config file from realm-export.json from KeyCloak/Realms/realm-export.json

Upload Config


Front End

npm i && npm start

Cache

cd Cache;


npm i && npm start


realtimechat's People

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

realtimechat's Issues

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

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.

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.

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

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.

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

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.