socket.ioを使って受信したデータをreactで作成したページにリアルタイムで表示したい

Question

標題の通りsocket.ioを使って受信したデータをreactを使って作成したページにリアルタイムで更新・表示することを考えています。

このために考えた方法は以下の通りです。

1. reactのcontextを使ったコンポーネント内でsocket.ioを使って初期データを受信(initial_data_to_browserイベント)。データ形式は連想配列（オブジェクトの配列）。
2. 受信したデータはuseRefで作成したデータ更新操作用の変数(socketData)に保存し、このsocketDataをuseStateで作成した変数(contextData)に保存。このcontextDataを他のコンポーネントへ渡す変数とする。
3. 初期データの受信後は１０秒ごとに新規データを受信(test_emit_10sイベント)。新規データは連想配列ではなく１つのオブジェクト。
4. socketDataの更新は、受信したオブジェクトを追加し、一番古いオブジェクトを削除する。
5. 更新後のsocketDataをsetContextDataでcontextDataに保存。

そして、作成したコードが以下です。

dataContext.tsx(データ受信、更新用にcontextを使って作成したもの)

import { ReactNode } from "react";
import {useContext, createContext, useState, useEffect, useRef} from "react";
import {io, Socket} from "socket.io-client";

//console.logでの日時表示用の関数
const current_time_readable = () => {
    let date_obj = new Date();
    return `${date_obj.getUTCFullYear()}-${('0' + (date_obj.getUTCMonth() + 1)).slice(-2)}-${('0' + date_obj.getUTCDate()).slice(-2)} ${('0' + date_obj.getUTCHours()).slice(-2)}:${('0' + date_obj.getUTCMinutes()).slice(-2)}:${('0' + date_obj.getUTCSeconds()).slice(-2)}`;
};

type Props = {
    children: ReactNode;
}

//Contextの作成。contextDataを他のコンポーネントへ渡す
const DataContext = createContext({
    contextData: [] as Array<any>,
});

//socketオブジェクトを作成して通信を開始。
const socket: Socket = io("http://***.***.***.***");

const DataProvider = (props: Props) => {
    //他のコンポーネントへ渡すcontextData変数をuseStateで作成
    const [contextData, setContextData] = useState<Array<any>>([]);

    //データの一時保存、更新用の変数をuseRefで作成
    let socketData = useRef<Array<any>>([]);

    useEffect(() => {

        socket.on("connect_error", (e) => {
            console.log(e);
        });

        //初期データ受信用のsocketイベント
        socket.on('initial_data_to_browser', (data) => {
            //受信データをsocketDataへ保存
            socketData.current = data;

　　　          //useRef変数の確認表示
            console.log('initialData');
            console.log(socketData.current);

          　　　//contextDataへsocketDataを保存
            setContextData(() => socketData.current);

            //contextDataの確認表示（ステートの確認表示）
            console.log('stateData');
            console.log(contextData);
        });

        //新規データ受信用のsocketイベント
        socket.on('test_emit_10s', (data) => {
　　　　　　　　　       //受信時間の表示
            console.log(`${current_time_readable()} | test_data received`);

            //古いデータを１つだけ削除
            socketData.current.shift();

            //最新データを追加
            socketData.current.push(data);

            //データの更新結果の確認表示
            console.log('socketData');
            console.log(socketData.current);

            //contextDataへ更新結果を保存
            setContextData(socketData.current);

            //contextDataの確認表示(ステートの確認表示)
            console.log('contextData');
            console.log(contextData);
        });

        return () => {
            //コンポーネントがアンマウントされた時にsocket通信を終了
            socket.disconnect()
        };
    }, []);

    return (
        //他のコンポーネントへの出力としてcontextDataを設定
        <DataContext.Provider value={{contextData}}>
            {props.children}
        </DataContext.Provider>
    );
}

const useData = () => useContext(DataContext);

export { DataProvider, useData }

dataCard.tsx(データ表示用のコンポーネント)

import {VFC} from "react";
import {Heading} from "@chakra-ui/react";

import {useData} from "../../context/dataContext";
import {chartDataType} from "../../types/chartDataType";

