Noticed と CableReady を使用して Rails に堅牢なシステム通知を実装する

この記事は、著者の Advanced CableReady 書籍の次の章から部分的にインスピレーションを受けており、AppSignal のこのゲスト投稿に合わせて調整されています。

通知は、多くの Web アプリケーションに共通する典型的な横断的な懸念事項です。

Noticed gem は、Ruby on Rails アプリケーションにデータベースに基づいたモデルとプラグイン可能な配信方法を提供することで、通知の開発を非常に簡単にします。これには、メーラー、WebSocket、およびその他のいくつかの配信方法のサポートが組み込まれています。

また、Ruby on Rails アプリケーションでシステム通知をトリガーするために CableReady gem を使用するメリットについても検討します。

さあ、始めましょう!

前提条件と要件

場合によっては、アプリからシステム通知をトリガーする必要があるかもしれません。これは、通知 API を使用して実現できます。

たとえば、アプリケーションで、ユーザーがトランスコードに長時間かかる大きなファイルをアップロードできるとします。動画のアップロードが完了したら、ユーザーに通知を送信することができます。つまり、その間に新しいタスクに切り替えることができ、アプリケーションを数分間開いておく必要はありません。

幸いなことに、次の 2 つの前提条件があれば、システム通知を実装して具体化するのは簡単です。

• Noticed はカスタム配信方法をサポートしています（ Noticed は、Discord サーバーへの投稿など、任意のトランスポート メカニズムを実装するためのシンプルな API を公開しています）
• CableReady の矢筒には通知操作の矢印があります。

CableReady と Noticed の要件のリストは短いです。必要なものは次のとおりです。

• ActionCable サーバーが実行中
• ActiveJob バックエンド (通常は Noticed によって使用されます)

注:このプロジェクトのサンプル コード全体は GitHub で入手できます。以下に従うこともできます。段階的にガイドします。

Ruby on Rails アプリケーションのための CableReady 入門書

まずは CableReady に慣れることから始めましょう。 2017 年にリリースされたこのライブラリは、「不足している ActionCable 標準ライブラリ」 と考えることができます。 .

Turbo が登場する前は、Ruby on Rails でリアルタイム アプリケーションを作成する唯一の方法は、ActionCable を使用することでした。 ActionCable は、WebSocket のネイティブ Rails ラッパーであり、サーバー側とクライアント側の両方の API を提供し、いつでも永続的な接続を通じて双方向にメッセージを送信できます。

このアプローチの欠点は、それを実現するには大量の定型コードを作成する必要があることです (そして今でも)。

これは、CableReady がサーバー上でトリガーされる多数の DOM 操作の周囲に抽象化レイヤーを提供することで役立ちます。いくつかの例を示します。

• DOM 突然変異 (inner_html) 、insert_adjacent_html 、morph 、など）
• DOM 要素のプロパティの変更 (add_css_class) 、remove_css_class 、set_dataset_property 、など）
• 任意の DOM イベントをディスパッチする
• ブラウザ履歴の操作
• 通知 (これを利用します)

CableReady サーバーとクライアント

CableReady はどのように魔法を発揮するのでしょうか?一言で言えば、サーバー側とクライアント側の部分で構成されます。

サーバー側では、モジュール CableReady::Broadcaster それを呼び出すアプリケーションのどの部分にも含めることができます。これは、ジョブ、モデル コールバック、またはプレーン コントローラー内にある可能性があります。ただし、その前に、ActionCable チャネルを配置する必要があります。 CableReady の公式ドキュメントを引用するには:

visitors に注意してください。 はストリーム識別子と呼ばれます。 。幅広い視聴者をターゲットにすることも、チャンネルに登録している特定のクライアントのみをターゲットにすることもできます。例の結論として、ブロードキャスター モジュールをモデルに含めて、console.log を送信します。 サインアップ後のクライアントへ:

クライアント側のロジックは単純です。前述のチャンネルへのサブスクリプションを作成します。次に、受信したフックで CableReady.perform を呼び出します。 ネットワーク経由で渡されるすべての操作について:

CableReady と Turbo for Rails の比較

まとめると、CableReady を使用する必要があるのはどのような場合で、どのような場合に使用を避けるべきでしょうか?

Turbo の導入により、Web 開発コミュニティは、サーバーでレンダリングされるリアクティブ アプリケーションを作成するための強力なツールボックスを受け取りました。基本的には、Rails の強力なサーバー側バインディングを備えたフロントエンド テクノロジであるため、標準の Model-View-Controller (MVC) スタックにうまく適合します。したがって、一般的なアプリの要件のほとんどをカバーできます。

一方、CableReady はリアルタイム Rails 開発のスイスアーミーナイフであるため、使用には注意が必要です。これは強力な抽象化であり、広く使用するのが非常に魅力的であるように思えます。しかし、DOM のすべての部分がアプリ内の任意の場所から変更できることを想像すると、これが競合状態や追跡困難なバグにつながる可能性があることが理解できるでしょう。

ただし、今回のようなケースでは、CableReady を使用すると DOM をよりきめ細かく制御できるため、完全に理にかなっています。

シンプルな TLDR について尋ねられたら、Turbo はアプリケーション開発者向けであり、CableReady はライブラリ ビルダー向けであると答えるでしょう。しかし、これからわかるように、この 2 つの間にはグレーゾーンがあります。

お知らせ — Ruby on Rails アプリケーションの簡単な通知

システム通知を配信するために適用する 2 番目のライブラリは、Chris Oliver の Noticed gem です。その中心部は、受信者への単一の通知をモデル化する ActiveRecord モデルに基づいて構築されています。 。次のような共通のメタデータが保持されます。

