Push notification with Faye

To create a mini-chat, something that we must to pay attention is how to make our app can chat in the real time between client and server.In Rails, we have alot of way to push notification to make our chat message as real time and tell another client have the new message arriving. In this article, I will introduce all of you to use Faye for push notification.

What is Faye?

Faye is a publish-subscribe messaging system based on the Bayeux protocol. It provides message servers for Node.js and Ruby, and clients for use on the server and in all major web browsers.

Let's build app with Faye

Let's create model Message that have message as a attibute. After that we build interface of view chat form. Then add name of id is chat into list showing messages and form submitted via AJAX.

/app/views/messages/index.html.erb
<ul id="chat">
  <%= render @messages %>
</ul>

<%= form_for Message.new, :remote => true do |f| %>
  <%= f.text_field :message %>
  <%= f.submit "Send" %>
<% end %>

MessageController's create action look like as code below:

/app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def index
    @messages = Message.all
  end

  def create
    @message = Message.create!(params[:message])
  end

end

As we use remote: true in form so we must creat file create.js.erb in message view to append the new messages into the list messages.

/app/views/messages/create.js.erb
$("#chat").append("<%= escape_javascript render(@message) %>");
$("#new_message").reset();

It's time to set up Faye

gem install faye

After install faye sucessfully now let's create and config Rackup file which's called file faye.ru and add it into the root of our app.

Note: faye can only run on Thin server and in production mode. So we must to pass two thing above to run faye's server successfully.

/faye.ru
require 'faye'
faye_server = Faye::RackAdapter.new(:mount => '/faye', :timeout => 45)
run faye_server

After run faye sever, the terminal will show :

rackup faye.ru -s thin -E production
Thin web server (v1.6.4 codename Gob Bluth)
Maximum connections set to 1024
Listening on localhost:9292, CTRL+C to stop

As we can see the code above our faye server is running on port 9292. lets's add file Javascript of faye server into the application's layout file and we can see this file by type http://localhost:9292/faye.js into browser.

Now let's add code below to /app/views/layouts/application.html.erb

/app/views/layouts/application.html.erb
<%= javascript_include_tag :defaults, "http://localhost:9292/faye.js" %>

and then create subscribe function for passing the name /messages/new of the channel and callback fucntion.

/public/javascripts/application.js
$(function() {
  var faye = new Faye.Client('http://localhost:9292/faye');
  faye.subscribe('/messages/new', function (data) {
    eval(data);
  });
});

Now let's take a look for creating method in ApplicationHelper that it use to build up message from the channel parameter and the outer from the block and then use Net::HTTP.post_form to POST that data to Faye server.

/app/helpers/application_helper.rb
module ApplicationHelper
  def broadcast(channel, &block)
    message = {:channel => channel, :data => capture(&block)}
    uri = URI.parse("http://localhost:9292/faye")
    Net::HTTP.post_form(uri, :message => message.to_json)
  end
end

In orders to use Net::HTTP please add require 'net/http into /config/application.rb file.

It's time to edit our create.js.erb with new broadcast mdethod.

/app/views/messages/create.js.erb
<% broadcast "/messages/new" do %>
$("#chat").append("<%= escape_javascript render(@message) %>");
<% end %>
$("#new_message").reset();

Now we can use our app for chat as a real time app.

Conclusion

In this article, I show to create mini chat on Ruby on Rails with push notification with Faye. I hope this article gave you some understanding about Faye and how to use Faye for your projects.