action cable - wahei628/ShareSuke GitHub Wiki

コネクションとは？

コネクション（connection）は、クライアント（ユーザーが使うブラウザなど）とサーバー（あなたのアプリケーションが動いているコンピューター）との間の通信路のことです。この通信路を使ってデータをやり取りします。

Action Cableとは？

Action Cableは、Railsでリアルタイムの通信（チャットやライブ通知など）を実現するための機能です。これを使うことで、クライアントとサーバーがリアルタイムにやり取りできるようになります。

コネクションの役割

Action Cableサーバーは、たくさんのコネクション（通信路）を同時に扱うことができます。例えば、あるユーザーがブラウザであなたのアプリケーションにアクセスしている場合、そのユーザーとサーバーの間に1つのコネクションが作られます。

複数のコネクション

1人のユーザーが同じアプリケーションを別のブラウザタブや別のデバイス（スマートフォンやタブレットなど）で開くと、それぞれのタブやデバイスごとに新しいコネクションが作られます。つまり、同じユーザーでも複数のコネクションを同時に持つことができるわけです。

図で説明すると

[ユーザー]
  |    \    \
[PC]  [スマホ] [タブレット]
  |       |         |
[タブ1][タブ2]    |
  |       |         |
[サーバー]
  • ユーザーがPCのタブ1でアプリにアクセス -> コネクション1
  • ユーザーがPCのタブ2でアプリにアクセス -> コネクション2
  • ユーザーがスマホでアプリにアクセス -> コネクション3
  • ユーザーがタブレットでアプリにアクセス -> コネクション4

このように、各デバイスやタブごとに別々のコネクションが作られ、それぞれがサーバーとリアルタイムに通信します。

簡単に言うと、コネクションはユーザーとサーバーがリアルタイムにデータをやり取りするための「電話線」みたいなものです。そして、ユーザーが複数の電話機を使えば、それぞれの電話機ごとに別の電話線（コネクション）が必要になる、ということです。

コンシューマーとは？

コンシューマー（consumer）は、クライアント（ユーザーが使うブラウザなど）側でWebSocketコネクションを使ってサーバーとやり取りするためのプログラムのことです。

具体的には？

例えば、あなたが作っているウェブサイトでチャット機能があるとします。ユーザーがチャットメッセージを送ったり受け取ったりするためには、ブラウザ上で動くJavaScriptのプログラムが必要です。このプログラムが「コンシューマー」です。

Action Cableのコンシューマー

Action Cableを使うと、Railsのサーバーとクライアント（ブラウザ）がリアルタイムで通信できます。クライアント側では、JavaScriptを使ってコンシューマーを作ります。このコンシューマーが、サーバーとやり取りをするためのWebSocketコネクションを管理します。

図で説明すると

[ユーザー]
    |
[ブラウザ] <- (JavaScriptで動く) [コンシューマー]
    |
[WebSocketコネクション]
    |
[サーバー]
  1. ユーザーがブラウザであなたのアプリケーションを開きます。
  2. ブラウザ上で動いているJavaScriptプログラム（これがコンシューマーです）が、サーバーと通信するためにWebSocketコネクションを作ります。
  3. このコネクションを使って、リアルタイムにデータをやり取りします。

うんこで例えると

コンシューマーは、あなたがトイレで用を足した後に水を流す「水洗レバー」のようなものです。トイレ（ブラウザ）に付いているこのレバー（コンシューマー）を引くと、排水管（WebSocketコネクション）を通じて用を下水処理場（サーバー）に送ることができます。

つまり、コンシューマーは、クライアント側（ブラウザ）でサーバーとやり取りするための「動力」や「仕組み」を提供する役割を果たしています。

チャネル

チャネル（channel）は、特定の機能やテーマに基づいて通信を整理するためのものです。コンシューマーは複数のチャネルにサブスクライブ（登録）できます。チャネルは、MVCのコントローラと似た役割を持ち、特定のタスクを処理します。

例：

  • ChatChannel：チャットメッセージのやり取りを担当
  • AppearancesChannel：ユーザーのオンラインステータスを管理

サブスクライバ

コンシューマーがチャネルにサブスクライブされると、そのチャネルのサブスクライバ（subscriber）になります。サブスクライバは、チャネルの更新情報を受け取るためのリスナーのようなものです。

Pub/Sub（パブリッシュ・サブスクライブ）

Pub/Subは、データを送る側（パブリッシャー）と受け取る側（サブスクライバー）の関係を管理する方法です。パブリッシャーは受信者を特定せずにメッセージを送信し、サブスクライバーは興味のあるテーマのメッセージを受信します。

ブロードキャスト

ブロードキャストは、特定のチャネルにサブスクライブしている全てのコンシューマーにメッセージを一斉送信する仕組みです。

図で説明すると

[ユーザー]
    |
[ブラウザ] <- (JavaScriptで動く) [コンシューマー]
    |
[WebSocketコネクション]
    |
[サーバー] 
  |
  |-- [ChatChannel]
  |      |
  |      |-- [ブロードキャスト: 新しいメッセージ]
  |
  |-- [AppearancesChannel]
         |
         |-- [ブロードキャスト: ユーザーのステータス更新]
  1. コンシューマー：クライアント側（ブラウザ）でWebSocketコネクションを管理するJavaScriptプログラム。
  2. チャネル：特定の機能やテーマに基づいてデータを管理する。例：ChatChannelやAppearancesChannel。
  3. サブスクライバ：コンシューマーがチャネルにサブスクライブされると、チャネルからの更新情報を受け取るリスナーになる。
  4. Pub/Sub：データの送信と受信を管理する方法。パブリッシャーがデータを送信し、サブスクライバーがデータを受け取る。
  5. ブロードキャスト：特定のチャネルにサブスクライブしている全てのコンシューマーにメッセージを一斉送信する。

脇毛で例えると

  1. チャネル：各脇毛の毛根がチャネルです。それぞれが独自の仕事をしている。
  2. サブスクライバ：毛根に栄養を送る血管がサブスクライバ。毛根が栄養を受け取るために存在している。
  3. Pub/Sub：血液が栄養を運ぶ方式がPub/Sub。栄養は特定の毛根に送られるわけではなく、必要な毛根が受け取る。
  4. ブロードキャスト：一斉に栄養を送ることがブロードキャスト。脇毛全体に栄養が行き渡る。

このように、各要素が連携して、リアルタイム通信を実現しているのです。