• 通知の送信先 (受信者)
• 通知が読まれたとき
• 通知に関連付けられているパラメータ (通常は別のモデルへの参照)

ActiveStorage/ActionText メタテーブルの動作に精通している場合、これは非常に似ています。

これに隣接して、 Noticed は PORO (Plain Old Ruby オブジェクト) を採用しています。 、つまり、Rails や他のフレームワークに接続されていないオブジェクト）、実際の通知の青写真として機能します。これらは、やや誤解を招くかもしれませんが、通知とも呼ばれ、通知を表示および配布する方法に関するロジックを実行します。以下は README の例です。

これについては、すぐに実際に見ていきます。特に興味深いのは deliver_by です。 この通知がどの配信方法を使用するかを決定するための呼び出し:

• deliver_by :database 後でアクセスできるように、（上記のモデルの）通知レコードを保存します
• deliver_by :action_cable 定義された ActionCable チャネルとストリーム (デフォルト Noticed::NotificationChannel) を介して送信します。 )
• deliver_by :email 通知の送信に使用されるメーラーを指定します。この例では、受信者が設定した可能性のある設定を考慮する方法を示しています。

この記事の残りの目標は、システム通知を送信するカスタム配信方法を実装することです。

カスタム配信方法:通知 API を介したシステム通知

これを始める前に、新しい Rails アプリケーションを作成して基礎を整えましょう。この方法の方が CableReady との統合が簡単なので、esbuild を選択しました。 importmaps を超える JavaScript オプション :

注: この記事の執筆時点では、現在の Rails バージョンは 7.0.4 です。既存の Rails アプリケーションがある場合は、次の手順をスキップできますが、 通知受信者として機能する User モデルまたは同様の概念があることを確認してください。 .

1.受信者の準備

Noticed には受信者として機能する User モデルが必要なので、簡潔に言うと、Devise を取り込んで User モデルを生成します。

その後、Rails コンソールを開いてサンプル ユーザーを作成します。

2.注目を追加

次に、 Noticed をバンドルに追加し、データベース モデルを生成しましょう。

指示に従って、db:migrate を実行します。 多態性の has_many を追加します。 User モデルへの関連付け:

これをテストする前の最後の部分は、ブループリント PORO を作成することです。

現時点ではデータベース配信方法とプレースホルダー メッセージのみを使用するように少し調整します。通常は、モデル ID などの必須パラメータをここに追加して、メッセージとリンク先の URL を構築します。詳細については、 Noticed README を参照してください。

Rails コンソールのみを使用して、この PORO に基づいて通知を配信する方法をデモンストレーションできます。

ご覧のとおり、 Noticed はデータベースの挿入を実行するため、すべての Notifications を取得できるようになりました。 指定されたユーザーの場合:

現在のユーザーに配信されたすべての通知をリストする単純なインデックス ビューを構築するには、これで十分です。

bin/dev でアプリを起動した後 、ログインして http://localhost:3000/notifications を参照できます:

3. CableReady のインストール

CableReady を使用するには、インストールする必要があります。幸いなことに、これはすぐに完了します。

NotificationChannel を生成しましょう メッセージを届けるために:

これにより、不足しているすべての ActionCable (JavaScript) 依存関係が追加され、それぞれのチャネル ファイル (具体的には app/channels/notification_channel.rb) がスキャフォールディングされます。 および app/javascript/channels/notification_channel.js .

サーバー側チャネルの場合は、Noticed::NotificationChannel から継承します。 :

続行する前に、ActionCable が Devise ユーザーに対して認証されていることを確認する必要があります。ここではその詳細については説明しません。必要な定型文は次のようになります。

他のオプションについては、StimulusReflex のドキュメントを確認してください。

クライアント側では、上記のほんの少しのセットアップ コードを追加する必要があります。

注: ActionCable が動作するには Redis が必要であるため、この記事の残りの部分ではローカル サーバーが実行されていることを前提としています。

4.配信方法の実装

システム通知をブロードキャストするには、新しい配信方法を生成しましょう。

スキャフォールドされたクラスは次のようになります。

deliver をどのように構想するかを下書きして続けましょう。

channel を借りました。 このメソッドの一部は、組み込みの ActionCable 配信メソッドからのものです。これにより、クラスメソッドオプションを介してチャネルを渡すことができます。それ以外の場合は、提供された Noticed::NotificationsChannel にフォールバックします。 .

次に、CableReady の notification を使用します。 メソッドを使用して、それぞれのインスタンスを受信者にブロードキャストします。

これを実行するには、通知 PORO に接続する必要があります。

5.実践する

あとは試してみるだけです。これを Rails コンソールから再度実行するだけです。

まだログインしていると仮定すると、ブラウザはまずアプリに代わって通知を受信する許可を求めます。

これを確認すると、ブラウザから次の美しいポップアップ通知が表示されます。

まとめ

CableReady と Noticed を通じた高速レーン ツアーに参加して、ネイティブ ブラウザー API をアプリに統合する方法を説明しました。その結果、システム通知をユーザーに配信するためのシンプルで一貫した方法が得られます。

この使用例は、CableReady を使用例に組み込むことがいかに簡単かを示すことも目的としています。一歩先を考えれば、ドラフトされた配信方法をライブラリに分離することは難しくありません。

これをきっかけに、アプリ内で垂直方向の反応的な問題領域の兆候を探し、CableReady を試してみることを願っています。

詳細については、私の新しい本 Advanced CableReady を手に取ってご覧ください。

クーポン コード APPSIGNAL-PROMO を使用すると、10 ドル割引になります!

コーディングを楽しんでください!

追記Ruby Magic の投稿を報道後すぐに読みたい場合は、Ruby Magic ニュースレターを購読して、投稿を 1 つも見逃さないようにしてください。