ホームページ > 記事 > ウェブフロントエンド > React と WebSocket を使用してリアルタイム チャット アプリを構築する方法
React と WebSocket を使用してリアルタイム チャット アプリケーションを構築する方法
はじめに:
インターネットの急速な発展により、リアルタイム コミュニケーションが可能になりました。ますます注目を集めました。ライブチャット アプリは、現代の社会生活や仕事生活に不可欠な部分になっています。この記事では、React と WebSocket を使用して簡単なリアルタイム チャット アプリケーションを構築する方法と、具体的なコード例を紹介します。
1. 技術的な準備
リアルタイム チャット アプリケーションの構築を開始する前に、次のテクノロジとツールを準備する必要があります:
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
ブラウザで http://localhost:3000 を開くと、シンプルなリアルタイム チャット インターフェイスが表示されます。入力ボックスにメッセージを入力し、送信ボタンをクリックするとメッセージが送信され、リアルタイムでチャット インターフェイスに表示されます。
この記事では、React と WebSocket を使用してリアルタイム チャット アプリケーションを構築する方法を紹介します。 React を使用してフロントエンド インターフェイスを構築し、WebSocket 経由でリアルタイムに通信することで、シンプルなリアルタイム チャット アプリケーションを簡単に構築できます。この記事が、リアルタイム チャット アプリケーションの構築方法を理解するのに役立つことを願っています。
以上がReact と WebSocket を使用してリアルタイム チャット アプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。