【第15週】パRails輪読会🚂 (2023-11-29~ 2023-12-01)

tags: パRails🚂

目次

2023-11-29(水)

ファシリ

@hiromisugie

ドライバー

@ayu-0505

読んだところ

5-6-1 265p サーバサイドのコードを実装する から
5-6-1 終わりまで。
PR:https://github.com/motohiro-mm/Perfect_Ruby_on_Rails_Ch5/pull/14

次回

5-6-2 「チャットを完成させる」から。🚂

学んだこと・感想

  • @sharoa

    • 久しぶりだったので、これってなんだっけ？みたいな思いがありました。
    • ブロードキャストは接続している全購読者への送信という意味？
    • まだチャットアプリが途中なのでなんとなくふわっとしていますが、完成した時にはスッキリになるのかそれも不明。
    • 自分自身もだけど、タイポはよくしてしまうのであらためて気をつけないとだなと思った。

  • @hiromisugie

    • チャットアプリを作るために、サーバサイドとクライアントサイドそれぞれの設定をしていく必要がある。
      • サーバサイドではsubscribedメソッド、`speakメソッド
      • クライアントサイドではrecievedメソッド、speakメソッド
      • speakメソッドってのが同じ名前だけど、関連性とか処理の流れとかまだ整理できていない…。
    • 最終的にalertで正しく表示ができて良かったです😄

  • @moegi29

    • ひさしぶりだったのでチャネル、購読とは、、となりました。チャネルはWebSocket処理におけるコントローラのような役割を果たしていて、クライアントはWebSocket通信を通じてチャネルと関連付けされる。この関連のことが購読。
    • クライアント側で表示されたメッセージを確認できて良かった、時間内で原因が分かってすっきりしました。

  • @sadanora

    • actioncableはサーバサイドはapp/channels/, クライアントサイドはapp/javascript/channels/配下に処理を書く。
    • 実行順
      1. （クライアント側）クライアントサイドでspeakメソッドを呼び出すことでサーバーサイドにメッセージが送信される
      2. （サーバー側）サーバサイドで1のメッセージがブロードキャストされ、クライアントに送信される
      3. （クライアント側）2のメッセージを受信してreceivedメソッドによってメッセージが表示される

  • @ayu-0505

    • 落ち着いて入力しようと思いました😂>タイポ
    • サーバーはapp/channels/xxx_channel.rb、クライアントはapp/javascript/channels/xxx_channel.jsJSファイルで連動している。

2023-11-30(木)

ファシリ

@motohiro-mm

ドライバー

@moegi

読んだところ

5-6-2 「チャットを完成させる」から
5-6-3 271p 途中まで。
PR:

次回

5-6-3 271p Action Cableへの接続先を変更する　から。🚂

学んだこと・感想

  • @sharoa

    • 今日でチャットアプリが完成した！
    • 目の前でチャットができることが確認できて、おお！と感動しました🤩
    • ただ、途中の送受信処理の追加や、サーバーサイドの処理の変更など、内容が濃すぎてちょっとおいつけていません。。。。
    • なので、またタイミングをみて復習をしたいと思います。
    • アダプタを設定したり、またスタンドアローンという構成？環境？というものがあるのも初めて知りました。きちんと覚えておきたいと思います。

  • @moegi

    • チャットアプリ完成、ちゃんと動いてよかった！
    • やっとクライアントサイド(rb)とサーバサイド(js)を実装するということの認識ができた気がします
    • 本番で使うには更にアダプタの設定が必要、production環境ではredis,development環境ではasyncアダプタを使う

  • @motohiro-mm

    • テキスト入力部分をviewに追加
      • data-behavior="識別子"を書いておく
    • クライアントサイドで送受信処理を追加（app/javascript/channels/room_channels.js）
      • connectedメソッド：チャットのメッセージを入力した際に発火するイベントを登録
        • querySelector('input[data-behavior="識別子"]')とすることで、viewに入力されたメッセージと関連づく
      • recievedメソッド：メッセージをうけとりDOMを操作して受け取ったメッセージをHTML上に追加
    • サーバーサイドを実装
      • メッセージをデータベースに保存
    • ActionCableを本番運用するにあたっての設定がいくつかある
    • アダプタの設定
      • デフォルトでは、production環境：redis、development環境：async
    • サーバーを分ける設定
      • デフォルトではWebSocket用サーバとWeb用サーバは同じだが、production環境では分けた方が便利
      • WebSocket用サーバをWeb用と分離して動かす状態をスタンドアローンという

  • @ayu-0505

    • 実際に動く状態でチャットルームを完成させることができたのはとても嬉しかった。
    • DBへの保存、表示が入力後すぐにできるのはJSとRialsの連携の成せる技なのでしょうか。
    • どういう経路でデータが渡っていったのかまだ完全に把握できてはいないので、復習は必要と感じた。
    • サーバーをWeb用とWebSocket用に分離してスタンドアローン構成にする、という考え方。

  • @sadanora

    • チャットアプリ完成した🙌
    • フロントの入力を受け取って、サーバーがそれを処理してまたクライアントに配信して、という大体の流れの雰囲気はわかった気はするけど、難しい…
    • アダプタの設定はconfig/cable.ymlに書く
      • デフォルトでも環境ごとの接続先は異なっていて、developmentはasync、productionはredisとなっている
    • インメモリとかプロセスとかredisとか、よくわからん言葉がめっちゃ出てきてwakaranwakaran
    • ActionCable用（Websocket）のサーバーとWeb用のサーバーのプロセスは分けたほうが便利なことも多いので、それぞれ分離して動かす工夫が必要って話なのかなと理解した。

  • @shodan

    • 昨日お休みしたので正直なところ？状態の45分でした🤧このあと読み直しておきます。
    • this.performの意味がわからなくて5.49のspeakメソッドの読み方がわからなかったんですがそれも昨日のp266で説明されてました。
    • productionでチャット用の（WebSocket用）のサーバーをWeb用と分けるのがなぜ便利？（なんとなく分けたほうがいいのはイメージつくのですが）
    • 来週から水曜日はお休みします🙏（チーム開発MTGのお昼の方に登録したので）

2023-12-01(金)

ファシリ

@motohiro-mm

ドライバー

@shodan

読んだところ

5-6-3 271p Action Cableへの接続先を変更する　から
5章の最後まで。
PR:

次回

6章　Railsアプリケーション開発　から。🚂

学んだこと・感想

  • @sharoa

    • 今日も難しかったです。
    • ところどころ出てくるわからん単語を改めてちゃんと意味を調べて、もう一度読み直してみたいと思いました。
    • 今思ったことですが、ワーカスレッドってワーカースレッドのこと？
    • 当たり前ですがテストがきちんと通ったのは良かったです、
    • テスト書くのが大の苦手なので、本に書かれているのでも、ウッとなりがちです。が、慣れたいので頑張るw
    • 難しい難しい言いながらいつの間にか５章が終わって、次回は６章。また気合を入れないとです。

  • @hiromisugie

    • Action Cable全般、全然ピンと来ていない…😅 追いかけると果てしなそうなので、今は頭にインデックスを作る作戦で先に進もうと思います。
    • テストを走らせて通ることと、敢えて通らないようにすることも試せてよかったです。
    • RubyMineが便利そう！
    • 6章をちょっと楽しみにしておりました。また超難しいかもですが…。

  • @moegi

    • ActionCableへの接続先変更、接続可能なオリジン設定、認証処理の実装方法の流れを見れた。けど、productionとdevelopmentとか環境の違いによる細かい設定方法はいまいち分かってない
    • ユーザーを追加して頂いてユニットテストを実際に動かして成功した場合と失敗した場合の動きがみれてよかった

  • @sadanora

  • @shodan

    • ActionCable::Connection::Baseというクラスがidentified_byというWebSocketに接続したユーザーを扱える？メソッドや、接続を取りやめるreject_unauthorized_connectionメソッド持っており、これらを使いながら認証機能をつくれるらしい。
    • ActitonCable用のアサーションメソッドがある（assert_subscriptionとか）。
    • 次からはようやく普通の（？）アプリ制作のハンズオンになるみたい？でそれはそれで楽しみです。

  • @motohiro-mm

    • ActionCableの接続先の変更と、接続可能なオリジンの設定、の違いはいまいちわかっていません
    • 認証処理の実装はなんとなぁくイメージふわっと、という感じ
      • identified_by
    • ワーカ数の設定：ワーカ数、プロセス、スレッド、がいまいちわかっていない…
    • ５章をなんとか終わって良かった…のか？という気持ち

  • @ayu-0505

    • ActionCableの接続先変更部分はちょっと難しかったです。タグを見て接続先を判定しているということはHTTP全体（ヘッダー等）の知識が必要なのかもしれません。
    • 認証機能も何となくの理解でした。ConnectionクラスのConnectionインスタンスにユーザー情報含め、色々情報が保持されており、それで接続切断等ができるらしいです。
    • ワーカー数、スレッド、pool等、検索してみたのですが、ちょっとまだ頭に入ってきませんでした😅もう少し学習が必要な分野だなと思いました。
    • テスト確認ありがとうございました。
Select a repo