Thiscode is a full stack clone of the popular chat applciation, discord. Users can make an Servers and Channels and invite their friends to their server.
Ruby on Rails to implement the backend framework Ruby on Rails Action Cables to implement websockets/chat PostgreSQL for the database React for the Frontend using Redux as the state manager jQuery AJAX to access backend through Thunk actions
- Ruby on Rails to implement the backend framework
- Ruby on Rails Action Cables to implement websockets/chat
- PostgreSQL for the database
- React for the Frontend using Redux as the state manager
- jQuery AJAX to access backend
- User Authentication - Users are able to create account and log in
- Servers - Authenticated users can create Servers and invite other users to it
- Channels - Moderators of Servers can create channels which users can join
- Chat - Users can chat to other users who have joined a channel
- Direct Messaging - User can click on other user name and directly message them
Discord displays messages in a particular manner, if last message sent to the server and the previous message are sent from the same user, and the time between those 2 messages is less than 5 minutes. Discord attached the new message to the previous message block. As shown below.
To acheive this, the created at_date of the new message is subtracted from the created_at date of the last message sent to the channel. If the result is less than 100
, a socket
object is created with an append key pointing to true. This key is read by the the chatBox component to determine if messages should be attached or displayed in a new block.
def speak(data)
#find channnnel and eagerload all messages in the channel
channel = TextChannel.includes(:messages).find(data['message']['channelId'])
#create
message = Message.new(body: data['message']['body'], channel_type: 'text', author_id: data['message']['userId'], channel_id: data['message']['channelId'])
lastmsg = channel.messages.last
append = false
if (message.save!)
if lastmsg && lastmsg.author_id == message.author_id && (message.created_at - lastmsg.created_at) < 100
append = true
end
date = [message.created_at.strftime("%A %m/%d/%Y")]
formattedMessage = []
ids =[]
ids << [message.author.id]
formattedMessage << [message.body]
author = [message.author.user_name]
socket = { message: formattedMessage, type: 'message', authors: author, dates: date, append: append, ids: ids }
ChatChannel.broadcast_to(channel, socket)
end
end
- Voice Chat
- Drag and Drop images