Elixir & Phoenix: Scalable Backend Development · レッスン

Phoenix Channelsによるリアルタイム機能

WebSocket上のChannelsを使い、Phoenixアプリに双方向のリアルタイム通信を追加します。

レッスン 4/413 ステップ

「Phoenix Channelsによるリアルタイム機能」はCoddyKit上の無料Elixir & Phoenix: Scalable Backend Developmentレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはElixir & Phoenix: Scalable Backend Development学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Elixir & Phoenix: Scalable Backend Developmentコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

What Are Channels?

Phoenix Channels provide a real-time, bidirectional messaging layer over WebSockets (with fallbacks). Perfect for chat, notifications, and live dashboards.

The Socket Layer

Clients connect to a Socket, which authenticates the connection and routes to topics. It is defined in your endpoint.

socket "/socket", MyAppWeb.UserSocket,
  websocket: true,
  longpoll: false

Defining a UserSocket

The socket module declares which channels handle which topic patterns and how to connect.

defmodule MyAppWeb.UserSocket do
  use Phoenix.Socket
  channel "room:*", MyAppWeb.RoomChannel
  def connect(_params, socket, _info), do: {:ok, socket}
  def id(_socket), do: nil
end

Topics and Subscriptions

A topic is a string like room:lobby. Clients join a topic to send and receive messages scoped to it.

Creating a Channel

A channel module handles join and incoming events with handle_in.

defmodule MyAppWeb.RoomChannel do
  use MyAppWeb, :channel
  def join("room:" <> _id, _params, socket) do
    {:ok, socket}
  end
end

Handling Incoming Messages

handle_in/3 reacts to events pushed by clients. Return :noreply or reply to the sender.

def handle_in("new_msg", %{"body" => body}, socket) do
  broadcast!(socket, "new_msg", %{body: body})
  {:noreply, socket}
end

Broadcasting to a Topic

broadcast!/3 sends a message to EVERY subscriber of the topic, enabling real-time fan-out.

broadcast!(socket, "new_msg", %{body: "Hello everyone"})

Replying to the Sender

Return {:reply, {:ok, payload}, socket} to answer only the client that sent the event.

def handle_in("ping", _payload, socket) do
  {:reply, {:ok, %{pong: true}}, socket}
end

Pushing from the Server

Use push/3 to send a message to one connected client, for example after async work completes.

push(socket, "notification", %{text: "Job finished"})

The JavaScript Client

On the front end, the Phoenix JS client connects, joins a topic, and listens for events.

let channel = socket.channel("room:lobby", {})
channel.join()
channel.on("new_msg", payload => console.log(payload.body))

Presence Tracking

Phoenix.Presence builds on Channels to track who is online across the cluster, syncing join and leave events automatically.

Quick Check

Test your Channels knowledge.

対話的なレッスンで答える

Recap

You added real-time features with Channels:

Clients connect to a Socket and join topics
Channels handle join and handle_in events
broadcast! fans out, push/reply target one client
Presence tracks online users on top of Channels

無料で開始

AI チューターと学ぶ Elixir — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 12
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「Phoenix Channelsによるリアルタイム機能」レッスンは無料ですか？

はい。「Phoenix Channelsによるリアルタイム機能」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Elixir & Phoenix: Scalable Backend Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Elixir & Phoenix: Scalable Backend Developmentコースには全4レッスンが含まれています。

「Phoenix Channelsによるリアルタイム機能」で何を学びますか？

WebSocket上のChannelsを使い、Phoenixアプリに双方向のリアルタイム通信を追加します。ブラウザで直接実行するハンズオンコードでElixir & Phoenix: Scalable Backend Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Elixir & Phoenix: Scalable Backend Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのElixir & Phoenix: Scalable Backend Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Phoenix Channelsによるリアルタイム機能」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このElixir & Phoenix: Scalable Backend Developmentレッスンでコードを書いて実行できますか？

はい。すべてのElixir & Phoenix: Scalable Backend Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Elixir & Phoenix: Scalable Backend Developmentに戻る