React と WebSocket を使用してリアルタイムチャットアプリを構築する方法-jsチュートリアル-php.cn

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

PHPz

リリース： 2023-09-26 19:46:43

オリジナル

1280 人が閲覧しました

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

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

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

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

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

2. プロジェクト設定

React アプリケーションの作成
コマンドラインで create-react-app コマンドを使用して、新しい React アプリケーションを作成します。
```
npx create-react-app chat-app
```
ログイン後にコピー
依存関係のインストール
プロジェクトディレクトリを入力し、次の依存関係をインストールします:
```
cd chat-app
npm install socket.io-client express
```
ログイン後にコピー

3. サーバー設定

サーバーファイルの作成
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');
});

ログイン後にコピー

サーバーの起動
コマンドラインで実行します。次のコマンドはサーバーを起動します:
```
node server.js
```
ログイン後にコピー

4. クライアント設定

チャットコンポーネントの作成
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;

ログイン後にコピー

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;
```
ログイン後にコピー
アプリケーションの実行
コマンドラインで次のコマンドを実行して、React アプリケーションを開始します:
```
npm start
```
ログイン後にコピー

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

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

結論:

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

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