Home > Article > Web Front-end > How to build a real-time chat app with React and WebSocket
How to use React and WebSocket to build a real-time chat application
Introduction:
With the rapid development of the Internet, real-time communication has attracted more and more attention. Live chat apps have become an integral part of modern social and work life. This article will introduce how to build a simple real-time chat application using React and WebSocket, and provide specific code examples.
1. Technical preparation
Before starting to build a real-time chat application, we need to prepare the following technologies and tools:
2. Project settings
Create React application
Use the create-react-app command on the command line to create a new React application:
npx create-react-app chat-app
Installing dependencies
Enter the project directory and install the following dependencies:
cd chat-app npm install socket.io-client express
3. Server settings
Create server file
Create a file called server.js and add the following code:
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'); });
Start the server
Run in the command line The following command starts the server:
node server.js
4. Client settings
Create chat component
Create a file named Chat in the src directory .js file and add the following code:
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;
Using the chat component in App.js
In the App.js file in the src directory, add the following code to In the original code:
import React from 'react'; import Chat from './Chat'; const App = () => { return ( <div> <h1>Real-time Chat Application</h1> <Chat /> </div> ); }; export default App;
Run the application
Run the following command in the command line to start the React application:
npm start
5. Test Application
Open http://localhost:3000 in the browser, and you can see a simple real-time chat interface. Enter a message in the input box and click the send button to send the message and display it on the chat interface in real time.
Conclusion:
This article introduces how to build a real-time chat application using React and WebSocket. By using React to build the front-end interface and communicating in real time through WebSocket, we can easily build a simple real-time chat application. I hope this article helps you understand how to build a real-time chat application.
The above is the detailed content of How to build a real-time chat app with React and WebSocket. For more information, please follow other related articles on the PHP Chinese website!