Reactで学ぶデータ取得とフォーム送信を組み合わせたCRUD操作の実装例

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')  // APIエンドポイント
      .then(response => response.json())
      .then(data => {
        setData(data);  // データを状態に保存
        setLoading(false);  // ローディング完了
      })
      .catch(error => console.error('Error fetching data:', error));
  }, []);  // 空の依存配列で、最初のレンダリング時のみ実行される

  if (loading) {
    return <div>Loading...</div>;  // ローディング中
  }

  return (
    <div>
      <h3>Fetched Data:</h3>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>  // データをリストとして表示
        ))}
      </ul>
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h3>Fetched Data:</h3>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

useEffect(() => {
  fetchData();
}, [someVariable]);  // someVariableが変更されたときにデータを再取得

import React, { useState } from 'react';

function FormComponent() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();  // ページのリロードを防ぐ
    console.log('Name:', name, 'Email:', email);
    // フォームデータをサーバーに送信する処理を書く
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name</label>
        <input type="text" value={name} onChange={handleNameChange} />
      </div>
      <div>
        <label>Email</label>
        <input type="email" value={email} onChange={handleEmailChange} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

const handleSubmit = async (e) => {
  e.preventDefault();  // ページのリロードを防ぐ

  const data = {
    name: name,
    email: email,
  };

  try {
    const response = await fetch('https://api.example.com/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),  // データをJSON形式で送信
    });

    if (!response.ok) {
      throw new Error('Failed to submit');
    }

    const result = await response.json();
    console.log('Submission successful:', result);
  } catch (error) {
    console.error('Error during submission:', error);
  }
};

const [error, setError] = useState('');

const handleSubmit = async (e) => {
  e.preventDefault();

  if (!name || !email) {
    setError('Name and Email are required');
    return;
  }

  setError('');  // エラーメッセージをリセット

  const data = {
    name: name,
    email: email,
  };

  // サーバーに送信
  try {
    const response = await fetch('https://api.example.com/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error('Failed to submit');
    }

    const result = await response.json();
    console.log('Submission successful:', result);
  } catch (error) {
    console.error('Error during submission:', error);
  }
};

const [submitted, setSubmitted] = useState(false);

const handleSubmit = async (e) => {
  e.preventDefault();

  const data = { name, email };

  try {
    const response = await fetch('https://api.example.com/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) throw new Error('Failed to submit');
    const result = await response.json();
    setSubmitted(true);  // フォーム送信成功後、フラグを更新
    console.log('Submission successful:', result);
  } catch (error) {
    console.error('Error during submission:', error);
  }
};

return (
  <div>
    {submitted ? (
      <p>Thank you for your submission!</p>  // 送信後のメッセージ
    ) : (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Name</label>
          <input type="text" value={name} onChange={handleNameChange} />
        </div>
        <div>
          <label>Email</label>
          <input type="email" value={email} onChange={handleEmailChange} />
        </div>
        <button type="submit">Submit</button>
      </form>
    )}
  </div>
);

const handleCreate = async (newData) => {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newData),
    });

    if (!response.ok) {
      throw new Error('Failed to create data');
    }

    const createdData = await response.json();
    setData((prevData) => [...prevData, createdData]);  // 新しいデータを状態に追加
  } catch (error) {
    console.error('Error creating data:', error);
  }
};

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);  // サーバーから取得したデータを状態に保存
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  fetchData();
}, []);  // コンポーネントがマウントされた時にのみ実行

const handleUpdate = async (id, updatedData) => {
  try {
    const response = await fetch(`https://api.example.com/data/${id}`, {
      method: 'PUT',  // または PATCH
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updatedData),
    });

    if (!response.ok) {
      throw new Error('Failed to update data');
    }

    const updatedItem = await response.json();
    setData((prevData) => 
      prevData.map(item => 
        item.id === id ? updatedItem : item
      )
    );  // 更新したデータを状態に反映
  } catch (error) {
    console.error('Error updating data:', error);
  }
};

