💬

ActionCable + WebSocketで実装したチャット機能が更新しないと動かない問題

2024/07/03に公開

開発環境

  • macOS
  • VSCode
  • Rails 7.1.3.3
  • ruby-3.2.3
  • PostgreSQL 16.2

行いたいこと

  • メッセージの入力 ⇨ 送信 ⇨ 表示をページの更新をせずに行う。

起きている問題

  • ActionCable + WebSocketでリアルタイムチャット機能を実装したが、チャットルームのページに遷移した際に、ページの更新をしないとメッセージの入力 ⇨ 送信 ⇨ 表示の挙動ができないという問題が発生した。

原因

  • gem "turbo-rails”Turbo Driveの機能により、 ページに遷移された際に、javascriptが反映される前にHTMLが表示されていた。(このGenはrails newで自動で追加される)
Turbo Driveとは?

アプリ内で画面が変わる動きを高速化するための仕組み。 具体的にはページ遷移やフォーム送信の際に、ページ全体をリロードせずに、HTMLのbody要素の内容を書き換えることで高速化を実現している。






turbo-rails を無効にする

・import "@hotwired/turbo-rails" をコメントアウトする

app/javascript/application.js(修正前)
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import "./channels"
app/javascript/application.js(修正後)
// Entry point for the build script in your package.json
//import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import "./channels"

これでdocker再起動をしたら解消しました。

GitHubで編集を提案

Discussion