React에서 WebSocket을 사용하여 실시간 채팅 애플리케이션 구축

실시간 커뮤니케이션은 최신 웹 애플리케이션, 특히 채팅 애플리케이션의 필수 기능이 되었습니다. WebSocket은 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 하는 강력한 방법을 제공합니다. 이 가이드에서는 WebSocket과 React를 사용하여 실시간 채팅 애플리케이션을 구축하는 과정을 살펴보겠습니다.

전제조건
다이빙을 시작하기 전에 다음 사항을 확인하세요.

• React에 대한 기본 이해
• 컴퓨터에 Node.js가 설치되어 있습니다.
• npm이나 Yarn과 같은 패키지 관리자입니다.
• WebSocket 개념에 대한 지식.

1단계: 백엔드 설정
실시간 통신을 처리하려면 WebSocket 서버가 필요합니다. ws 패키지와 함께 Node.js를 사용하겠습니다.

1. Node.js 프로젝트 초기화:

mkdir chat-backend  
cd chat-backend  
npm init -y  

1. ws 패키지를 설치합니다.

npm install ws 

1. WebSocket 서버 생성:

// server.js  
const WebSocket = require('ws');  

const wss = new WebSocket.Server({ port: 8080 });  

wss.on('connection', (ws) => {
    console.log('Client connected');  

    ws.on('message', (message) => {
        console.log(`Received: ${message}`);  
        // Broadcast the message to all clients
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);  
            }
        });
    });  

    ws.on('close', () => {
        console.log('Client disconnected');  
    });
});  

console.log('WebSocket server running on ws://localhost:8080');  

1. 서버 실행:

node server.js

2단계: React 프론트엔드 설정

1. 새 React 앱 만들기:

npx create-react-app chat-frontend  
cd chat-frontend  

1. WebSocket에 대한 종속성 설치: 브라우저의 기본 WebSocket API가 사용되므로 추가 종속성이 필요하지 않습니다.

3단계: 채팅 인터페이스 구축

1. 채팅 구성 요소 만들기:

// src/components/Chat.js  
import React, { useState, useEffect, useRef } from 'react';  

const Chat = () => {
    const [messages, setMessages] = useState([]);  
    const [input, setInput] = useState('');  
    const ws = useRef(null);  

    useEffect(() => {
        ws.current = new WebSocket('ws://localhost:8080');  

        ws.current.onmessage = (event) => {
            setMessages((prev) => [...prev, event.data]);  
        };  

        return () => {
            ws.current.close();  
        };
    }, []);  

    const sendMessage = () => {
        if (input.trim()) {
            ws.current.send(input);  
            setInput('');  
        }
    };  

    return (
        <div>



<ol>
<li>Use the Chat component in your App.js:
</li>
</ol>

<pre class="brush:php;toolbar:false">import React from 'react';  
import Chat from './components/Chat';  

function App() {
    return <Chat />;  
}  

export default App;  

1. React 앱 시작:

npm start  

4단계: 애플리케이션 테스트

• 여러 탭이나 기기에서 React 앱을 엽니다.
• 한 탭에 메시지를 입력하기 시작하면 연결된 모든 클라이언트에 메시지가 실시간으로 나타나는지 관찰할 수 있습니다!

추가 개선 사항
앱을 제작 준비 상태로 만들려면 다음을 고려하세요.

• 맞춤 메시지에 사용자 인증을 추가합니다.
• 채팅 기록을 저장하기 위한 데이터베이스 통합.
• WebSocket 서버 및 React 앱을 Vercel, Heroku 또는 AWS와 같은 플랫폼에 배포합니다.

결론
WebSocket을 활용하여 React를 사용하여 가벼운 실시간 채팅 애플리케이션을 구축했습니다. 이 프로젝트는 메시징 플랫폼, 게임, 실시간 알림과 같은 다양한 애플리케이션에 유용한 동적 통신을 위한 WebSocket의 강력한 기능을 보여줍니다. 애플리케이션을 더욱 향상시키기 위해 WebSocket 프로토콜에 대해 자세히 알아보세요!

즐거운 코딩하세요! ?

위 내용은 React에서 WebSocket을 사용하여 실시간 채팅 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!