Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
bin
 
 
 
 
db
 
 
 
 
 
 
lib
 
 
log
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

hype logo

Live Demo

hype

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

About

A clone of the real-time messaging platform, Slack.

Topics

Resources

Releases

No releases published

Packages

No packages published