複数のプライベートルームとグループチャットオプションを備えたRails 5 API Action CableとReactJSを使用してチャットシステムを構築する

この投稿はチュートリアルではなく、Rails 5 ActionCableおよびReactJS / Javascriptカスタムライブラリのビルドに関する知識が必要です。

Rails 5に付属しているすばらしい機能の1つはActionCableです。 ActionCableを使用すると、websocketで考えられるすべてのリアルタイム機能を構築できます。チャットシステムの構築に苦労しながら、「Rails 5 ActionCableでチャットアプリを構築する方法のネット」で複数の例を発見しましたが、実際のチャットアプリケーションにこの概念を適用するのは非常に簡単です。これは、このようなチャットシステムを構築する方法を示すインターネット上の最初の例だと思います。

  • Rails 5 APIバックエンドとReactJSフロントエンド
  • 複数の個室
  • ルーム(1〜1だけでなく)またはグループチャットの正の数のユーザー

私の才能のある友人であるティム・チャンと私が構築したチャットシステムには次のものがあります。

  1. 複数のプライベートチャットルーム
  2. 部屋ごとに複数のチャットユーザー
  3. 各ユーザーのオンライン/オフライン状態
  4. リアルタイムの「タイピング…」ステータス
  5. リアルタイムの開封確認
これが最終結果のようです。 (この例の記事では、フロントエンドの作業は示しません)

この短い投稿では、#1と#2の基本のみを紹介します。 #3、#4、#5のビルド方法を説明してほしい場合は、下にコメントを残してください。 Rails 5をバックエンドAPIおよびフロントエンドのReactJSライブラリとして使用しています。

バックエンド

作成時に、Railsはすべてのリアルタイムマジックが発生するチャンネルフォルダーとファイルを生成します:)

app / channels / application_cable / channel.rb
app / channels / application_cable / connection.rb

認証

まず、connection.rb内のRailsサーバーへのwebsocket接続リクエストを認証しましょう。

プロジェクトで使用する認証gemまたはサービスに応じて、find_verified_userメソッドを必要に応じて変更する必要があります。 valid_tokenというメソッドがありますか? websocketリクエストで渡されたaccess-tokenとclient_idを検証します。要求が認証されない場合、拒否されます。

データ構造

アイデアは非常に基本的です。複数のメッセージがあり、各メッセージにはコンテンツと送信者がいるチャットルームです。メッセージには「受信者」がないことに注意してください。これにより、メッセージの受信者を気にする必要がないため、ルームに任意の数のユーザーを配置できます。送信者からのすべてのメッセージは、ルームの参加者数に関係なくルームに表示されるためです。だから、これは私が使用するデータ構造です:

  • 会話(ルーム):has_manyメッセージ、ユーザー、およびID
  • メッセージ:会話に属している、送信者がいる、テキストコンテンツがある
  • 送信者:ユーザーです

その結果、3つのモデルを作成しました。

アクショントリガー

クライアントが接続(購読)またはメッセージをブロードキャスト(発言)すると、バックエンドはアクションに反応します。 app / channelsフォルダー内に、room_channel.rbというファイルを作成します。

コメントでわかるように、クライアントが「話す」後、ブロードキャストはまだ行われていません。コンテンツとデータを含む新しいメッセージのみが作成されます。アクションのチェーンは、メッセージがDBに保存された後に発生します。メッセージモデルをもう一度見てみましょう。

after_create_commit {MessageBroadcastJob.perform_later(self)}

拡張性

このコールバックは、メッセージが作成され、DBにコミットされた後にのみ呼び出されます。バックグラウンドジョブを使用して、このアクションを処理してスケーリングします。同時に何千ものクライアントがメッセージを送信していると想像してください(これはチャットシステムです。なぜですか?)。ここではバックグラウンドジョブを使用することが必須です。

ここで放送が行われます。 ActionCableは、指定されたペイロードで指定された部屋にペイロードをブロードキャストします。

ActionCable.server.broadcast(room_name、payload)

ケーブルルート

/ cable websocketルートをroutes.rbに追加して、クライアントがこのエンドポイントを呼び出してメッセージをブロードキャストおよび受信できるようにする必要があります。

マウントActionCable.server => '/ cable'

バックエンド側は以上です! ReactJSフロントエンドライブラリを見てみましょう。

クライアントライブラリ

プロジェクトの詳細に応じて、このライブラリのこのコードの概念を理解し、ニーズに合わせて変更する必要があることに注意してください。

最初に、npmを介してActionCableJSをインストールします。

ReactJsアプリのサービスの1つとしてChatConnection.jsファイルを作成します。

ここにフックがあります:createRoomConnectionでは、クライアントはバックエンドで作成したRoomChannelに接続(サブスクライブ)しようとします。接続(サブスクライブ)されると、ルーム名ChatRoom-idからストリーミングします(room_channelを見てください)。上記のrb)接続されると、頻繁に呼び出される2つのメソッドがありますが、どちらを推測できますか?

彼らは:受信して話す!

受信したメソッドは、サーバーからクライアントにメッセージがブロードキャストされるときに呼び出されます。反対に、クライアントがサーバーにメッセージをブロードキャストするときに、speakが呼び出されます。

出来上がり!それでおしまい。繰り返しますが、これは各プロジェクトが異なるため、すぐに実行できる種類のチュートリアルにはなりませんが、複数のプライベートチャットルームを備えたチャットシステムを構築する方法のアイデアを提供してくれることを願っています部屋ごとに複数のユーザー。ご質問がある場合は、コメントセクションでお知らせください。