WebSocket 통합

# 프로젝트 루트에서
mkdir server
cd server
npm init -y
npm install express socket.io

const express = require('express');
const http = require('http');
const { Server } = require('socket.io'); // socket.io 서버 임포트

const app = express();
const server = http.createServer(app);

// CORS 설정: Next.js 앱이 실행되는 도메인 허용
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // Next.js 개발 서버 주소
    methods: ["GET", "POST"]
  }
});

// 클라이언트 연결 이벤트 처리
io.on('connection', (socket) => {
  console.log('새로운 WebSocket 클라이언트가 연결되었습니다.', socket.id);

  // 'chat message' 이벤트 수신
  socket.on('chat message', (rawMessage) => {
    if (typeof rawMessage !== 'string') return;

    const message = rawMessage.trim();
    if (!message || message.length > 500) return;

    console.log('메시지 수신:', message);
    // 모든 연결된 클라이언트에게 메시지 브로드캐스트
    io.emit('chat message', message);
  });

  // 클라이언트 연결 해제 이벤트 처리
  socket.on('disconnect', () => {
    console.log('WebSocket 클라이언트 연결 해제됨:', socket.id);
  });
});

const PORT = process.env.PORT || 4100; // WebSocket 서버 포트
server.listen(PORT, () => {
  console.log(`WebSocket 서버가 포트 ${PORT}에서 실행 중입니다.`);
});

# Next.js 프로젝트 루트에서
npm install socket.io-client
# 또는
yarn add socket.io-client

"use client";

import React, { useState, useEffect, useRef, FormEvent } from 'react';
import { io, Socket } from 'socket.io-client';

// WebSocket 서버 주소 (환경 변수로 관리하는 것이 좋음)
const SOCKET_SERVER_URL = process.env.NEXT_PUBLIC_SOCKET_SERVER_URL || 'http://localhost:4100';

export default function ChatPage() {
  const [messageInput, setMessageInput] = useState('');
  const [messages, setMessages] = useState<string[]>([]);
  const socketRef = useRef<Socket | null>(null); // Socket 인스턴스를 저장할 ref
  const messagesEndRef = useRef<HTMLDivElement>(null); // 메시지 스크롤을 위한 ref

  useEffect(() => {
    // 1. Socket.IO 클라이언트 연결
    // Effect 설정 시 연결하고 정리 함수에서 해제
    socketRef.current = io(SOCKET_SERVER_URL);

    // 2. 'chat message' 이벤트 리스너 등록
    socketRef.current.on('chat message', (msg: string) => {
      setMessages((prevMessages) => [...prevMessages, msg]);
    });

    // 3. 연결 성공/실패 로깅 (선택 사항)
    socketRef.current.on('connect', () => {
      console.log('Socket.IO 서버에 연결되었습니다.', socketRef.current?.id);
    });
    socketRef.current.on('disconnect', () => {
      console.log('Socket.IO 서버와 연결이 끊어졌습니다.');
    });
    socketRef.current.on('connect_error', (err) => {
      console.error('Socket.IO 연결 오류:', err.message);
    });

    // 4. 컴포넌트 언마운트 시 소켓 연결 해제 (클린업)
    return () => {
      if (socketRef.current) {
        socketRef.current.disconnect();
        console.log('Socket.IO 연결이 해제되었습니다.');
      }
    };
  }, []); // 개발 Strict Mode에서는 설정·정리 과정을 추가 실행할 수 있음

  // 메시지가 추가될 때마다 스크롤을 맨 아래로 이동
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  // 메시지 전송 핸들러
  const handleSendMessage = (e: FormEvent) => {
    e.preventDefault();
    if (messageInput.trim() && socketRef.current) {
      socketRef.current.emit('chat message', messageInput); // 'chat message' 이벤트 전송
      setMessageInput(''); // 입력 필드 초기화
    }
  };

  return (
    <div style={{ maxWidth: '600px', margin: '40px auto', padding: '20px', border: '1px solid #eee', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)' }}>
      <h1 style={{ textAlign: 'center', color: '#333', marginBottom: '30px' }}>실시간 채팅</h1>
      <div role="log" aria-live="polite" aria-label="채팅 메시지" style={{ border: '1px solid #ddd', height: '300px', overflowY: 'scroll', padding: '15px', marginBottom: '20px', backgroundColor: '#f9f9f9', borderRadius: '4px' }}>
        {messages.length === 0 ? (
          <p style={{ textAlign: 'center', color: '#888' }}>메시지가 없습니다.</p>
        ) : (
          messages.map((msg, index) => (
            <div key={index} style={{ marginBottom: '8px', padding: '5px 10px', backgroundColor: '#fff', border: '1px solid #eee', borderRadius: '4px' }}>
              {msg}
            </div>
          ))
        )}
        <div ref={messagesEndRef} /> {/* 스크롤 위치를 잡기 위한 빈 div */}
      </div>
      <form onSubmit={handleSendMessage} style={{ display: 'flex', gap: '10px' }}>
        <label htmlFor="chat-message">메시지</label>
        <input
          id="chat-message"
          type="text"
          maxLength={500}
          value={messageInput}
          onChange={(e) => setMessageInput(e.target.value)}
          placeholder="메시지를 입력하세요..."
          style={{ flexGrow: 1, padding: '10px', borderRadius: '4px', border: '1px solid #ccc' }}
        />
        <button
          type="submit"
          style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
        >
          보내기
        </button>
      </form>
    </div>
  );
}