ホームページ  >  記事  >  ウェブフロントエンド  >  React と WebSocket を使用してリアルタイム チャット アプリを構築する方法

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

PHPz
PHPzオリジナル
2023-09-26 19:46:431186ブラウズ

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>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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。