Live Site

Diskord

I'm a huge fan of the popular Discord App. Diskord is my take on cloning the real deal. Gamers (or anyone really) can sign up, login, create guilds (with optional guild emblems), create guild channels, and chat (with optionally attached images/gifs) with guild members all in real time.

Technologies used

Diskord was built using React, Redux, Ruby on Rails, ActionCable, Active Storage, PostgreSQL, and AWS S3

Features

Members

Can join and create guilds
Can upload an optional custom guild emblem when creating a guild
Can create channels
Can create and send messages
Can upload an optional custom image file when creating and sending a message
Can see currently selected guild's members
Can navigate around guilds and channels by clicking corresponding links
Can see new channels and messages in real time that another member creates (assuming the member's internet connection does not block port 80 required for this implementation of WebSockets)

Action Cable Implementation

I wanted to keep my React presentational component as readable and simple as possible, so I chose to compose a function and pass it down with dispatch to that same presentational component. Code related to implementing action cable is shown below.

chat_channel.rb

Helper methods to send data, and subscribe to a specific channel from messages controller

class ChatChannel < ApplicationCable::Channel
  def self.send_data(channel_name, data)
    ActionCable.server.broadcast(channel_name, data)
  end

  def subscribed
    stream_from specific_channel
  end

  private
  def specific_channel
    "chat_#{params[:channelId]}"
  end
end

messages_controller.rb (abridged from original)

After creating a message, broadcast to the right subscribers
Create message_payload to account for @message.image.attached? from Active Storage

class Api::MessagesController < ApplicationController
  def create
    @message = Message.new(message_params)
    if @message.save
      ChatChannel.send_data("chat_#{@message.channel_id}", message_payload.as_json)
      render :show
    end
  end
end

channel_messages_index_container.js (abridged from original)

Close over subscription keyword for later reference inside presentational component
Unsubscribe if subscription exists
Close over dispatch for use in subscribe function passed into presentational component

import { receiveMessage } from "../../actions/message_actions";

let subscription
function subscribeToChannel(channelId, dispatch) {
  if (subscription) {
    subscription = subscription.unsubscribe();
  }
  subscription = App.cable.subscriptions.create(
    { channel: "ChatChannel", channelId: channelId },
    {
      received: data => {
        dispatch(receiveMessage(data));
      }
    }
  );
}

const mapDispatchToProps = dispatch => {
  const subscribe = channelId => subscribeToChannel(channelId, dispatch);
  return {
    subscribe,
  };
};

channel_messages_index.jsx (abridged from original)

Once messages index is mounted, start initial subscription for new messages
When messages index is updated (by clicking on a different channel)
- get new messages
- destroy the old subscription
- create a new subscription to the currently selected messages index

componentDidMount() {
    this.props.fetchMessages(this.props.channelId);
    if (Number.isInteger(this.props.channelId)) {
      this.props.subscribe(this.props.channelId);
    }
  }

componentDidUpdate(previousProps) {
  if (previousProps.channelId !== this.props.channelId) {
    this.props.fetchMessages(this.props.channelId);
    this.props.subscribe(this.props.channelId);
  }
  if (previousProps.messages.length !== this.props.messages.length) {
    this.messagesIndex.current.scrollIntoView();
  }
}

clayytxnondiscord / diskord