Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real Time with Rails 5

lucas renan
September 17, 2016

Real Time with Rails 5

Yet another chat app with Action Cable - Rails 5.

Presented at GURU Sorocaba meetup.

lucas renan

September 17, 2016
Tweet

More Decks by lucas renan

Other Decks in Programming

Transcript

  1. real time with rails 5

    View full-size slide

  2. guru sorocaba

    View full-size slide

  3. action cable
    seamlessly integrates websockets with the rest of
    your rails app

    View full-size slide

  4. yet another chat app

    View full-size slide

  5. app/channels/rooms_channel.rb
    class RoomsChannel < ApplicationCable::Channel
    def subscribed
    stream_from 'room_sorocaba_channel' # can be dynamic
    end
    def unsubscribed
    # Any cleanup needed when channel is unsubscribed
    end
    def send_message(data)
    ActionCable.server.broadcast('room_sorocaba_channel', data)
    end
    end

    View full-size slide

  6. app/assets/javascripts/cable.js
    (function() {
    this.App || (this.App = {});
    App.cable = ActionCable.createConsumer();
    }).call(this);

    View full-size slide

  7. app/assets/javascripts/channels/rooms.js
    App.rooms = App.cable.subscriptions.create("RoomsChannel", {
    connected: function() {
    // Called when the subscription is ready for use on the server
    },
    disconnected: function() {
    // Called when the subscription has been terminated by the server
    },
    received: function(data) {
    // Called when there's incoming data on the websocket for this channel
    },
    send_message: function() {
    return this.perform('send_message');
    }
    });

    View full-size slide

  8. config/routes.rb
    # Serve websocket cable requests in-process
    mount ActionCable.server => '/cable'

    View full-size slide

  9. config/cable.yml
    development:
    adapter: async
    test:
    adapter: async
    production:
    adapter: redis
    url: redis://localhost:6379/1

    View full-size slide

  10. config/environments/production.rb
    config.action_cable.url = ENV['CABLE_URL']
    config.action_cable.allowed_request_origins = ENV['APP_URL']

    View full-size slide

  11. app/views/layouts/application.html.erb
    <%= action_cable_meta_tag %>

    View full-size slide

  12. https://github.com/lucasrenan/lucas-chat

    View full-size slide

  13. heroku tutorial
    https://blog.heroku.com/
    realtimerailsimplementingwebsocketsinrails5withacti
    oncable

    View full-size slide

  14. https://lucas-chat-rails5.herokuapp.com/chat

    View full-size slide