MENU
  1. ホーム
  2. React
  3. ReduxとWebSocketを活用したリアルタイムデータ更新の実装完全ガイド

ReduxとWebSocketを活用したリアルタイムデータ更新の実装完全ガイド

React

リアルタイムでデータを更新するWebアプリケーションは、ユーザーエクスペリエンスを大幅に向上させる重要な要素です。例えば、チャットアプリや株価のリアルタイム更新など、最新の情報を即時に提供する仕組みが求められる場面は多々あります。これを実現するためには、効率的で堅牢なデータ管理方法が必要です。

Reactで広く使用されているReduxは、状態管理を簡潔にし、大規模なアプリケーションでも扱いやすい構造を提供します。一方で、WebSocketは双方向通信を可能にし、リアルタイム性を担保するのに最適な技術です。この2つを組み合わせることで、ユーザーに対してスムーズなリアルタイムデータの提供が可能になります。

本記事では、ReduxとWebSocketを活用してリアルタイムデータ更新を実装する方法をステップバイステップで解説します。初学者でも理解しやすい内容からスタートし、実際のアプリケーションに応用できる具体的なコード例まで詳しく紹介します。

目次

Reduxの基本概念とリアルタイム更新の重要性

Reduxの概要


Reduxは、JavaScriptアプリケーションにおける状態管理を一元化するためのライブラリです。状態（State）を1つのストアにまとめ、アクションを介して状態を変更するという明確なルールを持っています。この仕組みにより、アプリケーション全体のデータフローが予測可能になり、大規模プロジェクトでもコードの保守性が向上します。

基本的な概念

  • ストア (Store): 状態を格納する単一のオブジェクト。
  • アクション (Action): 状態を変更するためのイベント情報を持つオブジェクト。
  • リデューサー (Reducer): アクションに基づいて状態をどのように更新するかを決定する純粋関数。

リアルタイムデータ更新が必要とされる理由


現代のWebアプリケーションでは、リアルタイム性がユーザーエクスペリエンスに直結します。例えば、以下のようなユースケースでは、即時のデータ反映が必須です：

  • チャットアプリケーション: 新しいメッセージを瞬時に表示する。
  • ストリーミングデータ: 株価やセンサー情報をリアルタイムで更新する。
  • オンラインコラボレーション: ドキュメントやホワイトボードの即時同期。

リアルタイムデータを扱う場合、Reduxのような明確な状態管理フレームワークと、WebSocketの双方向通信技術を組み合わせることで、複雑なデータ更新ロジックを効率的に構築できます。

本記事では、これらの基本概念を踏まえ、Reduxを利用したリアルタイム更新の基盤をどのように実装するかを詳しく説明します。

WebSocketの基本とReduxとの連携

WebSocketの仕組み


WebSocketは、双方向通信を可能にするプロトコルです。HTTPのようにリクエストとレスポンスの一方向通信ではなく、サーバーとクライアント間でリアルタイムなメッセージ交換が可能です。これにより、クライアントが更新を待つのではなく、サーバーから直接通知を受け取る仕組みが実現します。

WebSocketの基本プロセス

  1. 接続の確立: クライアントがWebSocketサーバーに接続リクエストを送信します。
  2. メッセージ交換: 接続が確立されると、クライアントとサーバーはリアルタイムでデータを送受信できます。
  3. 接続の終了: 必要に応じてクライアントまたはサーバーが接続を終了します。

Reduxとの連携


ReduxとWebSocketを組み合わせることで、リアルタイムデータの管理を効率化できます。以下のような連携方法があります：

連携の基本アイデア

  • WebSocketの受信データをReduxのアクションとして処理: WebSocketが受信したデータをReduxのアクションとしてディスパッチし、ストアの状態を更新します。
  • Reduxの状態をWebSocketを通じてサーバーに送信: 状態の変化を基に、サーバー側とリアルタイムに同期します。

