Next.js와 WebSocket을 활용한 실시간 채팅 애플리케이션 구현

 

• WebSocket을 활용한 실시간 데이터 송수신 원리
• Next.js에서 WebSocket을 활용하여 채팅 기능 구현
• Zustand를 사용하여 WebSocket 메시지를 상태로 관리

npm install zustand ws

 

server.js (WebSocket 서버)

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
  console.log('새 클라이언트가 연결되었습니다.');

  ws.on('message', (message) => {
    console.log(`받은 메시지: ${message}`);
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => console.log('클라이언트 연결 종료'));
});

 

store/useChatStore.js (Zustand를 활용한 채팅 상태 관리)

import { create } from 'zustand';

const useChatStore = create((set) => ({
  messages: [],
  addMessage: (msg) => set((state) => ({ messages: [...state.messages, msg] })),
}));

export default useChatStore;

 

components/Chat.js (WebSocket 채팅 클라이언트)

'use client';

import { useEffect, useState } from 'react';
import useChatStore from '../store/useChatStore';

export default function Chat() {
  const [message, setMessage] = useState('');
  const addMessage = useChatStore((state) => state.addMessage);
  const messages = useChatStore((state) => state.messages);

  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080');

    socket.onmessage = (event) => {
      addMessage(event.data);
    };

    return () => socket.close();
  }, [addMessage]);

  const sendMessage = () => {
    const socket = new WebSocket('ws://localhost:8080');
    socket.onopen = () => {
      socket.send(message);
      setMessage('');
    };
  };

  return (
    <div>
      <h2>실시간 채팅</h2>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="메시지를 입력하세요"
      />
      <button onClick={sendMessage}>전송</button>
    </div>
  );
}

 

app/page.js

import Chat from '../components/Chat';

export default function Home() {
  return (
    <div>
      <Chat />
    </div>
  );
}

 

WebSocket을 활용하면 실시간 채팅과 같은 기능을 쉽게 구현 가능