Skip to content
A clone of the real-time messaging platform, Slack.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
app
bin
config Add emoji picker Apr 1, 2019
db
docs/gifs
frontend
lib Add project skeleton Feb 23, 2019
log
public
spec Broadcast to multiple rooms Mar 3, 2019
storage Add project skeleton Feb 23, 2019
test
vendor
.DS_Store
.byebug_history
.env
.gitignore
Gemfile
Gemfile.lock
Procfile Add Procfile Mar 2, 2019
README.md
Rakefile
config.ru
package-lock.json
package.json
webpack.config.js

README.md

Maintainability

hype logo

hype

Live Demo

hype is a real-time messaging app built to clone the app Slack over a 2-week sprint. hype allows users to send and receive messages with other users in real time via direct messages, group chats, and channels.

Technologies

  • Backend: Rails/ActiveRecord/PostgreSQL
  • Frontend: React.js, Redux
  • Messaging: ActionCable / Websockets
  • Image Hosting: AWS S3

Features

  • Full-stack user authentication, backed by BCrypt
  • Users can send, edit, and delete messages
  • Inbound messages and newly created chatrooms are added to a user's interface in realtime
  • Unread message counts are present next to the chatroom name
  • Users can create, join, and leave channels or direct messages
  • At channel creation, users can search for available users or channels to invite

Real-time Unread Message Counts & Notifications

In order to push live updates to the end-user, I created an ActionCable subscription that listened for various actions, so that a user can see live updates without refreshing the page. When a user logs in, they are subscribed to a general purpose websocket, that allows for broadcasting of any wide-scale changes, such as creation or deletion of channels.

  • Receiving new inbound messages
  • Listening for newly created chatrooms, so that a user can automatically join and subscribe
  • Watching for deleted messages (in which they will disappear in realtime)
Real-time notifications and unread message counts
createSocket(chatroomId) {
        let cable;
        if (process.env.NODE_ENV !== 'production') {
            cable = Cable.createConsumer('http://localhost:3000/cable');
        } else {
            cable = Cable.createConsumer('wss://get-hype-chat.herokuapp.com/cable');
        }
        this.chats = cable.subscriptions.create(
            {   channel: 
                    'MessagesChannel',
                room: 
                    chatroomId
            },  
            { received: message => {
                    if (message.deleted){
                        this.props.removeMessage(message.id);
                        this.props.fetchChatroom(message.chatroom_id);
                    } else if (message.new_chatroom){
                        this.props.fetchChatroom(message.chatroom_id);
                        this.props.fetchUser(this.props.currentUser.id);
                    } else {
                    this.props.receiveMessage(message);
                    this.props.fetchChatroom(message.chatroom_id);
                    }},
                create: function(message) {
                    this.perform(
                        'create', { 
                        body: message.body,
                        author_id: message.author_id,
                        chatroom_id: message.chatroom_id,
                        parent_id: message.parent_id,
                        }
                    );
                    }
            }
        );

Real-time Messaging with other users

WIth ActionCable, users can direct message one another in real time. Upon login, a subscribes to a websocket for each chatroom that they're a part of, allowing for granular live messaging.

Live messaging with other users

User lookup & direct message thread creation

When adding users to a direct message thread or a chatroom, you can start tying to see other users that can join. On click, their names are added to the input box and the users you've added will all be added when the account is created.

User search for channel and direct message creation

Additional Resources

You can’t perform that action at this time.