To follow this tutorial, you need to have Ruby, Rails and PostgreSQL installed on your machine. Basic knowledge of Ruby and CoffeeScript will be helpful.
In this post, we will be building a realtime chat application. This application will be built using Ruby on Rails and Pusher.
A quick look at what we’ll be building:
Chat applications have become very popular on virtually all web applications in today’s world. One very important feature of all chat applications is Instant Messaging. It is usually one of the basis for the success of any chat application.
To have the best chat experience, there must be a seamless realtime update of new messages.
A basic understanding of Ruby and CoffeeScript will help you get the best out of this tutorial. It is assumed that you already have Ruby, Rails and PostgreSQL installed. Kindly check the PostgreSQL, Ruby and Rails documentation for installation steps.
Setting up the application
Open your terminal and run the following commands to create our demo application:
# create a newrails application
$ rails newpusher-chat -T--database=postgresql
Go ahead and change directory into the newly created folder:
# change directory
$ cd pusher-chat
In the root of your pusher-chat directory, open your Gemfile and add the following gems:
In your terminal, ensure you’re in the project directory and install the gems by running:
$ bundle install
Next, we have to set up a database for our demo chat application. Check out this article on how to create a PostgreSQL database and an associated user and password.
Once you have your database details, in your database.yml file, under the development key, add the following code:
# config/database.yml...development:<<:*defaultdatabase: pusher-chat_development // add this line if it isn't already there
username: database_user // add this line
password: user_password // add this line
The username and password in the code above should have access to the pusher-chat_development database. After that, run the following code to setup the database:
# setup database
$ rails db:setup
Start the application
After setting up the database, in your terminal, start the development server by running rails s. Visit http://localhost:3000 in your browser to see your brand new application:
Create a new app by selecting Channels apps on the sidebar and clicking Create Channels app button on the bottom of the sidebar:
Configure an app by providing basic information requested in the form presented. You can also choose the environment you intend to integrate Pusher with for a better setup experience:
You can retrieve your keys from the App Keys tab:
Bootstrap the application
Now that we have our Pusher credentials, we will go ahead and generate our model and controller. In your terminal, while in the project’s directory, run the following code:
# generate a chat model
$ rails g model chat message:text username:string
# generate a chats controller with actions
$ rails g controller Chats create newshow index
# run database migration
$ rails db:migrate
Refreshing our home page should still show us the default Rails landing page.
Building the homepage
With our controller in place, we route our homepage to the index action of the chat controller and add actions for creating and viewing our chats. Replace the code in your routes file with the following:
# config/routes.rbRails.application.routes.draw do
In your application.js file, add the following code just before the last line:
If you encounter a RegExp error while trying to set up Bootstrap, In config/boot.rb, change the ExecJS runtime from Duktape to Node.
If we reload our homepage now, we should see this majestic view of our chat application:
Sending chat messages
In the views/chats folder, create a show.json.jbuilder file and add the following code:
In the above code, we add attach an ajax:success event listener to our chat form courtesy of jQuery-ujs. Whenever we add chat messages, we get our messages as a response and append them to already existing messages on the page.
Realtime service with Pusher
We now have a functional chat application and all that’s left is to make our chats appear realtime. We will go ahead and integrate Pusher into our chat application.
Firstly, we will initialize a Pusher client in our application. In the config/initializers directory, create a pusher.rb file and add the following code:
<%# app/views/layouts/application.html.erb %>
<scriptsrc="https://js.pusher.com/4.1/pusher.min.js"></script> // add this line
For our chat to be realtime, we publish new chat messages to a channel and subscribe to it on the frontend of our app. In the chat model, we add an after_create callback, which calls a method that publishes the new record.
In order to receive the chat messages in realtime, we’ll use the subscribe() method from Pusher to subscribe to the new event in the created chat channel.
Rename your chats.coffee file to chats.coffee.erb and replace the code there with the following:
In the code above, we subscribed our Pusher client to the chat channel and updated our chat with the data we got from it.
Bringing it all together
Restart the development server if it is currently running. Check your page on http://localhost:3000 and open it in a second tab. Add a few chat messages and see them pop up on the second tab.
So far, we have been able to build a basic chat application with realtime functionality as powered by Pusher. Feel free to explore more by visiting Pusher’s documentation. Lastly, the complete source code of this demo application is on Github.