Action Cable ‘Hello World’ with Rails 5.1

Hầu hết mọi người đều đã thấy ví dụ về ứng dụng chat sử dụng Action Cable. Tôi nhận ra rằng nó quá lớn để giới thiệu Action Cable một cách nhanh chóng. Tôi đã tạo ra một ví dụ ngắn gọn, dễ hiểu khi chúng ta gửi đoạn HTML "Hello World" từ console đến webpage mà không cần load lại.

Truyền một đoạn code HTML từ Rails console đến channel.

Chúng ta bắt đầu với một Rails app mới:

rails new hello-world-action-cable
[...]
cd hello-world-action-cable
rails generate controller page index
[...]

Thay đổi routes để điều hướng dễ dàng hơn:

Rails.application.routes.draw do
  get ‘page/index’
  root ‘page#index’
end

Và thêm một số đoạn HTML vào trong view:

#app/views/page/index.html.erb
<h1>Action Cable Example</h1>

<div id=”messages”></div>

Để nhúng đoạn HTML vào <div id=”messages”></div> trong DOM chúng ta cần sử dụng jQuery mà nó không được tích hợp sẳn trong Rails 5.1. Trong Rails 5.1, việc tích hợp này sẽ được giải quyết bởi một packet quản lý JavaScript mới có tên là Yarn, bạn cần phải cài nó đầu tiên.

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

Sau đó bạn có thể sử dụng để cài jQuery:

bin/yarn add jquery

Để thật sự load jQuery trong Rails app thêm dòng sau trong application.js:

//= require rails-ujs
//= require jquery
//= require turbolinks
//= require_tree .

Rails cung cấp sẵn một generator để tạo ra một channel mới. Chúng ta gọi channel này là "WebNotifications".

rails generate channel WebNotifications

Và để tiếp tục thì chúng ta thêm một số CoffeeScript vào đầu trang app/assets/javascripts/page.coffee:

App.room = App.cable.subscriptions.create "WebNotificationsChannel",
  received: (data) ->
    $('#messages').append data['message']

Cuối cùng chúng ta phải thêm những dòng code dưới đầy vào trong channel vừa tạo ra:

class WebNotificationsChannel < ApplicationCable::Channel
  def subscribed
    stream_from "web_notifications_channel"
  end

  def unsubscribed
  end
end

Không may là chúng ta không thể đẩy messages từ Rails console lên Rails server trong những terminal khác nhau của môi trường development mặc định. Chúng ta phải cần phải thêm gem Redis bằng cách thêm dòng dưới đây vào trong Gemfile. (Trước tiên bạn phải có Redis đang chạy trên hệ thống của bạn).

gem ‘redis’, ‘~> 3.0’

Chúng ta cần phải config để sử dụng Redis trong file config/cable.yml:

redis: &redis
  adapter: redis
  url: redis://localhost:6379/1

production: *redis
development: *redis
test: *redis

Cuối cùng cũng tới thời điểm chúng ta chạy rails server.

rails server

Trong console của các terminal khác nhau, Chúng ta có thể truyền lên 1 mesage đến web_notifications_channel:

$ rails console
Running via Spring preloader in process 19706
Loading development environment (Rails 5.1.0.rc1)
>> ActionCable.server.broadcast ‘web_notifications_channel’,
message: ‘<p>Hello World!</p>’

Xong! Tìm hiểu thêm về Action Cable tại link: http://edgeguides.rubyonrails.org/action_cable_overview.html.