Friday, 17 February 2023

How to add action cable in rails application step by step

 1. Add meta tag in layout:

   <!DOCTYPE html>

<html>

  <head>

    <title>ActionCableSimpleApp</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <%= csrf_meta_tags %>

    <%= csp_meta_tag %>

    <%= action_cable_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>


  <body>

    <%= yield %>

  </body>

</html>

------------------------------------------------------------
2. config/cable.yml

development:
  adapter: redis
  url: <%= "redis://localhost:6379/1" || "redis://localhost:6379/1" %>
test:
  adapter: test
production:
  adapter: redis
  url: <%= "redis://localhost:6379/1" || "redis://localhost:6379/1" %>
  channel_prefix: action_cable_production
-----------------------------------------------------

3. Add javascripts folder in app/assets/javascripts

3.1: add new folder in app/assets/javascripts/channels
    1.1 add new file in app/assets/javascripts/channels/messages.js

     App.messages = App.cable.subscriptions.create('MessagesChannel', {  
connected(){
console.log("connted to message chall");
},
disconnected(){
console.log("disconnted to message chall");
},
  received: function(data) {
  $("#dhjdhjdfdf").append(data.message) //data show from this line 
console.log(data);
  },
});
--------------------------------

3.2 add application.js in app/assets/javascripts
//= require jquery
//= require jquery_ujs
//= require cable
//= require turbolinks

------------------------------------
3.3 add cable.js in app/assets/javascripts

//= require action_cable
//= require_self
//= require_tree

(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);

------------------------------------------------------------------------
4. in app/channels/application_cable/connection.rb

module ApplicationCable
class Connection < ActionCable::Connection::Base
# identified_by :current_user

def connect
end

private
end
end
----------------------------------------------------------------------------------------
5. app/channels/messages_channel.rb

class MessagesChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'messages'
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end
---------------------------------------------------------

6. Add gems:
gem 'redis'
gem 'jquery-rails'
gem 'jquery-ui-rails'

---------------------------------------------------
7. Add routes in routes.rb

mount ActionCable.server => '/cable'
---------------------------------------------------
8. run: sudo service redis-server restart
----------------------------------------------
9. and for broadcast command

ActionCable.server.broadcast "messages", {:message=>"zzzzzzz"}
-----------------------------------------------------------------

10. Add this link in root path

<div id="dhjdhjdfdf"></div>

No comments:

Post a Comment