Home  >  Article  >  Web Front-end  >  How to build a real-time chat app with React and WebSocket

How to build a real-time chat app with React and WebSocket

PHPz
PHPzOriginal
2023-09-26 19:46:431186browse

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
  2. Installing dependencies
    Enter the project directory and install the following dependencies:

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

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');
    });
  2. Start the server
    Run in the command line The following command starts the server:

    node server.js

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;
  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;
  3. 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn