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:

1. React: a JavaScript library for building user interfaces.
2. WebSocket: A TCP-based protocol used for real-time communication between clients and servers.
3. Node.js: A JavaScript running environment based on the Chrome V8 engine.
4. Express.js: A simple and flexible Node.js web application framework.
5. Socket.IO: A WebSocket-based library for real-time two-way communication.

2. Project settings

1. 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

   Copy after login

2. Installing dependencies
   Enter the project directory and install the following dependencies:

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

   Copy after login

3. Server settings

1. 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');
   });

   Copy after login

2. Start the server
   Run in the command line The following command starts the server:

   node server.js

   Copy after login

4. Client settings

1. 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;

   Copy after login

2. 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;

   Copy after login

3. Run the application
   Run the following command in the command line to start the React application:

   npm start

   Copy after login

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!