シンプルな連携フロー

  1. WebSocket接続の初期化: アプリケーションが起動した際に接続を確立します。
  2. メッセージの受信: サーバーからのメッセージを受信し、Reduxアクションをディスパッチします。
  3. Reduxストアの更新: リデューサーが受け取ったデータを元に、ストアの状態を更新します。
  4. 状態の反映: 更新された状態をReactコンポーネントで利用し、UIを再描画します。

メリットと課題

メリット:

  • 明確なデータフローが維持され、リアルタイム更新が直感的に実装可能。
  • Reduxのストアでデータを一元管理できるため、バグが減少。

課題:

  • WebSocketの接続維持やエラー処理の実装が必要。
  • 大量のデータ受信時のパフォーマンス管理が課題となる可能性がある。

次章では、ReduxとWebSocketを組み合わせたプロジェクトのセットアップ方法を解説します。

プロジェクトセットアップと必要なパッケージ

環境構築手順


ReduxとWebSocketを利用したリアルタイムデータ更新のプロジェクトを開始するための環境を準備します。以下の手順でセットアップを行います。

1. Reactプロジェクトの作成


まず、Reactアプリケーションを作成します。

npx create-react-app redux-websocket-demo
cd redux-websocket-demo

2. 必要なパッケージのインストール


ReduxとWebSocketの実装に必要なライブラリをインストールします。

npm install redux react-redux redux-thunk redux-devtools-extension
npm install websocket
  • redux: Reduxのコアライブラリ。
  • react-redux: ReactとReduxを統合するためのバインディングライブラリ。
  • redux-thunk: 非同期処理を行うためのミドルウェア。
  • redux-devtools-extension: Reduxのデバッグツールをブラウザで利用可能にします。
  • websocket: WebSocket通信を実現するための軽量なライブラリ。

プロジェクト構成


以下のようにファイル構成を整理します：

src/
│
├── actions/           # Reduxアクション
├── components/        # Reactコンポーネント
├── middleware/        # カスタムミドルウェア (WebSocket用)
├── reducers/          # Reduxリデューサー
├── store/             # Reduxストアの設定
└── App.js             # メインアプリケーションコンポーネント

初期設定

1. Reduxストアのセットアップ


src/store/index.js ファイルを作成し、Reduxストアを設定します。

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

2. プロバイダーでアプリをラップする


src/index.jsで、ReactアプリをReduxストアでラップします。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

動作確認


ここまでで、ReactとReduxの基本セットアップが完了しました。ブラウザでアプリを起動し、エラーがないことを確認します。

次章では、WebSocket用のミドルウェアを作成し、リアルタイム通信をReduxで処理する方法を解説します。

WebSocket用ミドルウェアの作成と動作の概要

ミドルウェアとは


Reduxミドルウェアは、アクションがリデューサーに届く前にその内容を拡張、変更、または処理するための仕組みです。WebSocketをReduxと統合する場合、このミドルウェアを使ってWebSocket通信を管理します。

WebSocket用ミドルウェアの実装

以下のように、WebSocketを管理するカスタムミドルウェアを作成します。

1. ミドルウェアファイルの作成


src/middleware/websocketMiddleware.js を作成します。

const websocketMiddleware = (url) => {
  let socket = null;

  return ({ dispatch }) => (next) => (action) => {
    switch (action.type) {
      case 'WEBSOCKET_CONNECT':
        if (socket !== null) {
          socket.close();
        }
        // WebSocket接続を確立
        socket = new WebSocket(url);

        // 接続成功時の処理
        socket.onopen = () => {
          dispatch({ type: 'WEBSOCKET_CONNECTED' });
        };

        // メッセージ受信時の処理
        socket.onmessage = (event) => {
          const data = JSON.parse(event.data);
          dispatch({ type: 'WEBSOCKET_MESSAGE_RECEIVED', payload: data });
        };

        // 接続エラー時の処理
        socket.onerror = (error) => {
          dispatch({ type: 'WEBSOCKET_ERROR', payload: error });
        };

        // 接続終了時の処理
        socket.onclose = () => {
          dispatch({ type: 'WEBSOCKET_DISCONNECTED' });
        };
        break;

      case 'WEBSOCKET_DISCONNECT':
        if (socket !== null) {
          socket.close();
        }
        socket = null;
        break;

      case 'WEBSOCKET_SEND':
        if (socket !== null) {
          socket.send(JSON.stringify(action.payload));
        }
        break;

      default:
        break;
    }

    return next(action);
  };
};

