To implement chat on Rails we need the Juggernaut gem. The newest version of Juggernaut is build upon nodeJS.
1. Install Juggernaut:
First, install nodejs (http://nodejs.org), redis (http:/code.google.com/p/redis/) and Juggernaut gem (gem install juggernaut).
Then download server git clone …
2. Integrate with Rails to implement chat!
After Juggernaut gem is installed, add it to environment.rb:
Suppose you have a system with user authentication, the idea is to generate an environment where you’re able to chat with other users and see to what extent features can be added in order to create an awesome chat!
Note: Providing a step by step guide to create a working chat isn’t the idea of this tutorial. It’s to show different possibilites to develop on
Juggernaut.
Connecting to Juggernaut from Rails
It’s necessary to add the file WebSocketMain.swf to the public folder. This hasn’t to be exactly this way, you can change its location, but if you do, then you’ll have to change the WEB_SOCKET_SWF_LOCATION, due to an issue with Firefox (… for further information visit juggernaut git page).
Juggernaut serves every file necessary for running by default, so you can leave them on the server where Jaggernaut is installed and configure everything in your client (mainly due to Firefox) in order to avoid adding extra files to your project.
Add to your view this line:
<script src="http://localhost:8080/application.js" type="text/javascript" charset="utf-8"></script>
Note : you can add this file in another way or eventually add it to your project if you want.
Inside another script tag:
var jugger = new Juggernaut;
** Connection events provided by Juggernaut
Juggernaut provides you with three different events : Connect, Disconnect o Reconnect.
jugger.on("connect - disconnect - reconnect", callback)
You can use this events to implement whatever function you want to execute, i.e. alerting when a client has connected:
jug.on("connect", function() {alert("I'm connected!!");});
At this point you have the connection of your client ready, you can test it, you have to start Juggernaut. * First run redis :
./redis-server redis.conf
(whereever you have installed it) *
Then go to the folder where you’ve downloaded the server to and run juggernaut:
Let’s chat!
Now that we have everything going, would be a good time to start chatting.
First you need to subscribe to a channe. Inside the channel you’ll be able to connect and user messages scope is restricted to channel.
Then :
jug.subscribe("name_or_channel_id", function(data) { .. here you'll handle all messages coming from channel ... })
Clarifying a bit… with this function we subscribe to the channel and can pass a function as a parameter to handle data coming from it, i.e. any user’s messages, let’s give an example:
First you need to have a div tag with an id (id_div), what you want is to append a list element containing message content to the div element everytime someone sends a message.
jug.subscribe("name_or_channel_id", function(data){
var li = $("<li />");
li.text(data);
$("#id_div").append(li);
});
You can have a div or textearea element, adding text to a textarea element is relatively simpler, it’s enough to do
textarea.value += (data + "\n");
but you’ll lose customizing power. li elements can be enriched with style, making the chat more attractive.
You’ve received data and added to a div element, but you’re still unable to send data. Let’s setup a form:
<% form_remote_tag(:url => path_to_send_message_method, :success => "$('#msg_body').value=''" do >
<= text_field_tag 'msg_body', '', :size => '50' >
<= submit_tag 'Send Message' >
<% end %>
And the method :
def send_message
Juggernaut.publish("name_or_channel_id", parse_chat_message(params[:msg_body], current_user))
end
parse_chat_message? … Yes, before publishing data, you can process it and why not modify it a bit.
def parse_chat_message(msg, user)
return "#{user.login} says: #{msg}"
end
We are sending information to Juggernaut with this format : ‘usuario says: something’
Done!, you have your server up and running, and know how to send and receive data, there’s nothing else to try.
Extras:
Private chat case :*
You can’t call a chat a chat if you can’t have a private conversation with someone. A good way of implementing this, is subscribing your users to a particular chatroom identified by user’s id. Simple add another subscribe:
jug.subscribe("name_or_channel_id", function(data){ .. handle private message .. }
The receiving user must be able to subscribe to your chat and send messages to you.
To achive that, you should write a function that when you click on the user you want to send a private message to, subscribes to its chatroom and allows you to send messages to the user. This can be implemented in many different ways! You’ll have to simply make your choice according to your needs!
). Really try it out it’s worth it.