Build a realtime table with Ruby on Rails and PostgreSQL
A basic understanding of Ruby and CoffeeScript will help you with this tutorial. You need to already have Ruby and Rails installed on your machine, as well as PostgreSQL.
The ability to update data in realtime is one of the top requirements for web applications in today’s world. Users prefer realtime update as opposed to constantly refreshing a page to see new information.
With that being said, implementing realtime update of information in any web application can be challenging and has to be done right. This post aims to show you how to achieve that with the help of Pusher in a Ruby application.
A quick look at what we’ll be building:
A basic understanding of PostgreSQL, Ruby and CoffeeScript will help you with this tutorial. You should also have PostgreSQL installed. Kindly check the PostgreSQL, Ruby and Rails documentation for further installation steps.
Setting up the application
Before starting off, ensure you have both Ruby and Rails installed. Run the following code in your terminal:
$ ruby -v // 2.1 or above
$ rails -v // 4.2 or above
Now lets run the command to setup the app:
$ rails newpusher-tables -T--database=postgresql
The command above creates a new Rails application. The -T flag excludes generation of test files as we won’t be writing any tests.
Go ahead and change directory into the newly created folder:
$ cd pusher-tables
In the root of your pusher-tables 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 create a database called pusher-tables_development for our app. Check out this article on how to create a Postgres database and an associated user and password.
In your database.yml file, under the development key, add the following code:
# config/database.yml...development:<<:*defaultdatabase: pusher-tables_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-tables_development database. After that, run the following code to setup the database:
# setup database
$ rails db:setup
See it working
After installing the gems, start the development server by running rails s and visit http://localhost:3000 in your browser. You should see the following:
Create a new app by selecting Channels apps on the sidebar, then clicking the Create Channels app button on the bottom of the sidebar:
Configure an app by providing basic information requested in the form presented. You can choose the environment you intend to integrate Pusher with to be provided with boilerplate code for that framework:
You can retrieve your keys from the App Keys tab:
Now that you have your Pusher API keys, head over to config/initializers directory. Create a pusher.rb file and add the following code:
Update the index method of the employees controller, to include the following:
@employee=Employee.new# add this lineend...end
The code above adds Bootstrap styling to the table on our landing page. It also instantiates a new employee record in the index method of the employees controller. If you reload the landing page, you should see the table and form in all its glory.
Adding new records to the table
Currently adding a new employee record redirects us a different page. We’d like to handle that with AJAX. To do that, we add remote: true and format: :json to our form. Replace the code in_form.html.erb with the following:
In the above code, we add an ajax:success event listener to our form courtesy of jQuery-ujs. Whenever we add new employee records, we get our newly added employee as a response and update our table with it.
Lets reload our page and add a few employees, they should pop up on the page as soon as we hit submit.
Realtime service with Pusher
To update our table realtime, we publish the new employee record to a channel and subscribe to it on the frontend of our app. In the employee model, we add an after_commit callback which calls a method that publishes the new record. We use after_commit so data is published whenever we add or update a record.
Here, our initialized Pusher client triggers an event called new through a channel named employee.
Updating the UI
So the server is pushing data out on each change, now it’s up to the client to listen for those changes and do something with that data. To do this, we rename our employees.coffee file to employees.coffee.erb so we can sprinkle some Ruby code in it.
So far, we have learnt how to leverage the realtime functionality provided by Pusher to display updates in realtime. Feel free to explore more by visiting Pusher’s documentation. Lastly, the complete source code of this demo application is on Github.