export default websocketMiddleware;

2. ミドルウェアの適用


src/store/index.jsにこのミドルウェアを追加します。

import websocketMiddleware from '../middleware/websocketMiddleware';

const websocketURL = 'ws://example.com/socket'; // WebSocketサーバーのURL

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk, websocketMiddleware(websocketURL)))
);

export default store;

動作の概要

  1. 接続の確立
    dispatch({ type: 'WEBSOCKET_CONNECT' }) を呼び出すと、WebSocket接続が開始されます。
  2. メッセージの送受信
  • サーバーからメッセージを受信すると、WEBSOCKET_MESSAGE_RECEIVEDアクションが発行されます。
  • Reduxリデューサーで受信データを処理できます。
  • クライアントからサーバーにデータを送信するには、dispatch({ type: 'WEBSOCKET_SEND', payload: { ... } }) を使用します。
  1. 接続の終了
    dispatch({ type: 'WEBSOCKET_DISCONNECT' }) を呼び出すと、接続が終了します。

次のステップ


次章では、Reduxストアとアクションを設計し、リアルタイムデータを管理する具体的な方法を解説します。

Reduxストアとアクションの設計

リアルタイムデータ管理のためのアクション設計


WebSocketを使用したリアルタイムデータ更新では、データの送受信や状態の管理を効率的に行うため、適切なアクション設計が重要です。以下に必要なアクションを設計します。

アクションタイプの定義


まず、アクションタイプを定義するファイルを作成します。これにより、タイプの一貫性を保つことができます。

src/actions/types.js:

export const WEBSOCKET_CONNECT = 'WEBSOCKET_CONNECT';
export const WEBSOCKET_CONNECTED = 'WEBSOCKET_CONNECTED';
export const WEBSOCKET_DISCONNECT = 'WEBSOCKET_DISCONNECT';
export const WEBSOCKET_DISCONNECTED = 'WEBSOCKET_DISCONNECTED';
export const WEBSOCKET_MESSAGE_RECEIVED = 'WEBSOCKET_MESSAGE_RECEIVED';
export const WEBSOCKET_SEND = 'WEBSOCKET_SEND';
export const WEBSOCKET_ERROR = 'WEBSOCKET_ERROR';

アクションクリエーターの作成


アクションクリエーターを定義して、アクションを簡潔に作成できるようにします。

src/actions/websocketActions.js:

import {
  WEBSOCKET_CONNECT,
  WEBSOCKET_DISCONNECT,
  WEBSOCKET_SEND,
} from './types';

// WebSocket接続を開始
export const connectWebSocket = () => ({
  type: WEBSOCKET_CONNECT,
});

// WebSocket接続を終了
export const disconnectWebSocket = () => ({
  type: WEBSOCKET_DISCONNECT,
});

// WebSocketでメッセージを送信
export const sendWebSocketMessage = (message) => ({
  type: WEBSOCKET_SEND,
  payload: message,
});

リデューサーの設計


受信したデータやWebSocketの状態を管理するリデューサーを作成します。

リデューサーファイルの作成


src/reducers/websocketReducer.jsを作成します。

import {
  WEBSOCKET_CONNECTED,
  WEBSOCKET_DISCONNECTED,
  WEBSOCKET_MESSAGE_RECEIVED,
  WEBSOCKET_ERROR,
} from '../actions/types';

const initialState = {
  isConnected: false,
  messages: [],
  error: null,
};

