React と WebSocket を使用してリアルタイム チャット アプリを構築する方法

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

はじめに:
インターネットの急速な発展により、リアルタイム コミュニケーションが可能になりました。ますます注目を集めました。ライブチャット アプリは、現代の社会生活や仕事生活に不可欠な部分になっています。この記事では、React と WebSocket を使用して簡単なリアルタイム チャット アプリケーションを構築する方法と、具体的なコード例を紹介します。

1. 技術的な準備
リアルタイム チャット アプリケーションの構築を開始する前に、次のテクノロジとツールを準備する必要があります:

1. React: 構築用の JavaScript ライブラリユーザーインターフェース。
2. WebSocket: クライアントとサーバー間のリアルタイム通信に使用される TCP ベースのプロトコル。
3. Node.js: Chrome V8 エンジンに基づく JavaScript 実行環境。
4. Express.js: シンプルで柔軟な Node.js Web アプリケーション フレームワーク。
5. Socket.IO: リアルタイムの双方向通信のための WebSocket ベースのライブラリ。

2. プロジェクト設定

1. React アプリケーションの作成
   コマンド ラインで create-react-app コマンドを使用して、新しい React アプリケーションを作成します。

   npx create-react-app chat-app

2. 依存関係のインストール
   プロジェクト ディレクトリを入力し、次の依存関係をインストールします:

   cd chat-app
   npm install socket.io-client express

3. サーバー設定

1. サーバー ファイルの作成
   server.js というファイルを作成し、次のコードを追加します:

   const express = require('express');
   const http = require('http');
   const app = express();
   const server = http.createServer(app);
   const io = require('socket.io')(server);
   
   io.on('connection', (socket) => {
     console.log('a user connected');
   
     socket.on('disconnect', () => {
    console.log('user disconnected');
     });
   
     socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
     });
   });
   
   server.listen(4000, () => {
     console.log('listening on *:4000');
   });

2. サーバーの起動
   コマンド ラインで実行します。次のコマンドはサーバーを起動します:

   node server.js

4. クライアント設定

1. チャット コンポーネントの作成
   Chat という名前のファイルを src に作成します。ディレクトリ .js ファイルを開き、次のコードを追加します。

   import React, { useState, useEffect } from 'react';
   import io from 'socket.io-client';
   
   const socket = io('http://localhost:4000');
   
   const Chat = () => {
     const [messages, setMessages] = useState([]);
     const [message, setMessage] = useState('');
   
     useEffect(() => {
    socket.on('chat message', (msg) => {
      setMessages([...messages, msg]);
    });
     }, [messages]);
   
     const handleSendMessage = () => {
    socket.emit('chat message', message);
    setMessage('');
     };
   
     return (
    <div>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
     );
   };
   
   export default Chat;

2. App.js でチャット コンポーネントを使用する
   src ディレクトリの App.js ファイルで、次のコードを追加します。元のコード:

   import React from 'react';
   import Chat from './Chat';
   
   const App = () => {
     return (
    <div>
      <h1 id="Real-time-Chat-Application">Real-time Chat Application</h1>
      <Chat />
    </div>
     );
   };
   
   export default App;

3. アプリケーションの実行
   コマンド ラインで次のコマンドを実行して、React アプリケーションを開始します:

   npm start

# #5. アプリケーションのテスト

ブラウザで http://localhost:3000 を開くと、シンプルなリアルタイム チャット インターフェイスが表示されます。入力ボックスにメッセージを入力し、送信ボタンをクリックするとメッセージが送信され、リアルタイムでチャット インターフェイスに表示されます。

結論:

この記事では、React と WebSocket を使用してリアルタイム チャット アプリケーションを構築する方法を紹介します。 React を使用してフロントエンド インターフェイスを構築し、WebSocket 経由でリアルタイムに通信することで、シンプルなリアルタイム チャット アプリケーションを簡単に構築できます。この記事が、リアルタイム チャット アプリケーションの構築方法を理解するのに役立つことを願っています。

以上がReact と WebSocket を使用してリアルタイム チャット アプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。