React Academy · レッスン

ReactでSocket.IOを使う

ReactからSocket.IO serverに接続し、eventsをlistenしてhooksからmessagesをemitします。

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

Socket.IO を使う理由

Socket.IO は、HTTP ロングポーリングへのフォールバックを備え、WebSocket の上にルーム、名前空間、自動再接続、イベントベースのメッセージングを追加します。生の WebSocket よりもはるかに扱いやすくなります。

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

Socket.IO のクライアントパッケージをインストールします。

npm install socket.io-client

Socket インスタンスの作成

接続を共有し、レンダーのたびに再作成されないように、React コンポーネントの外で io(url) を呼び出します。シングルトンとしてエクスポートしてください。

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

useEffect での接続

コンポーネントのマウント時に接続し、アンマウント時に切断して、不要な接続が残らないようにします。

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

イベントのリッスン

socket.on('event', handler) を使用してイベントを購読します。再レンダー時にハンドラーが重複しないよう、クリーンアップ関数でリスナーを削除してください。

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

イベントの発行

socket.emit('event', data) を呼び出してサーバーにデータを送信します。最後の引数としてコールバック（確認応答）を指定することもできます。

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

カスタム useSocket フック

ソケット接続のロジックをカスタムフックにまとめると、複数のコンポーネントで再利用できます。

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

ルームと名前空間

join イベントを発行してルームに参加します（サーバー側で処理します）。名前空間（io('/chat')）を使用すると、接続レベルでソケットのトラフィックを分離できます。

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

接続状態

connect、disconnect、connect_error イベントを使って接続状態を追跡します。

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

Volatile イベントの発行

一部のパケットが失われても問題ないメッセージ（カーソル位置やゲームの状態など）には、socket.volatile.emit() を使用します。

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

Socket.IO と生の WebSocket の比較

Socket.IO は WebSocket の上にルーム管理、名前空間、自動再接続、バイナリサポートを追加します。オーバーヘッドを最小限にしたい場合や、サーバーが Socket.IO に対応していない場合は、生の WebSocket を使用してください。

クイックチェック

なぜ useEffect のクリーンアップで Socket.IO のイベントリスナーを削除する必要がありますか？

まとめ

io(url, { autoConnect: false }) でシングルトンの socket インスタンスを作成します。useEffect で接続と切断を行い、クリーンアップでは必ずリスナーを削除し、socket.emit() でイベントを発行します。ロジックはカスタムフックにまとめて再利用してください。

よくある質問

「ReactでSocket.IOを使う」レッスンは無料ですか？

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

「ReactでSocket.IOを使う」で何を学びますか？

ReactからSocket.IO serverに接続し、eventsをlistenしてhooksからmessagesをemitします。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ReactでSocket.IOを使う」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← React Academyに戻る