Giter VIP home page Giter VIP logo

chat_app's Introduction

Chat App

Demo

Download the project or clone it

$ git clone [email protected]:rom-30/chat_app.git

Objectives

1. Learn the basics of Action Cable which integrates WebSockets with the rest of your Rails application.

2. Learn the basics of Semantic - UI framework designed for theming

User Stories

Schema

  1. As a User I can sign in
  2. As a User I can sign out
  3. As a User I can send a message to a chatroom
  4. As a User I can read messages from the chatroom

To get started

$ bundle install
$ yarn install
$ rails db:create db:migrate db:seed
$ rails s

Info

  • Rails: 6.0.1
  • Ruby: 2.6.3

To create your own user

# seeds.rb or rails c
User.create!(username: 'type_a_username', password: 'type_a_password')

โš ๏ธ Session Controller Implemented without devise

# applications_controller.rb
class ApplicationController < ActionController::Base
  helper_method :current_user, :logged_in?

  def current_user
    @current_user ||= User.find(session[:user_id]) if session[:user_id]
  end

  def logged_in?
    !current_user.nil?
  end

  def require_user
    unless logged_in?
      flash[:error] = 'You must be logged in to perform that action'
      redirect_to login_path
    end
  end
end


# sessions_controller.rb
class SessionsController < ApplicationController
  before_action :redirect_if_logged_in, only: %i[new create]

  def new; end

  def create
    user = User.find_by(username: params[:session][:username])

    if user&.authenticate(params[:session][:password])
      session[:user_id] = user.id
      flash[:success] = "You have successfully signed in"
      redirect_to root_path
    else
      flash.now[:error] = "Try again but this time with the correct credentials okay!!!"
      render :new
    end
  end

  def destroy
    session[:user_id] = nil
    flash[:success] = "You have successfully signed out"

    redirect_to login_path
  end

  private

  def redirect_if_logged_in
    if logged_in?
      flash[:error] = "You are already logged in"
      redirect_to root_path
    end
  end
end

Chat Room Channel Js

import consumer from "./consumer"

consumer.subscriptions.create("ChatRoomChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    // Called when there's incoming data on the websocket for this channel
    $('#message-container').append(data.content)

    const scrollToBottom = () => {
      if ($('#messages').length > 0) {
        $('#messages').scrollTop($('#messages')[0].scrollHeight);
      }
    }
    scrollToBottom()

    // To clear input
    const input = document.querySelector('#message_body');
    input.value = "";
  }
});

Gems Installed

  • autoprefixer-rails - Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website.

  • jquery-rails - A gem to automate using jQuery with Rails

  • semantic-ui-sass - Semantic UI, converted to Sass and ready to drop into Rails, Compass, or Sprockets.

  • bcrypt - The bcrypt Ruby gem provides a simple wrapper for safely handling passwords.

  • pry-rails - Use Pry as your rails console

If I were to deploy, I would at least

chat_app's People

Contributors

rom-30 avatar dependabot[bot] avatar

Watchers

 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.