Rails + RabbitMQ + ActionCable. How to build realtime microservice. (Part 3)

This article is the last one of three.

• Part one: we created our Producer.
• Part two: we created our Consumer and we connected both applications together.

In the third part we are going to see how to display datas in realtime in our Producer by using websocket and ActionCable.

Definition of ActionCable according to Rails documentation:

Action Cable seamlessly integrates WebSockets with the rest of your Rails application. It allows for real-time features to be written in Ruby in the same style and form as the rest of your Rails application, while still being performant and scalable

Perfect, this is exactly what we want.

First we need to create a channel in order to have a pipeline between client and server. Let’s call it DatasChannel.

# app/channels/datas_channel.rb
class DatasChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'datas'
  end
end

Then in server side we have to broadcast the data sent by our Producer toward our DatasChannel.

So we can update our Restaurant class:

# app/models/restaurant.rb
class Restaurant
  ....
  def self.push(raw_restaurant)
    datas = JSON.parse(raw_restaurant)
    broadcast_datas(datas)
    $redis.lpush(KEY, raw_restaurant)
    $redis.ltrim(KEY, 0, STORE_LIMIT-1)
  end
end
private
def self.broadcast_to_datas(datas)
  ActionCable.server.broadcast 'datas',
    name: datas['name'],
    city: datas['city']
end

Each time our Restaurant will receive data in server side we will send it towards our client side throughout the DatasChannel.

Now we have to display data in our views. Let’s code some javascript.

// app/assets/javascripts/channels/datas.js
App.messages = App.cable.subscriptions.create('DatasChannel', {  
  received: function(data) {
    return $('#restaurants').append(this.renderRestaurant(data));
  },

  renderRestaurant: function(data) {
    return `<ul>
              <li>${data.name}</li>
              <li>${data.city}</li>
            </ul>`;
  }
});

Our client subscribes to our DatasChannel and append data in our views each time that is receiving one.

But before to see our data displayed we have to add JQuery:

# Gemfile
gem 'jquery-rails'
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require ./channels/datas # we have to load our channel

Then, of course just add in your view:

<div id="restaurants"></div>

That’s it ! 🎉

From this part as a Restaurant is created in our Crawler you should see in realtime in your Dashboard the restaurant’s informations.

Before finishing just a quick reminder of what command we need to run in your different app:

# crawler
redis-server
# dashboard
/usr/local/opt/rabbitmq/sbin/rabbitmq-server # run rabbitmq
WORKERS=RestaurantsWorker bundle exec rake sneakers:run # run our Sneaker worker to bind queue
rails s

I hope you enjoyed our little journey throughout microservice and realtime datas. Now if you want to go deeper you can add some ActionCable tests and deploy in production.

Let me know if you have any questions or issues.