const handleDelete = async (id) => {
  try {
    const response = await fetch(`https://api.example.com/data/${id}`, {
      method: 'DELETE',
    });

    if (!response.ok) {
      throw new Error('Failed to delete data');
    }

    setData((prevData) => prevData.filter(item => item.id !== id));  // 削除されたデータを状態から除外
  } catch (error) {
    console.error('Error deleting data:', error);
  }
};

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/items');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setItems(data);  // 取得したデータをコンポーネントの状態にセット
    } catch (error) {
      console.error('There was an error!', error);
    }
  };

  fetchData();  // コンポーネントのマウント時にデータを取得
}, []);

const handleSubmit = async (newItem) => {
  try {
    const response = await fetch('https://api.example.com/items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newItem),  // 送信するデータをJSONに変換
    });

    if (!response.ok) {
      throw new Error('Failed to submit data');
    }

    const result = await response.json();
    console.log('Item created:', result);
    setItems((prevItems) => [...prevItems, result]);  // 新しいアイテムを状態に追加
  } catch (error) {
    console.error('Error during submission:', error);
  }
};

import axios from 'axios';

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.get('https://api.example.com/items');
      setItems(response.data);  // 取得したデータを状態に保存
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  fetchData();  // コンポーネントのマウント時にデータを取得
}, []);

const handleSubmit = async (newItem) => {
  try {
    const response = await axios.post('https://api.example.com/items', newItem);
    console.log('Item created:', response.data);
    setItems((prevItems) => [...prevItems, response.data]);  // 新しいアイテムを状態に追加
  } catch (error) {
    console.error('Error during submission:', error);
  }
};

useEffect(() => {
  // 初回レンダリング時に実行
  fetchData();
}, []);  // 空の依存配列

useEffect(() => {
  fetchData();
}, [itemId]);  // `itemId`が変更されるたびにデータを再取得

try {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  const data = await response.json();
  setData(data);
} catch (error) {
  console.error('Error fetching data:', error);
  setError('Something went wrong. Please try again later.');
}

const [loading, setLoading] = useState(true);

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);  // データの取得が完了した後にローディング状態を解除
    }
  };

  fetchData();
}, []);

if (loading) {
  return <p>Loading...</p>;  // ローディング中の表示
}

import { useState } from 'react';

const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (e) => setName(e.target.value);
  const handleEmailChange = (e) => setEmail(e.target.value);

  const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = { name, email };

    try {
      const response = await fetch('https://api.example.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Failed to submit form');
      }

      const result = await response.json();
      console.log('Form submitted successfully:', result);
    } catch (error) {
      console.error('Error submitting form:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

const MyFormWithValidation = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleNameChange = (e) => setName(e.target.value);
  const handleEmailChange = (e) => setEmail(e.target.value);

  const validateForm = () => {
    if (!name || !email) {
      setError('All fields are required');
      return false;
    }

    // 簡単なメールアドレスの形式チェック
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailPattern.test(email)) {
      setError('Please enter a valid email address');
      return false;
    }

    setError('');
    return true;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!validateForm()) return;  // バリデーション失敗時は送信しない

    const formData = { name, email };

    try {
      const response = await fetch('https://api.example.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Failed to submit form');
      }

      const result = await response.json();
      console.log('Form submitted successfully:', result);
    } catch (error) {
      console.error('Error submitting form:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      {error && <p style={{ color: 'red' }}>{error}</p>}  {/* エラーメッセージの表示 */}
      <button type="submit">Submit</button>
    </form>
  );
};