const websocketReducer = (state = initialState, action) => {
  switch (action.type) {
    case WEBSOCKET_CONNECTED:
      return {
        ...state,
        isConnected: true,
        error: null,
      };
    case WEBSOCKET_DISCONNECTED:
      return {
        ...state,
        isConnected: false,
      };
    case WEBSOCKET_MESSAGE_RECEIVED:
      return {
        ...state,
        messages: [...state.messages, action.payload],
      };
    case WEBSOCKET_ERROR:
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default websocketReducer;

ルートリデューサーに統合


すべてのリデューサーを統合するため、ルートリデューサーを設定します。

src/reducers/index.js:

import { combineReducers } from 'redux';
import websocketReducer from './websocketReducer';

const rootReducer = combineReducers({
  websocket: websocketReducer,
});

export default rootReducer;

動作の確認

  • WebSocket接続を開始するには、dispatch(connectWebSocket())を呼び出します。
  • サーバーから受信したデータは、messagesとしてストアに保存されます。
  • 接続エラーや終了時も状態が正確に管理されます。

次のステップ


次章では、WebSocketを通じて受信したリアルタイムデータをReduxストアに反映させる具体的な実装方法を解説します。

リアルタイムデータの受信とストア更新の実装

WebSocketで受信したデータをReduxストアに反映する


Reduxを用いて、WebSocketから受信したデータをアクションとして処理し、ストアに更新する流れを実装します。このプロセスでは、前章で作成したミドルウェアとリデューサーを活用します。

WebSocketメッセージの受信とアクションディスパッチ


WebSocketから受信したデータは、ミドルウェアで処理され、WEBSOCKET_MESSAGE_RECEIVEDアクションとしてディスパッチされます。

src/middleware/websocketMiddleware.js（抜粋）:

socket.onmessage = (event) => {
  const data = JSON.parse(event.data); // サーバーからのメッセージをJSONとして解析
  dispatch({ type: 'WEBSOCKET_MESSAGE_RECEIVED', payload: data }); // データをアクションとしてディスパッチ
};

リデューサーで受信データを処理


リデューサーでは、WEBSOCKET_MESSAGE_RECEIVEDアクションを処理して、ストアのmessagesフィールドにデータを追加します。

src/reducers/websocketReducer.js（抜粋）:

case WEBSOCKET_MESSAGE_RECEIVED:
  return {
    ...state,
    messages: [...state.messages, action.payload], // 新しいメッセージを追加
  };

Reduxストアの更新結果をReactコンポーネントに反映

ストアの状態をコンポーネントで購読


React-ReduxのuseSelectorフックを利用して、Reduxストアの状態をReactコンポーネントに反映します。

src/components/MessageList.js:

import React from 'react';
import { useSelector } from 'react-redux';

const MessageList = () => {
  const messages = useSelector((state) => state.websocket.messages); // Reduxストアからメッセージを取得

  return (
    <div>
      <h2>リアルタイムメッセージ</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li> // メッセージをリスト表示
        ))}
      </ul>
    </div>
  );
};

export default MessageList;

WebSocket接続を管理するコンポーネント


WebSocket接続の開始と終了を管理するコンポーネントを作成します。

src/components/WebSocketManager.js:

import React from 'react';
import { useDispatch } from 'react-redux';
import { connectWebSocket, disconnectWebSocket } from '../actions/websocketActions';

const WebSocketManager = () => {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(connectWebSocket())}>接続</button>
      <button onClick={() => dispatch(disconnectWebSocket())}>切断</button>
    </div>
  );
};

export default WebSocketManager;

アプリケーションでコンポーネントを統合


作成したコンポーネントをアプリケーションに統合します。

src/App.js:

import React from 'react';
import WebSocketManager from './components/WebSocketManager';
import MessageList from './components/MessageList';

const App = () => {
  return (
    <div>
      <h1>ReduxとWebSocketのリアルタイム更新</h1>
      <WebSocketManager />
      <MessageList />
    </div>
  );
};

export default App;

動作確認

  1. 接続の開始: 「接続」ボタンをクリックしてWebSocket接続を確立します。
  2. メッセージの受信: サーバーから送信されたメッセージがリアルタイムでリストに表示されます。
  3. 接続の終了: 「切断」ボタンをクリックしてWebSocket接続を終了します。

次のステップ


次章では、WebSocket通信のエラー処理や再接続ロジックを実装し、アプリケーションの堅牢性を向上させる方法を解説します。

