Zenn
💬

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

2024/07/03に公開
JavaScript
WebSocket
リアルタイムチャット機能
tech

開発環境

  • 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