RailsのAction Cableでチャット機能を最速実装！初心者でもわかるWebSocket入門

1. RailsとAction Cableとは？

1. RailsとAction Cableとは？

Railsは、Webアプリケーションを効率よく作るためのフレームワークです。フレームワークとは、最初から便利な道具箱が用意されている開発環境のことです。

Action CableはRailsに標準で入っているリアルタイム通信の仕組みです。リアルタイム通信とは、チャットや通知のように「相手の操作がすぐ画面に反映される」通信方式です。

これを実現するためにWebSocketという技術を使います。WebSocketは、サーバーとブラウザがずっとつながったまま会話できる電話のような仕組みです。

2. チャット機能の全体像を理解しよう

2. チャット機能の全体像を理解しよう

今回作るチャットは「チャットルーム」に参加した人全員にメッセージが即時表示される仕組みです。

流れはとてもシンプルです。

• ブラウザがAction Cableに接続する
• rooms_channelに参加する
• メッセージを送信する
• broadcastで全員に配信する

broadcastとは「拡声器で全員に話す」ようなイメージです。

3. Channelを作成する（rooms_channel）

3. Channelを作成する（rooms_channel）

Action Cableでは、Channelという単位で通信を管理します。Channelは「部屋」や「話題」だと思ってください。

# app/channels/rooms_channel.rb
class RoomsChannel < ApplicationCable::Channel
  def subscribed
    stream_from "rooms_channel"
  end
end

subscribedは接続した瞬間に呼ばれます。stream_fromは「このチャンネルの放送を聞く」という意味です。

4. メッセージをbroadcastする仕組み

4. メッセージをbroadcastする仕組み

次に、サーバー側からメッセージを全員に送信します。これがbroadcastです。

# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def create
    ActionCable.server.broadcast(
      "rooms_channel",
      message: params[:message]
    )
  end
end

ここでは、フォームから送られた文字をそのまま配信しています。Action Cableが裏で接続中のブラウザ全員に届けてくれます。

5. JavaScriptで受信処理を書く

5. JavaScriptで受信処理を書く

ブラウザ側では、届いたメッセージを画面に表示します。RailsではJavaScript用のChannelファイルが自動生成されます。

import consumer from "./consumer"

consumer.subscriptions.create("RoomsChannel", {
  received(data) {
    const messages = document.getElementById("messages")
    messages.insertAdjacentHTML("beforeend", `<p>${data.message}</p>`)
  }
})

receivedはサーバーからデータが届いた瞬間に呼ばれます。ここでHTMLを追加しています。

6. ビューにチャット画面を用意する

6. ビューにチャット画面を用意する

次は画面です。HTMLでシンプルなチャット画面を作ります。

<div id="messages"></div>

<form action="/messages" method="post">
  <input type="text" name="message">
  <button type="submit">送信</button>
</form>

送信ボタンを押すと、メッセージがサーバーに送られ、全員に表示されます。

7. WebSocketとHTTPの違いを知ろう

7. WebSocketとHTTPの違いを知ろう

通常のWeb通信（HTTP）は「質問→回答」で終わります。一方、WebSocketは接続を維持したまま、いつでもデータを送れます。

例えるなら、HTTPは手紙、WebSocketは電話です。チャットや通知にはWebSocketが向いています。

8. チャット実装でよく使う用語解説

8. チャット実装でよく使う用語解説

• Action Cable：Railsのリアルタイム通信機能
• Channel：通信の部屋
• broadcast：全員に配信する処理
• WebSocket：常時接続の通信方式

この用語を押さえるだけで、Railsのチャット実装がぐっと理解しやすくなります。