const MyFormWithFeedback = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);

  const handleNameChange = (e) => setName(e.target.value);
  const handleEmailChange = (e) => setEmail(e.target.value);

  const handleSubmit = async (e) => {
    e.preventDefault();

    setLoading(true);
    const formData = { name, email };

    try {
      const response = await fetch('https://api.example.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Failed to submit form');
      }

      const result = await response.json();
      setMessage('Form submitted successfully!');
    } catch (error) {
      setMessage('There was an error submitting the form.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <button type="submit" disabled={loading}>
        {loading ? 'Submitting...' : 'Submit'}
      </button>
      {message && <p>{message}</p>}  {/* フィードバックメッセージの表示 */}
    </form>
  );
};

const ComplexForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    address: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,  // 入力名をキーとして状態を更新
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 送信処理
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange
<h2>データの表示と更新</h2>

CRUD操作において、データの表示と更新は重要な要素です。Reactでは、データを取得して表示するための`useEffect`フックや、表示されたデータを更新するためのフォームを組み合わせて、効率的に操作できます。このセクションでは、データの取得と表示、更新の方法を解説します。

<h3>1. サーバーからデータを取得して表示する</h3>  
まず、Reactコンポーネントでデータを取得して表示する方法について説明します。データは通常、`fetch`を使ってAPIから取得し、その結果をコンポーネントの状態に保存します。状態が変更されると、Reactが自動的に再レンダリングして画面を更新します。

以下のコードは、サーバーからユーザーのリストを取得して表示する例です。

fetchData();

このコードでは、`useEffect`を使ってコンポーネントがマウントされた時にデータを取得し、`setUsers`を使って状態に保存しています。取得したデータはリストとして画面に表示されます。

<h3>2. データの更新</h3>  
次に、取得したデータを更新する方法を紹介します。Reactでは、フォームで入力されたデータをサーバーに送信することで、既存のデータを更新できます。以下に、ユーザー情報を更新するためのフォームを示します。

fetchUser();

