Hotwireデモアプリを動かしてみたのは昨年以下の速報記事を出したときですが、せっかくなのでRuby 3.0でもやってみました。
Hotwireデモアプリを動かしてみた
デモアプリはRails 6.1です。データベースはSQLite3を使っています。
動かした環境:
- OS: macOS X Catalina 10.15.7
- Ruby: 2.7.1および3.0.0 （rbenvにて設定）
- Redis: 6.0.9
Redisがローカル環境にない場合はインストールが必要です。自分はHomebrewでインストールしました。
$ brew install redis
$ brew services start redis
デモアプリをgit cloneします。
$ git clone https://github.com/hotwired/hotwire-rails-demo-chat.git
Ruby 3.0.0を使う場合はGemfileの該当行を3.0.0に置き換えます。
-ruby '2.7.1'
+ruby '3.0.0'
続いてセットアップスクリプトを実行します。bundle installやマイグレーションもここで行われます。
$ ./bin/setup
（注: 現在は不要です）ただし昨年試した時点ではディレクトリが1つ足りなかった（#2）のでエラーになります。そのときはとりあえずapp/assets/javascripts/librariesディレクトリを作って回避しました。
$ mkdir app/assets/javascripts/libraries
#2はその後マージされたので、上のディレクトリ作成は不要になりました。
後は./bin/rails sを実行します。http://localhost:3000をブラウザで開いて操作すると、以下のようにWebSocket通信が行われます。
Finished "/cable/" [WebSocket] for 127.0.0.1 at 2020-12-23 18:30:31 +0900
Turbo::StreamsChannel stopped streaming from Z2lkOi8vY2hhdC9Sb29tLzE
Started GET "/rooms/1" for 127.0.0.1 at 2020-12-23 18:30:31 +0900
Processing by RoomsController#show as HTML
Parameters: {"id"=>"1"}
Room Load (0.1ms) SELECT "rooms".* FROM "rooms" WHERE "rooms"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]]
↳ app/controllers/rooms_controller.rb:35:in `set_room'
Rendering layout layouts/application.html.erb
Rendering rooms/show.html.erb within layouts/application
Rendered rooms/_room.html.erb (Duration: 0.1ms | Allocations: 14)
Message Load (0.1ms) SELECT "messages".* FROM "messages" WHERE "messages"."room_id" = ? [["room_id", 1]]
↳ app/views/rooms/show.html.erb:15
Rendered collection of messages/_message.html.erb [5 times] (Duration: 0.5ms | Allocations: 268)
Rendered rooms/show.html.erb within layouts/application (Duration: 2.7ms | Allocations: 1600)
Rendered layout layouts/application.html.erb (Duration: 9.6ms | Allocations: 7171)
Completed 200 OK in 11ms (Views: 10.1ms | ActiveRecord: 0.2ms | Allocations: 7875)
Started GET "/rooms/1/messages/new" for 127.0.0.1 at 2020-12-23 18:30:31 +0900
Processing by MessagesController#new as HTML
Parameters: {"room_id"=>"1"}
Room Load (0.1ms) SELECT "rooms".* FROM "rooms" WHERE "rooms"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]]
↳ app/controllers/messages_controller.rb:19:in `set_room'
Rendering messages/new.html.erb
Rendered messages/new.html.erb (Duration: 1.0ms | Allocations: 544)
Completed 200 OK in 3ms (Views: 1.4ms | ActiveRecord: 0.1ms | Allocations: 1374)
Started GET "/cable" for 127.0.0.1 at 2020-12-23 18:30:31 +0900
Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2020-12-23 18:30:31 +0900
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: keep-alive, Upgrade, HTTP_UPGRADE: websocket)
Turbo::StreamsChannel is transmitting the subscription confirmation
Turbo::StreamsChannel is streaming from Z2lkOi8vY2hhdC9Sb29tLzE
なお、自分の場合最初のうちRedisの通信がタイムアウトしまくってたのですが、ESET Cyber Security Proのパーソナルファイアウォールに阻まれていたのが原因でした。Redisを触ったのが初めてだったので、気づくのにちょっとかかりました。
ファイアウォールを一時的に止めるとうまくいったので、後でESETにポート6379番を通すフィルタリングルールを追加しました（面倒）。