Quack! is a single page clone of Slack built with Ruby on Rails, PostgreSQL, Action Cable Web Sockets, and React/Redux.

Quack! makes use of websockets through Rails Action Cable module. Standard HTTP connections only allow for a one way communication at any one time (known as half-duplex). A helpful anaology is using a radio or walkie-talkie, where only one person can talk at a time. The standard HTTP request can be upgraded to a web socket connection which is a full duplex connection. A full duplex connection enables full 2 way communction, analagous to a cell phone, where both parties can communicate at the same time.

The web sockets make use of a publisher-subscriber model, where users are subscribed to a channel. A user sends a message to the channel at large, and anyone subscribed to that channel will recieve it.

The core functionality of live chat resides in app/controllers/api/messages_controller.rb and app/channels/channels_channel.rb

When an incoming message is saved to the database in the MessagesController, it broadcasts to all the subscribers

From app/controllers/api/messages_controller.rb:

class Api::MessagesController < ApplicationController
	def create
		@message = Message.new(message_params)
		@channel = Channel.find_by_id(message_params[:channel_id])

		if @message.save
			ChannelsChannel.broadcast_to(@channel, {
				room: @channel.id,
				message_id: @message.id,
				message: @message.content,
				sender_id: @message.sender_id,
				created_at: @message.created_at,
				updated_at: @message.updated_at

			})
			render json: @message;
		else
			render json: @message.errors.full_messages, status: 422
		end
	end

	def message_params
		params.require(:message).permit(:content, :channel_id, :sender_id)
	end
end

The ChannelsChannel class handles the subscription and publishing (aka. broadcasting) functionality.

From app/channels/channels_channel.rb:

class ChannelsChannel < ApplicationCable::Channel
	def subscribed
		@room =  Channel.find_by_id(params[:room])
		stream_for @room
	end

	def received(data)
		ChannelsChannel.broadcast_to(@room, {channel: @room, users: @room.users, messages: @room.messages})
	end
  ....

Quack! has a number of features simlar to it's inspiration Slack.

Quack! features a Rich Text editor built using Quill JS with font formats of Bold, Italic, and Underline. Also, a user can make bulleted or numbered lists.

Quack! integrates emojis since they are a fun part of using any chat applciation.

Quack! allows users to create their own channels and send direct messages to selected members.

Avatars are stored on AWS to ensure rapid availability and efficient delivery. In addition, members can update their avatars through a modal update form.