React와 WebSocket을 사용하여 실시간 채팅 앱을 구축하는 방법

React와 WebSocket을 사용하여 실시간 채팅 애플리케이션을 구축하는 방법

소개:
인터넷의 급속한 발전과 함께 실시간 커뮤니케이션이 점점 더 주목을 받고 있습니다. 실시간 채팅 앱은 현대 사회 생활과 직장 생활에서 필수적인 부분이 되었습니다. 이 글에서는 React와 WebSocket을 사용하여 간단한 실시간 채팅 애플리케이션을 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 기술적 준비
실시간 채팅 애플리케이션 구축을 시작하기 전에 다음 기술과 도구를 준비해야 합니다.

1. React: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리.
2. WebSocket: 클라이언트와 서버 간의 실시간 통신에 사용되는 TCP 기반 프로토콜입니다.
3. Node.js: Chrome V8 엔진을 기반으로 하는 JavaScript 실행 환경입니다.
4. Express.js: 간단하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.
5. Socket.IO: 실시간 양방향 통신을 위한 WebSocket 기반 라이브러리입니다.

2. 프로젝트 설정

1. React 애플리케이션 만들기
   명령줄에서 create-react-app 명령을 사용하여 새 React 애플리케이션을 만듭니다.

   npx create-react-app chat-app

2. 종속성 설치
   프로젝트 디렉터리를 입력하고 다음을 설치합니다. 종속성:

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

3. 서버 설정

1. 서버 파일 만들기
   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');
   });

2. 서버 시작
   명령줄에서 다음 명령을 실행합니다. 서버 시작 ：

   node server.js

IV. 클라이언트 설정

1. 채팅 구성 요소 만들기
   src 디렉터리에 Chat.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;

2. App.js 구성 요소에서 채팅 사용
   src 디렉터리의 App.js 파일에서 원래 코드에 다음 코드를 추가합니다.

   import React from 'react';
   import Chat from './Chat';
   
   const App = () => {
     return (
    <div>
      <h1 id="Real-time-Chat-Application">Real-time Chat Application</h1>
      <Chat />
    </div>
     );
   };
   
   export default App;

3. 애플리케이션 실행
   React 애플리케이션을 시작하려면 명령줄에서 다음 명령을 실행하세요.

   npm start

5 . 테스트 애플리케이션
브라우저에서 http://localhost:3000을 열면 간단한 실시간 채팅 인터페이스를 볼 수 있습니다. 입력 상자에 메시지를 입력하고 보내기 버튼을 클릭하면 메시지가 전송되고 채팅 인터페이스에 실시간으로 표시됩니다.

결론:
이 글에서는 React와 WebSocket을 사용하여 실시간 채팅 애플리케이션을 구축하는 방법을 설명합니다. React를 사용하여 프런트 엔드 인터페이스를 구축하고 WebSocket을 통해 실시간으로 통신함으로써 간단한 실시간 채팅 애플리케이션을 쉽게 구축할 수 있습니다. 이 기사가 실시간 채팅 애플리케이션을 구축하는 방법을 이해하는 데 도움이 되기를 바랍니다.

위 내용은 React와 WebSocket을 사용하여 실시간 채팅 앱을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!