//表示データに現在時刻を付与するための関数
const current_time_readable = () => {
    let date_obj = new Date();
    return `${date_obj.getUTCFullYear()}-${('0' + (date_obj.getUTCMonth() + 1)).slice(-2)}-${('0' + date_obj.getUTCDate()).slice(-2)} ${('0' + date_obj.getUTCHours()).slice(-2)}:${('0' + date_obj.getUTCMinutes()).slice(-2)}:${('0' + date_obj.getUTCSeconds()).slice(-2)}`;
};

type Props = {
    dataName: string;
};

export const ChartCard: VFC<Props> = (props) => {
    const {dataName} = props;

    //contextDataをchartDataとして受け取り
    const chartData = useData().contextData;
    const propNameData: Array<chartDataType> = [];

    //chartDataから特定の項目のデータを抽出して新たに配列を作成
    if (chartData) {
        chartData.forEach((data) => {
            propNameData.push({
                value: data[dataName],
                unixTime: data['end_time_unix'],
            });
        });
    }

    return (
        <>
            {
                //データの表示
                propNameData ? (propNameData.map((data: any) => (
                    <Heading as="h1" key={data.unixTime}>{`${current_time_readable()} | ${data.unixTime} | ${data.value}`}</Heading>
                ))) : null
            }
        </>
    )
}

上記のコードだとdataContext.tsxでは socketDataの保存・更新はうまくいっているのですが、contextDataへの保存がうまくいっておらず空配列のままです（initial_data_to_browser、test_emit_10sのどちらのイベント発生時でも）。
dataCard.tsxの表示は初期データはブラウザに表示されるのですが、その後の更新データは表示されません。この点に関しては、dataContext.tsxでcontextDataは空のままなのに初期データだけがdataCard.tsxに渡されているのが不思議です。
dataCard.tsxはコンポーネントの上位階層で<DataProvider>タグで囲んでいます（間にルーティングのためのコンポーネントは存在しています）。

dataCard.tsxで初期データ・更新データをリアルタイムに表示するにはどう修正すればいいでしょうか？
よろしくお願いします。

Comments

[Eduardo]

Hello, sorry for the inconvenience. I'm trying to do something similar and I can't, I'm just starting with React and socket, you can post the complete code in a repository like github, to have it as a guide.
Thank you.

Answer 1

useStateは値が更新されているかどうかの判定にObject.is関数を用いています。したがって、今のコードのように同一の配列をsetContextDataに渡しても、変更はないと判断されビューは更新されません。
（つまりReactは配列の中身まで調べません）

結果としてinitial_data_to_browserのときには読み込んだデータがセットされますが、それ以降のtest_emit_10sでは値が変化しなかったと判断され画面が更新されません。

次のようにスプレッド構文などを用いて配列を新しく作り直すことでビューが更新されるようになるはずです。

//新規データ受信用のsocketイベント
socket.on('test_emit_10s', (data) => {
  // ...省略
  //contextDataへ更新結果を保存
  setContextData([...socketData.current]);
  // ...省略
 });

dataContext.tsxでcontextDataは空のままなのに初期データだけがdataCard.tsxに渡されているのが不思議です。

これはsetContextDataを呼び出してもcontextDataが即座に更新されるわけではないからです。
また、useEffect関数の第二引数でcontextDataを指定していないので、useEffect内のcontextDataは初回実行時のものが利用され続けます。したがって実際にはcontextDataが更新されていたとしてもconsole画面には空の配列が表示されます。

余談ですが、連想配列とオブジェクトの配列は別物です。今回のはオブジェクトの配列ですよね。
あと、socketDataはなんのために用意されているのでしょうか。私なら下記のようにcontextDataにそのままデータを突っ込んでしまいます。

//初期データ受信用のsocketイベント
socket.on("initial_data_to_browser", (data) => {
  setContextData(data);
});

//新規データ受信用のsocketイベント
socket.on("test_emit_10s", (data) => {
  setContextData(prev => [...prev.slice(1), data]);
});

Comments

[pierogi.user]

回答ありがとうございます。おかげで意図通りの動作をするようになりました。
contextDataにデータを直接書き込む方法も教えていただきありがとうございます。
これでしたらsocketDataは不要ですね。
ありがとうございました。

[miyaharu]

報告ありがとうございます。お力になれたようで良かったです。