3. Steps
● Add Gem “websocket-rails”
● bundle install
● rails g websocket_rails:install
● config.middleware.delete Rack::Lock
● rails server
4. B
Client
var dispatcher = new WebSocketRails('localhost:3000/websocket');
Initialize the socket
File: application.js
5. Bind for changes
channel = dispatcher.subscribe('posts');
channel.bind('new', function(data) {
console.log('a new post about '+data.title+'
arrived!');
});
File: application.js
6. Server
rails g scaffold posts title:string description:string
In some_action (create)
WebsocketRails[:posts].trigger 'new', latest_post
File: posts_controller create action
8. Event Router - Client
var success = function(res) { console.log("Created: " + res.post.title);
}
var failure = function(res) {
console.log("Failed to create post: " + res)
}
dispatcher.trigger(‘create_event', post, success, failure);
File: application.js
9. Event Router - Server
WebsocketRails::EventMap.describe do
# using a Hash to specify the target
subscribe :create_event, 'sockets#create_from_socket'
end
File: config/events.rb
10. class SocketsController < WebsocketRails::BaseController
def create_from_socket
post = Post.new message
if post.save
trigger_success post: post
else
trigger_failure post: post.errors
end
end
end
Event Router - Server
File: sockets_controller
18. Setting up Node Server
Listen and subscribe to changes in rt-change (rails)
channel
var io = require('socket.io').listen(5001),
redis = require('redis').createClient();
redis.subscribe('rt-change');
io.on('connection', function(soc){
console.log(soc.id);
});
});
File: app/<folder>/<file-name>.js
19. Setting up Node Server
Publishing changes to client channel
redis.on('message', function(channel, message){
io.sockets.emit('client-channel',JSON.parse(message));
});
File: app/<folder>/<file-name>.js
20. Setting up Rails Client
Include //= require socket.io in application.js
socket = io.connect("http://0.0.0.0:5001");
socket.on("client-channel", function(message){
alert(message);
});
File: application.js
21. Rails - rails s
Node - node <folder>/<file-name>.js
Start the servers
File: app/<folder>/<file-name>.js