Hubbub is a live chat web application based on Discord, offering multi-server and multi-channel support, as well as multi-person direct messages.
Hubbub is built with React + Redux on the front-end and Ruby on Rails and PostgreSQL on the back-end. State is updated based on the data returned from the JSON API via Rails.
Instant messaging is made available through Pusher. A subscription to a new room-specific Pusher channel is made each time a user enters a direct message thread or channel.
componentWillMount() {
let { serverId, channelId } = this.props.match.params;
this.channel = pusher.subscribe(`${serverId}-${channelId}`);
}
componentDidMount() {
let { serverId, channelId } = this.props.match.params;
this.props.fetchMessages(serverId, channelId);
this.channel.bind('new-message', message => {
this.props.fetchMessages(serverId, channelId);
}, this);
}
Users can create individual or group direct messages with each other. To start a new thread, users can search through all available users. Messages are stored in the database, while React handles the updates client-side.
Multiple channels are available in a server. Members can separate conversations by topic and easily navigate between channels.
The message model forms polymorphic associations between channels and direct messages. They are differentiated in the React state by looking at URL params, with a /channels/@me URL denoting a direct message.