既存チャットアプリの修正
前回までに開発したRailsのチャットアプリを、条件に応じてAPIを実行するように修正します。以下の手順はRailsアプリのディレクトリが異なるので注意してください。
条件に応じてAPIを呼び出すよう処理を追加
発言をクライアント側で受け取った際、発言が「/img」で始まる場合に検索語句を渡してAPIリクエストする処理をリスト7の通りに追加します。
received: (data) -> $('#chat_messages').append '<div>' + data['user_name'] + ': ' + data['message'] + '</div>' ret = data["message"].match(/^\/img (.*)/) if ret? $.get 'http://localhost:3001/images/' + ret[1], (ret_api) -> $('#chat_messages').append '<img src=' + ret_api['image_path'] + ' />'
receivedの2行目でmatchを使って、正規表現で先頭が/imgの発言の検索語句を取得しています。検索語句が取得できた場合は、先ほど開発したAPIを取得した検索語句でリクエストします(receivedの4行目)。APIからのレスポンスはret_apiに代入され、ret_api['image_path']で画像パスを取得することができます。receivedの5行目で、imgタグを追加しています。
APIと連係するチャットアプリの動作確認
チャットアプリのRailsとAPIのRailsをそれぞれ立ち上げます。それぞれのRailsアプリのルートディレクトリ上でコマンドを実行する必要があることに注意してください。
# チャットアプリ bin/rails s # API bin/raisl s -p 3001
チャットアプリ「http://localhost:3000/chat_messages/index
」にアクセスします。前回までに作成したユーザーIDでログインし、「こんにちは」「/img rails」「/img ruby」と入力してみましょう。図2のようにRailsとRubyのロゴ画像が表示されることが確認できます。
まとめ
今回はRails 5のもう一つの目玉機能であるAPIモードでRailsアプリを新規作成し、Action Cableサンプルアプリと連係しました。