Socket.IO를 활용한 실시간 채팅 구현 예시

서버 측 코드 (Node.js):

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

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

// 클라이언트 연결 처리
io.on('connection', (socket) => {
  console.log('새 사용자 연결:', socket.id);
  
  // 사용자가 채팅방에 참여
  socket.on('joinRoom', (roomId) => {
    socket.join(roomId);
    console.log(`사용자 ${socket.id}가 ${roomId} 방에 참여함`);
    
    // 다른 사용자들에게 알림
    socket.to(roomId).emit('userJoined', {
      userId: socket.id,
      message: '새 사용자가 참여했습니다.'
    });
  });
  
  // 메시지 수신 및 브로드캐스트
  socket.on('sendMessage', (data) => {
    console.log(`메시지 수신: ${data.message} (방: ${data.roomId})`);
    
    // 타임스탬프 추가
    const messageWithTime = {
      ...data,
      timestamp: new Date().toISOString(),
      sender: socket.id
    };
    
    // 같은 방의 모든 사용자에게 메시지 전송
    io.to(data.roomId).emit('newMessage', messageWithTime);
    
    // 데이터베이스에 메시지 저장 (생략)
  });
  
  // 연결 종료 처리
  socket.on('disconnect', () => {
    console.log('사용자 연결 종료:', socket.id);
    // 참여 중이던 모든 방에 알림
    io.emit('userLeft', {
      userId: socket.id,
      message: '사용자가 나갔습니다.'
    });
  });
});

클라이언트 측 코드 (JavaScript):

// Socket.IO 클라이언트 초기화
const socket = io('http://localhost:3000');

// UI 요소
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const messagesList = document.getElementById('messages-list');
const roomIdInput = document.getElementById('room-id');
const joinRoomButton = document.getElementById('join-room');

// 연결 상태 처리
socket.on('connect', () => {
  console.log('서버에 연결됨');
  showNotification('서버에 연결되었습니다.');
});

socket.on('disconnect', () => {
  console.log('서버와 연결 끊김');
  showNotification('서버와 연결이 끊겼습니다. 재연결 중...', 'error');
});

// 채팅방 참여
joinRoomButton.addEventListener('click', () => {
  const roomId = roomIdInput.value.trim();
  if (roomId) {
    socket.emit('joinRoom', roomId);
    showNotification(`${roomId} 방에 참여했습니다.`);
    // 현재 방 ID 저장
    currentRoomId = roomId;
  }
});

// 메시지 전송
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') sendMessage();
});

function sendMessage() {
  const message = messageInput.value.trim();
  const roomId = currentRoomId;
  
  if (message && roomId) {
    // 서버로 메시지 전송
    socket.emit('sendMessage', {
      message,
      roomId
    });
    
    // 입력 필드 초기화
    messageInput.value = '';
  }
}

// 새 메시지 수신
socket.on('newMessage', (data) => {
  // 메시지 표시
  const messageElement = document.createElement('div');
  messageElement.classList.add('message');
  
  // 자신이 보낸 메시지인지 확인
  if (data.sender === socket.id) {
    messageElement.classList.add('own-message');
  }
  
  // 메시지 내용 구성
  const time = new Date(data.timestamp).toLocaleTimeString();
  messageElement.innerHTML = `
    <span class="sender">${data.sender === socket.id ? '나' : '상대방'}</span>
    <p class="content">${data.message}</p>
    <span class="time">${time}</span>
  `;
  
  // 메시지 목록에 추가
  messagesList.appendChild(messageElement);
  
  // 스크롤을 최신 메시지로 이동
  messagesList.scrollTop = messagesList.scrollHeight;
});