React で WebSocket を使用したリアルタイム チャット アプリケーションを構築する

リアルタイム通信は、最新の Web アプリケーション、特にチャット アプリケーションに不可欠な機能となっています。 WebSocket は、クライアントとサーバー間のリアルタイムの双方向通信を可能にする強力な方法を提供します。このガイドでは、WebSocket と React を使用してリアルタイム チャット アプリケーションを構築するプロセスを順を追って説明します。

前提条件
始める前に、以下のものがあることを確認してください:

• React の基本的な理解
• Node.js がマシンにインストールされています。
• npm や Yarn などのパッケージ マネージャー。
• WebSocket の概念に精通していること。

ステップ 1: バックエンドのセットアップ
リアルタイム通信を処理するには WebSocket サーバーが必要です。 Node.js を ws パッケージとともに使用します。

1. Node.js プロジェクトを初期化します。

mkdir chat-backend  
cd chat-backend  
npm init -y  

1. ws パッケージをインストールします。

npm install ws 

1. WebSocket サーバーを作成します。

// server.js  
const WebSocket = require('ws');  

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

wss.on('connection', (ws) => {
    console.log('Client connected');  

    ws.on('message', (message) => {
        console.log(`Received: ${message}`);  
        // Broadcast the message to all clients
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);  
            }
        });
    });  

    ws.on('close', () => {
        console.log('Client disconnected');  
    });
});  

console.log('WebSocket server running on ws://localhost:8080');  

1. サーバーを実行します:

node server.js

ステップ 2: React フロントエンドのセットアップ

1. 新しい React アプリを作成します。

npx create-react-app chat-frontend  
cd chat-frontend  

1. WebSocket の依存関係をインストールします。 ブラウザのネイティブ WebSocket API が使用されるため、追加の依存関係は必要ありません。

ステップ 3: チャット インターフェイスの構築

1. チャット コンポーネントを作成します。

// src/components/Chat.js  
import React, { useState, useEffect, useRef } from 'react';  

const Chat = () => {
    const [messages, setMessages] = useState([]);  
    const [input, setInput] = useState('');  
    const ws = useRef(null);  

    useEffect(() => {
        ws.current = new WebSocket('ws://localhost:8080');  

        ws.current.onmessage = (event) => {
            setMessages((prev) => [...prev, event.data]);  
        };  

        return () => {
            ws.current.close();  
        };
    }, []);  

    const sendMessage = () => {
        if (input.trim()) {
            ws.current.send(input);  
            setInput('');  
        }
    };  

    return (
        <div>



<ol>
<li>Use the Chat component in your App.js:
</li>
</ol>

<pre class="brush:php;toolbar:false">import React from 'react';  
import Chat from './components/Chat';  

function App() {
    return <chat></chat>;  
}  

export default App;  

1. React アプリを起動します。

npm start  

ステップ 4: アプリケーションのテスト

• 複数のタブまたはデバイスで React アプリを開きます。
• 1 つのタブにメッセージを入力し始めると、接続されているすべてのクライアントにメッセージがリアルタイムで表示されるのを観察できます。

追加の機能強化
アプリを本番環境に対応するには、次の点を考慮してください。

• パーソナライズされたメッセージにユーザー認証を追加します。
• チャット履歴を保存するためのデータベースの統合。
• WebSocket サーバーと React アプリを Vercel、Heraku、AWS などのプラットフォームにデプロイします。

結論
WebSocket を活用することで、React を使用した軽量のリアルタイム チャット アプリケーションを構築しました。このプロジェクトは、メッセージング プラットフォーム、ゲーム、ライブ通知などのさまざまなアプリケーションで役立つ、動的通信のための WebSocket の力を実証します。 WebSocket プロトコルをさらに深く掘り下げて、アプリケーションをさらに強化してください!

コーディングを楽しんでください! ?