try {
  const response = await fetch(`https://api.example.com/users/${userId}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(updatedUser),
  });

  if (!response.ok) {
    throw new Error('Failed to update user');
  }

  const result = await response.json();
  setUser(result);  // 更新されたユーザー情報を状態にセット
  alert('User updated successfully');
} catch (error) {
  console.error('Error updating user:', error);
  alert('Failed to update user');
}

このコードでは、`userId`が渡された際にそのユーザーの情報をサーバーから取得し、フォームに表示します。ユーザーが情報を更新して送信すると、`PUT`リクエストを使ってサーバーにデータを送信し、更新後の情報を表示します。

<h3>3. 更新後のデータの反映</h3>  
データが更新された後に、画面上の表示を反映させるためには、状態を更新することが必要です。たとえば、`EditUserForm`コンポーネントでユーザー情報を更新した後に、リスト画面や他のコンポーネントに変更を反映させる方法です。

以下に、`UserList`コンポーネントで、ユーザーが更新された情報を表示する方法を示します。

fetchData();

`handleUserUpdate`関数を使って、ユーザーが更新された場合にリストを再描画しています。これにより、ユーザーの情報が更新された後、ページをリロードすることなくリアルタイムで変更を確認できます。

<h3>4. サーバー側のデータ管理</h3>  
React側でデータを管理し更新する際、サーバー側でもデータの整合性を保つために適切なAPI設計が必要です。データが正しく保存されることを確認するために、サーバーのレスポンスが適切であることをチェックし、必要なバリデーションを実行することが重要です。

データを更新する際、サーバーから適切なステータスコード（例: 200 OK）やエラーメッセージを受け取ることで、フロントエンドは次のアクションを決定できます。
<h2>まとめ</h2>

本記事では、Reactを使用したデータ取得とフォーム送信を組み合わせたCRUD操作の実装方法を解説しました。フォームの作成、データの取得、更新に関する基本的な手法を学び、さらにその応用として、データ送信時のバリデーションやユーザーへのフィードバックを適切に表示する方法を紹介しました。

まず、Reactの基本的なフォーム作成方法から始め、サーバーと連携してデータを取得し、表示する方法を学びました。次に、フォームを使用してデータを送信し、更新する方法について説明し、実際にAPIと通信しながら操作を行う流れを理解しました。更新後のデータ反映や、ユーザー体験を向上させるためのフィードバックの表示方法についても触れました。

Reactを活用することで、動的でインタラクティブなアプリケーションを構築することが可能になります。データの管理と操作は、フロントエンドとバックエンドが連携して行うため、適切な設計と実装が不可欠です。この記事を通じて、Reactでのデータ操作の基本をしっかりと身につけ、さらに複雑なアプリケーションへの応用力を高めていただければと思います。
<h2>さらに進んだReactのCRUD操作と最適化</h2>

本記事では、Reactを使ったCRUD操作の基本的な実装方法について解説しましたが、さらに複雑なアプリケーション開発には最適化やエラーハンドリングの強化が重要になります。このセクションでは、ReactでのCRUD操作をさらに発展させるためのテクニックと、パフォーマンス向上のためのアプローチを紹介します。

<h3>1. 状態管理の最適化</h3>  
アプリケーションが大規模になると、複数のコンポーネントで状態管理を行うことが課題となります。Reactでは、`useState`を用いて状態を管理できますが、状態の数が増えたり、状態が複数のコンポーネントにまたがる場合、状態管理の方法を見直すことが重要です。

- **コンテキストAPI**: 状態がアプリケーションの複数のコンポーネントで共有される場合、`Context API`を利用することで、状態の管理がシンプルに行えます。コンテキストを使うことで、Reactのプロップスチェーンを深くすることなく状態を共有できます。
- **状態管理ライブラリの使用**: より複雑な状態管理が必要な場合、`Redux`や`Recoil`などの状態管理ライブラリを利用することが有効です。これらは、アプリケーション全体で一貫した状態管理を提供します。

<h3>2. エラーハンドリングとユーザーへのフィードバック</h3>  
CRUD操作では、サーバーとの通信エラーや、ユーザーによる誤入力に対する対応が不可欠です。適切なエラーハンドリングとユーザーに分かりやすいフィードバックを提供することで、ユーザー体験を向上させることができます。

- **エラーバウンダリーの使用**: Reactでは、`ErrorBoundary`コンポーネントを使うことで、子コンポーネントで発生したエラーをキャッチし、ユーザーにエラーメッセージを表示することができます。

- **ローディング状態の表示**: サーバーとの通信中にローディングスピナーやメッセージを表示することで、ユーザーに操作の進行状況を伝えることができます。

- **フォームバリデーション**: ユーザーがフォームに入力した内容が正しいかどうかをリアルタイムでチェックし、不正な入力があればエラーメッセージを表示します。React Hook Formなどのライブラリを使うと、効率的にフォームバリデーションが行えます。

<h3>3. パフォーマンス最適化</h3>  
Reactでは、パフォーマンスを最適化するためにいくつかの方法があります。特に、リストの表示やフォームの処理において、最適化を行うことが重要です。

- **`React.memo`と`useMemo`の使用**: コンポーネントの再レンダリングを最小限に抑えるために、`React.memo`や`useMemo`を利用します。これにより、プロパティや状態が変わらない限り、不要な再レンダリングを防ぐことができます。

- **遅延読み込み（Lazy Loading）**: アプリケーションの読み込み時間を短縮するために、コンポーネントや画像を遅延読み込みする技術が役立ちます。Reactの`Suspense`を使うと、コンポーネントの遅延読み込みが可能です。

- **バッチ更新の活用**: 状態の更新を一度にまとめて行うことで、無駄な再レンダリングを防ぎます。Reactは、バッチ処理によって複数の状態変更を効率よく処理します。

<h3>4. セキュリティ対策</h3>  
CRUD操作においては、セキュリティも重要な要素です。特に、ユーザーからの入力を処理する場合、以下の点を注意しましょう。

- **XSS攻撃対策**: ユーザー入力をサーバーに送信する前に、適切なサニタイズ（無害化）を行う必要があります。ReactはデフォルトでJSXの内容をエスケープしますが、外部ライブラリやユーザーが入力したデータを表示する場合は、サニタイズを行いましょう。
- **CSRF対策**: サーバーサイドでCSRFトークンを発行し、フォームやリクエストにトークンを含めて送信することで、クロスサイトリクエストフォージェリ（CSRF）攻撃を防ぎます。

<h2>まとめ</h2>  
本記事では、Reactを用いたCRUD操作の実装方法を紹介し、その後さらに進んだ最適化とセキュリティ対策についても触れました。状態管理の最適化やエラーハンドリング、パフォーマンスの向上方法を学ぶことで、より効率的で安全なアプリケーションの開発が可能になります。Reactを使った高度なアプリケーションを構築するために、これらのテクニックを活用して、さらに実践的なスキルを磨いていきましょう。
<h2>リアルタイムでのCRUD操作：WebSocketの活用</h2>

CRUD操作は、通常はリクエスト・レスポンス型の静的な通信で行われますが、よりインタラクティブでリアルタイムなアプリケーションを構築したい場合、WebSocketを活用することが有効です。ReactとWebSocketを組み合わせることで、サーバーとクライアント間で双方向のリアルタイム通信を実現できます。このセクションでは、Reactを使用したリアルタイムのCRUD操作を実装するための方法を解説します。

<h3>1. WebSocketの基本概念</h3>

WebSocketは、クライアントとサーバー間で双方向の通信チャネルを確立するための技術です。従来のHTTPリクエストと異なり、WebSocketでは接続が維持され、クライアントとサーバーがリアルタイムでデータを送受信できます。これにより、クライアント側のデータの変更を即座にサーバーに反映させることが可能となります。

Reactでは、`WebSocket` APIを利用して簡単にサーバーと双方向通信を行うことができます。以下のコードは、ReactとWebSocketを使った基本的な接続の例です。

// メッセージ受信時の処理
socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  setMessages((prevMessages) => [...prevMessages, message]);
};

// 接続エラー時の処理
socket.onerror = (error) => {
  console.error('WebSocket Error:', error);
};

return () => {
  socket.close();  // コンポーネントがアンマウントされた時にWebSocketをクローズ
};

このコードでは、`useEffect`を使ってWebSocketサーバーと接続し、受信したメッセージをリストとして表示しています。また、ユーザーがメッセージを送信すると、WebSocketを使ってそのメッセージをサーバーに送信し、リアルタイムでリストに反映させます。

<h3>2. WebSocketを利用したデータのリアルタイム更新</h3>

ReactとWebSocketを使ってCRUD操作をリアルタイムで更新する場合、特にデータの変更をサーバーからクライアントへ即座に通知することが重要です。たとえば、ユーザーがデータを更新した際に、他のユーザーがその変更を即座に見ることができるようになります。

以下のコード例では、ユーザーリストのデータが変更されると、WebSocketを使ってすべてのクライアントに更新された情報を通知し、リアルタイムでリストを更新します。

// ユーザーリスト更新の通知を受け取る
socket.onmessage = (event) => {
  const updatedUserList = JSON.parse(event.data);
  setUsers(updatedUserList);
};

return () => {
  socket.close();
};

このコードでは、`WebSocket`を利用して、サーバーから送られるユーザーリストの更新を受信し、それに基づいて`setUsers`を呼び出してリストを更新します。これにより、ユーザーが追加されるたびに他のクライアントに即座に反映されます。

<h3>3. サーバーサイドでのWebSocket実装</h3>

WebSocketを使用するには、サーバー側でもWebSocketの接続を管理する必要があります。Node.jsの`ws`ライブラリを使って、簡単にWebSocketサーバーを立ち上げることができます。以下は、ユーザーリストの更新を通知するサーバーサイドの実装例です。

if (action === 'addUser') {
  users.push({ name });
  // ユーザー追加後、すべてのクライアントに更新されたリストを送信
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(users));
    }
  });
}