Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Rails 5の目玉機能「Action Cable」で双方向通信を実装(1)

サンプルコードで学ぶRuby on Rails 5実践入門 第7回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/05/17 14:00

 前回はRails 5が提供するフロントエンドの開発環境を解説しました。今回からは2回にわたり、Rails 5目玉機能の1つであるAction Cableのサンプルアプリ実装を通して、Action Cableへの理解を深めていきます。

目次

Action Cableのおさらい

 本連載の第1回でも紹介しましたが、Rails 5の目玉機能であるAction Cableは、Rails上でWebSocketによる双方向通信を簡単に実現する新しい機能です。WebSocket(ウェブソケット)とは、サーバーを介してWebブラウザ間で双方向通信を行う仕組みです。これまでWebSocketをRails上で実現するには、複雑な処理を自前で書く必要がありました。Rails 5で新たに用意されたAction Cableを使うと、驚く程簡単に双方向通信が実現できます。Action Cableでは以下の機能が用意されています。

主な機能 機能概要 実装の配置箇所
コネクション WebSocket通信をサーバーとクライアントで接続する仕組み app/channels/application_cable/connection.rbとして提供
チャネル WebSocketを使う上で必要となるサーバー側の仕組み app/channels配下にApplicationCable::Channelを継承して利用
クライアント WebSocketを使う上で必要となるクライアント側の仕組み。JavaScript/CoffeeScriptで提供 app/assets/javascripts/channels配下に配置
ジェネレーター rails g channelコマンドによるチャネル・クライアントのコードひな型自動生成 -

開発するチャットアプリ(1)

 今回はAction Cableの機能を利用して、リアルタイムチャット機能を実装します。この機能の要件をまとめると以下の通りです。

図1 チャットアプリの完成イメージ
図1 チャットアプリの完成イメージ
  • 発言するにはユーザー登録が必要
  • 各クライアントのブラウザで入力ボックスに文字を入れ、エンターキーを押下すると発言できる
  • 発言はチャットに接続している各クライアントに対して即座に配信される
  • 発言はデータベースに保存される

 これらの要件を満たすチャットアプリを以下の手順で開発していきます。

  1. チャット用コントローラーの作成
  2. チャット用モデルの作成
  3. チャット用チャネルの作成
  4. 入力フォームの作成
  5. 動作確認
  6. 発言をデータベースに保存できるようにする
  7. 発言を登録済みユーザーに限定させる

チャット用コントローラーの作成

 まず、チャット用のコントローラーを作成します。以下のジェネレートコマンドでコントローラーを作成します。なお、チャット表示用の画面のみで必要となるため、indexアクションだけを指定します。

bin/rails g controller ChatMessages index

 ↓

Running via Spring preloader in process 17041
      create  app/controllers/chat_messages_controller.rb
       route  get 'chat_messages/index'
      invoke  erb
      create    app/views/chat_messages
      create    app/views/chat_messages/index.html.erb
      invoke  test_unit
      create    test/controllers/chat_messages_controller_test.rb
      invoke  helper
      create    app/helpers/chat_messages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/chat_messages.coffee
      invoke    scss
      create      app/assets/stylesheets/chat_messages.scss

チャット用モデルの作成

 次に、チャットメッセージ保存用のモデルを作成します。モデル名はchat_message、ユーザーIDとメッセージ本文を保存する必要があるので、カラムにuser_idbodyを指定します。以下のジェネレートコマンドでモデルを作成しましょう。

bin/rails g model chat_message user_id:integer body:text

 ↓

Running via Spring preloader in process 17756
      invoke  active_record
      create    db/migrate/20170317102938_create_chat_messages.rb
      create    app/models/chat_message.rb
      invoke    test_unit
      create      test/models/chat_message_test.rb
      create      test/fixtures/chat_messages.yml

 先立ってマイグレーションを実行しておきます。

bin/rails db:migrate

 ↓

== 20170317102938 CreateChatMessages: migrating ===============================
-- create_table(:chat_messages)
   -> 0.0155s
== 20170317102938 CreateChatMessages: migrated (0.0155s) ======================

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 竹馬 力(チクバ ツトム)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:サンプルコードで学ぶRuby on Rails 5実践入門
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5