Action Cableの習作: CableReadyを試す

外観

後学のために前回写経したAction Cable ExamplesにCableReadyを導入してみたいと思います。

参照

Welcome

CableReady completes the ActionCable story and expands the utility of web sockets in your Rails app

環境

macOS 10.15.4
Ruby 2.7.1
Rails 6.0.3
Yarn 1.22.4
Node 13.12.0
cable_ready 4.1.2
cable_ready@4.1.2

リポジトリ

usutani/try_ac_examples

方針

コメント追加のDOM操作にCableReadyを用います。

app/views/comments/create.js.erb

(() => {
  const el = document.getElementById('comments')
  el.insertAdjacentHTML('beforeend', '<%=j render @comment %>')
  const new_comment = document.getElementById('new_comment')
  new_comment.outerHTML = '<%=j render "comments/new", message: @message %>'
})()

準備

ドキュメントのSetupに書かれている通りに下記のコマンドを実行します。

bundle add cable_ready
yarn add cable_ready

手順

コンシューマのreceivedでCableReady.performを呼び出します。
また、元コードのreceivedでは現在のユーザについてコメントの重複追加を防止していますが、今回DOM操作をCableReadyに移動しますので、この処理は不要になります。

app/javascript/channels/comments_channel.js

import CableReady from 'cable_ready'

//...

  received(data) {
    if (data.cableReady) {
      CableReady.perform(data.operations)
    }
  },

app/jobs/comment_relay_job.rb

コメント追加のDOM操作にCableReadyを用います。

class CommentRelayJob < ApplicationJob
  include CableReady::Broadcaster
  queue_as :default

  def perform(comment)
    html_comment = CommentsController.render comment
    channel_name = "messages:#{comment.message_id}:comments"
    cable_ready[channel_name].insert_adjacent_html(
      selector: '#comments',
      html: html_comment
    )
    cable_ready.broadcast
  end
end

app/views/comments/create.js.erb

コメント追加のDOM操作を削除します。

(() => {
  const new_comment = document.getElementById('new_comment')
  new_comment.outerHTML = '<%=j render "comments/new", message: @message %>'
})()

以上です。