フロントエンドコンポーネントでのデータ活用

リアルタイムデータをReactコンポーネントで表示


Reduxストアからリアルタイムで更新されたデータを取得し、Reactコンポーネントで効率的に活用する方法を解説します。

1. Reduxストアの状態を購読


useSelectorフックを使用して、Reduxストアの状態をReactコンポーネントにバインドします。

以下は、ストアからリアルタイムのメッセージを取得して表示するコンポーネントの例です。

src/components/RealTimeMessageDisplay.js:

import React from 'react';
import { useSelector } from 'react-redux';

const RealTimeMessageDisplay = () => {
  const messages = useSelector((state) => state.websocket.messages); // Reduxストアからメッセージリストを取得

  return (
    <div>
      <h2>リアルタイムデータ表示</h2>
      {messages.length === 0 ? (
        <p>メッセージはまだありません。</p>
      ) : (
        <ul>
          {messages.map((message, index) => (
            <li key={index}>{message}</li> // 各メッセージをリストとして表示
          ))}
        </ul>
      )}
    </div>
  );
};

export default RealTimeMessageDisplay;

データのフィルタリングとフォーマット


受信データが多い場合やフォーマットが必要な場合、ストアから取得したデータを加工して表示することが重要です。

例: 日付フォーマットを適用したメッセージ表示


以下は、受信したメッセージにタイムスタンプを追加し、表示時にフォーマットする例です。

src/components/FormattedMessageList.js:

import React from 'react';
import { useSelector } from 'react-redux';

