Code Monkey home page Code Monkey logo

blobchat's Introduction

BlobChat

BlobChat is a minimalist and elegant chat app.

  1. Make a post and talk about anything you want.
  2. Blob will find similar posts made by other users. Select another user's post and start chatting.
  3. Chat for as long as you wish until there's no new response from either party for longer than 3 days (in demo it's set to 60 seconds).

Make a post

Technology Used

The local server/client setup to support a web application.

  • NodeJS
  • SocketIO
  • Express

Redis Modules

  • Redis - to store posts and chat messages -Redis Search- to index and explore potential matches.

Build Locally

Step 1. Clone the repo to your local directory and start the application

git clone https://github.com/redis-developer/BlobChat

Step 2. Build Docker images locally.

docker-compose build

Step 3. Start the Redis server.

docker-compose up -d

Step 4. Install the npm dependencies.

npm install

Step 5. Start the chat client (with nodemon).

npm run start

Now you can go to http://localhost:5000/ to start.

How to Blob

Find a match Enjoy a chat

For the simplicity of the demonstration, some logic have been altered:

  • Pre-populated sample posts are in [/public/sample_posts.json].
  • Chat timeouts in 60s instead of 3 days. History is not automatically cleared in the UI, but refreshing the page will do.

Redis Command Explained

Posts (Redis Hash, Redis Search)

FT.CREATE Create aRedis Searchindex on all posts (key prefix post) and make the content of the posts full-text searchable. e.g. Redis: FT.CREATE posts_idx ON HASH PREFIX 1 post SCHEMA content TEXT

HSET When user creates a new post, store the content with the username. e.g. Redis: HSET post_CookieMonster username CookieMonster content "A brown fox jumps over the fence."

FT.SEARCH Search among existing posts in Redis Search for similar posts. e.g. Redis: FT.SEARCH posts_idx "what | a | lovely | day"

Chat (Redis List)

RPUSH Add a new message to the bottom of the chat history between two users. e.g. Redis: RPUSH messages fromUser:toUser:Hi

EXPIRE Set the conversation history to expire. e.g. Redis: EXPIRE messages 60

LRANGE Retrieves all chat messages from Redis. e.g. Redis: LRANGE messages 0 -1

Tech Debt

Future improvements

  • Use RedisAI to train on the user data (content of posts, and what posts got chosen by certain users), and make better recommendations.
  • Use Redis to store user connections so that a chat room can only be joined by people who are a match from the previous step.

Smaller UI issues

  • Username does not allow whitespaces but there's no actual validation.
  • Auto scrolling is not implemented, users might not see that they have got new messages.
  • Pushing the enter button on a keyboard does not send the message, only the UI button does.

Reference

Used CSS style sheet as a css starter. Blob icon is created via Blobs.app. Color palette.

blobchat's People

Contributors

ajeetraina avatar prasankumar93 avatar pumpkiny9120 avatar wjohnsto avatar

Stargazers

 avatar  avatar

Forkers

0x0tyy

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.