Frontend Academy · レッスン

Socket.ioクライアントの統合

Socket.ioクライアントに接続し、名前付きイベントをリッスンして、サーバーにデータを送信し、再接続処理を行い、クライアント側からルームを管理します。

「Socket.ioクライアントの統合」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

生のWebSocketにSocket.ioが加える機能

Socket.ioはWebSocket上で動作する人気のライブラリです。自動再接続、long-pollingへのフォールバック、ルーム／名前空間、確認コールバック、名前付きイベントを追加します。クライアントライブラリとサーバーライブラリ（Node.js）を組み合わせて使用します。

クライアントのインストール

socket.io-clientをインストールします。サーバーのメジャーバージョンと一致している必要があります。

npm install socket.io-client

接続

ioをインポートし、サーバーURLに接続します。Socketインスタンスが返されます。

import { io } from 'socket.io-client';

const socket = io('https://api.example.com', {
  transports: ['websocket'], // skip polling fallback for speed
  auth: { token: localStorage.getItem('jwt') }
});

socket.on('connect', () => console.log('connected', socket.id));

イベントの送信

socket.emit(eventName, payload)は、データを添えた名前付きイベントを送信します。生のsendとJSON.parseを組み合わせるより、はるかに扱いやすい方法です。

socket.emit('chat-message', {
  room: 'general',
  text: 'Hello everyone!'
});

socket.emit('typing', { user: 'Alice' });

イベントのリッスン

socket.on(eventName, handler)でリスナーを登録します。サーバーが送信したイベントはここで受け取ります。

socket.on('chat-message', (msg) => {
  console.log(`${msg.user}: ${msg.text}`);
  appendMessage(msg);
});

socket.on('user-joined', (user) => {
  console.log(`${user.name} joined`);
});

確認（Ackコールバック）

emitの最後の引数にコールバックを渡すと、サーバーはレスポンスを添えてそのコールバックを呼び出せます。RPCのように利用できます。

socket.emit('create-post', { title: 'Hello' }, (response) => {
  if (response.error) {
    console.error(response.error);
  } else {
    console.log('Created post', response.id);
  }
});

PromiseベースのemitWithAck

最新のSocket.ioでは、Promiseを返すemitWithAckが提供されています。

try {
  const response = await socket.emitWithAck('create-post', { title: 'Hello' });
  console.log('Created', response.id);
} catch (err) {
  console.error('Failed', err);
}

ルーム

ルームは、サーバー側でソケットをグループ化したものです。クライアントはイベントを送信して参加・退出し、サーバーはio.to(room).emit()を使ってブロードキャストします。

// Client:
socket.emit('join-room', { roomId: 'general' });

// Listen to messages in any room you've joined:
socket.on('room-message', ({ room, message }) => {
  if (room === activeRoom) appendMessage(message);
});

// Leave:
socket.emit('leave-room', { roomId: 'general' });

名前空間

名前空間は、同じサーバー上にある独立した通信チャネルです。たとえば、/chatや/adminが該当します。URLの末尾に名前空間を付けることで接続できます。

const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');

組み込みの再接続

Socket.ioは指数バックオフを使って自動的に再接続します。オプションで設定できます。

const socket = io({
  reconnection: true,
  reconnectionAttempts: Infinity,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 30000,
  randomizationFactor: 0.5
});

socket.on('reconnect', (attempt) => console.log('reconnected after', attempt));
socket.on('reconnect_attempt', (attempt) => console.log('trying...', attempt));

切断の処理

切断イベントをリッスンしてUIを更新します（「再接続中…」バナーを表示するなど）。

socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
  if (reason === 'io server disconnect') {
    // Server kicked us — must reconnect manually
    socket.connect();
  }
});

Reactとの統合

ソケットのライフサイクルをカスタムフックまたはContextプロバイダーにまとめます。

// useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';

let socket: Socket;

export function useSocket() {
  const [connected, setConnected] = useState(false);
  useEffect(() => {
    if (!socket) socket = io('/');
    socket.on('connect', () => setConnected(true));
    socket.on('disconnect', () => setConnected(false));
    return () => { /* keep socket alive across remounts */ };
  }, []);
  return { socket, connected };
}

Socket.ioと生のWebSocketの使い分け

Socket.io：ルーム、確認コールバック、自動再接続、トランスポートのフォールバックをすぐに利用したい場合に適しています。生のWebSocket：プロトコルを細かく制御したい場合、バンドルサイズを最小限にしたい場合、またはSocket.io以外のサーバーと相互運用する場合に適しています。

確認問題

Socket.ioのemit(event, payload, callback)における第3引数のコールバックでは、何が可能になりますか？

まとめ：Socket.ioクライアント

WebSocket上で動作するライブラリで、ルーム、名前空間、確認、自動再接続、ポーリングへのフォールバックを提供します。io(url, options)で接続します。emit(event, payload)で名前付きイベントを送信し、on(event, handler)でリッスンします。RPC形式には第3引数のコールバックまたはemitWithAckを使用します。ルームはサーバー側で管理し、名前空間はURLの末尾で指定します。再接続機能は組み込まれています。Reactではライフサイクルをフックにまとめてください。

よくある質問

「Socket.ioクライアントの統合」レッスンは無料ですか？

はい。「Socket.ioクライアントの統合」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Socket.ioクライアントの統合」で何を学びますか？

Socket.ioクライアントに接続し、名前付きイベントをリッスンして、サーバーにデータを送信し、再接続処理を行い、クライアント側からルームを管理します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

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

「Socket.ioクライアントの統合」レッスンにはどのくらい時間がかかりますか？

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

このFrontend Academyレッスンでコードを書いて実行できますか？

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

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

← Frontend Academyに戻る