const FormattedMessageList = () => {
  const messages = useSelector((state) => state.websocket.messages);

  const formatTimestamp = (timestamp) => {
    const date = new Date(timestamp);
    return date.toLocaleString(); // ユーザーのロケールに合わせてフォーマット
  };

  return (
    <div>
      <h2>フォーマットされたメッセージ</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>
            <strong>{formatTimestamp(message.timestamp)}</strong>: {message.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FormattedMessageList;

データの編集と送信


クライアントがリアルタイムデータを編集してサーバーに送信するケースでは、Reduxのアクションを利用します。

例: ユーザー入力をWebSocketで送信


以下は、ユーザーが入力したテキストをリアルタイムでサーバーに送信するコンポーネントの例です。

src/components/MessageInput.js:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { sendWebSocketMessage } from '../actions/websocketActions';

const MessageInput = () => {
  const [message, setMessage] = useState('');
  const dispatch = useDispatch();

  const handleSendMessage = () => {
    if (message.trim() !== '') {
      dispatch(sendWebSocketMessage({ text: message, timestamp: Date.now() })); // メッセージとタイムスタンプを送信
      setMessage(''); // 入力フィールドをクリア
    }
  };

  return (
    <div>
      <h2>メッセージ送信</h2>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="メッセージを入力"
      />
      <button onClick={handleSendMessage}>送信</button>
    </div>
  );
};

export default MessageInput;

アプリケーションへの統合


作成したコンポーネントを統合し、リアルタイムでデータを表示・送信する機能をアプリに追加します。

src/App.js:

import React from 'react';
import RealTimeMessageDisplay from './components/RealTimeMessageDisplay';
import FormattedMessageList from './components/FormattedMessageList';
import MessageInput from './components/MessageInput';

const App = () => {
  return (
    <div>
      <h1>リアルタイムアプリケーション</h1>
      <MessageInput />
      <RealTimeMessageDisplay />
      <FormattedMessageList />
    </div>
  );
};

export default App;

次のステップ


次章では、WebSocket通信におけるエラー処理と再接続ロジックを実装し、アプリケーションの信頼性を向上させる方法を解説します。

エラー処理と再接続のロジック

WebSocket通信におけるエラー処理の重要性


リアルタイム通信を使用するWebアプリケーションでは、予期しないエラーや接続の中断が発生する可能性があります。これらに適切に対処することで、アプリケーションの信頼性を向上させることができます。

エラー処理の実装

WebSocketミドルウェアでエラー処理を追加


src/middleware/websocketMiddleware.js内で、onerrorイベントを監視して適切なエラー処理を実装します。

socket.onerror = (error) => {
  console.error('WebSocketエラー:', error);
  dispatch({ type: 'WEBSOCKET_ERROR', payload: error.message });
};

エラーの状態をReduxストアで管理


エラー情報をストアに保存することで、ユーザーに通知を表示したりログに記録したりできます。

src/reducers/websocketReducer.js（抜粋）:

case WEBSOCKET_ERROR:
  return {
    ...state,
    error: action.payload, // エラーメッセージを保存
  };

エラーメッセージを表示するコンポーネント


エラーが発生した場合にユーザーに通知を表示します。

src/components/ErrorNotification.js:

import React from 'react';
import { useSelector } from 'react-redux';

const ErrorNotification = () => {
  const error = useSelector((state) => state.websocket.error);

  return (
    error && (
      <div style={{ color: 'red', fontWeight: 'bold' }}>
        エラー: {error}
      </div>
    )
  );
};

export default ErrorNotification;

再接続ロジックの実装

自動再接続の設定


WebSocketが切断された際に自動的に再接続する仕組みをミドルウェアに追加します。

src/middleware/websocketMiddleware.js（抜粋）:

socket.onclose = () => {
  console.warn('WebSocket切断');
  dispatch({ type: 'WEBSOCKET_DISCONNECTED' });

  // 再接続の試行
  setTimeout(() => {
    console.log('WebSocket再接続を試行中...');
    dispatch({ type: 'WEBSOCKET_CONNECT' });
  }, 5000); // 5秒後に再接続
};

再接続試行の回数制限


再接続の試行回数を制限することで、無限ループを防ぎます。

src/middleware/websocketMiddleware.js（更新）:

let reconnectAttempts = 0;
const maxReconnectAttempts = 5;

socket.onclose = () => {
  console.warn('WebSocket切断');
  dispatch({ type: 'WEBSOCKET_DISCONNECTED' });

  if (reconnectAttempts < maxReconnectAttempts) {
    reconnectAttempts++;
    setTimeout(() => {
      console.log(`WebSocket再接続(${reconnectAttempts}/${maxReconnectAttempts})を試行中...`);
      dispatch({ type: 'WEBSOCKET_CONNECT' });
    }, 5000);
  } else {
    console.error('WebSocket再接続の最大回数に達しました');
  }
};

再接続成功時に試行回数をリセット


接続が成功した場合、試行回数をリセットします。

socket.onopen = () => {
  console.log('WebSocket接続成功');
  reconnectAttempts = 0; // 試行回数をリセット
  dispatch({ type: 'WEBSOCKET_CONNECTED' });
};

アプリケーションへの統合


エラーメッセージを表示するコンポーネントをアプリケーションに統合し、再接続の動作を確認します。

src/App.js（更新）:

import React from 'react';
import WebSocketManager from './components/WebSocketManager';
import RealTimeMessageDisplay from './components/RealTimeMessageDisplay';
import ErrorNotification from './components/ErrorNotification';

const App = () => {
  return (
    <div>
      <h1>リアルタイムアプリケーション</h1>
      <ErrorNotification />
      <WebSocketManager />
      <RealTimeMessageDisplay />
    </div>
  );
};

export default App;

動作確認

  1. WebSocketの接続を手動で切断して、再接続ロジックが機能することを確認します。
  2. サーバーがオフラインの場合、エラーメッセージが表示されることを確認します。
  3. 最大試行回数を超えた場合の動作を確認します。

次のステップ


次章では、具体的な応用例として、リアルタイムチャットアプリを構築する演習を行います。

演習：チャットアプリで学ぶリアルタイムデータ更新

演習概要


ReduxとWebSocketを使用して、リアルタイムでメッセージをやり取りする簡易チャットアプリを作成します。この演習を通じて、リアルタイム通信の仕組みを実践的に学べます。

アプリの機能

  1. ユーザーがメッセージを入力し、送信ボタンをクリックするとサーバーに送信されます。
  2. サーバーは受信したメッセージを全クライアントに配信します。
  3. クライアントは受信したメッセージをリアルタイムで表示します。

必要なコード

1. Reduxのアクション


チャットメッセージの送信と受信のアクションを作成します。

src/actions/chatActions.js:

import { WEBSOCKET_SEND } from './types';

export const sendMessage = (text) => ({
  type: WEBSOCKET_SEND,
  payload: { text, timestamp: Date.now() },
});

2. Reduxのリデューサー


メッセージのリストを管理します。

src/reducers/chatReducer.js:

import { WEBSOCKET_MESSAGE_RECEIVED } from '../actions/types';

const initialState = {
  messages: [],
};

const chatReducer = (state = initialState, action) => {
  switch (action.type) {
    case WEBSOCKET_MESSAGE_RECEIVED:
      return {
        ...state,
        messages: [...state.messages, action.payload],
      };
    default:
      return state;
  }
};

export default chatReducer;

ルートリデューサーに統合します:

import { combineReducers } from 'redux';
import chatReducer from './chatReducer';

const rootReducer = combineReducers({
  chat: chatReducer,
});

export default rootReducer;

3. チャットコンポーネント

メッセージ送信フォーム:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { sendMessage } from '../actions/chatActions';

const ChatInput = () => {
  const [message, setMessage] = useState('');
  const dispatch = useDispatch();

  const handleSend = () => {
    if (message.trim()) {
      dispatch(sendMessage(message));
      setMessage('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="メッセージを入力"
      />
      <button onClick={handleSend}>送信</button>
    </div>
  );
};

export default ChatInput;

メッセージリストの表示:

import React from 'react';
import { useSelector } from 'react-redux';

const ChatMessages = () => {
  const messages = useSelector((state) => state.chat.messages);

  return (
    <div>
      <h2>チャットメッセージ</h2>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>
            <strong>{new Date(msg.timestamp).toLocaleTimeString()}</strong>: {msg.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ChatMessages;

4. アプリの統合

src/App.js:

import React from 'react';
import ChatInput from './components/ChatInput';
import ChatMessages from './components/ChatMessages';

const App = () => {
  return (
    <div>
      <h1>リアルタイムチャットアプリ</h1>
      <ChatMessages />
      <ChatInput />
    </div>
  );
};

export default App;

サーバー設定


演習用にシンプルなWebSocketサーバーを構築します（Node.js例）:

server.js:

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  socket.on('message', (message) => {
    // メッセージを全クライアントに配信
    server.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

console.log('WebSocketサーバーがポート8080で起動しました');

動作確認

  1. サーバーを起動します: node server.js。
  2. アプリケーションをブラウザで開きます。
  3. 複数のクライアントを開いて、メッセージがリアルタイムで同期されることを確認します。

次のステップ


この演習を基に、ファイルの共有、リアルタイム通知、データビジュアライゼーションなど、さらに高度なアプリケーションに応用できます。

まとめ

本記事では、ReduxとWebSocketを活用したリアルタイムデータ更新の実装方法について解説しました。Reduxの明確な状態管理とWebSocketの双方向通信を組み合わせることで、効率的で拡張性のあるリアルタイムアプリケーションを構築できることを学びました。

具体的には、以下のステップを通じて実践しました：

  • ReduxとWebSocketの基本概念の理解
  • Reduxストアとアクション、リデューサーの設計
  • WebSocket用ミドルウェアの作成
  • エラー処理や再接続ロジックの実装
  • 簡易チャットアプリの構築を通じた実践的な演習

リアルタイムデータを利用するアプリケーションの構築は複雑ですが、今回の内容を基にさまざまな応用が可能です。例えば、リアルタイム通知、データストリームの可視化、オンラインコラボレーションツールなど、幅広いプロジェクトに応用できます。

今後のステップとして、サーバー側の最適化やデータセキュリティの強化を進めることで、さらに高品質なリアルタイムアプリケーションを目指しましょう。

React
React リアルタイムデータ WebSocket Redux

コメント

コメントする

目次