Next.js(typescript) + Socket.IO 실시간 채팅 구현(simple ver.)

 

실시간 채팅 애플리케이션 만들기

1. 프로젝트 설정

Next.js 프로젝트를 생성하고 필요한 패키지 설치

npx create-next-app@latest realtime-chat --typescript
cd realtime-chat
npm install socket.io socket.io-client

 

2. 프로젝트 구조

realtime-chat/
├── node_modules/
├── src/
│   ├── pages/
│   │   ├── api/
│   │   │   └── socket.ts
│   │   ├── chat.tsx
│   │   └── _app.tsx
│   ├── styles/
│   │   └── globals.css
│   └── types/
│       └── socket.ts
├── package.json
├── tsconfig.json
└── next.config.js

 

3. 클라이언트 측 코드

pages/chat.tsx 파일을 생성, 클라이언트 측 소켓 설정 및 채팅 UI를 작성

import { useState, useEffect } from "react";
import io, { Socket } from "socket.io-client";

interface Message {
  user: string;
  text: string;
  timestamp: string;
}

let socket: Socket;

const Chat = () => {
  const [username, setUsername] = useState<string>("");
  const [message, setMessage] = useState<string>("");
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    socket = io();

    socket.on("message", (data: Message) => {
      setMessages((messages) => [...messages, data]);
    });

    return () => {
      socket.disconnect();
    };
  }, []);

  const sendMessage = () => {
    if (username && message) {
      socket.emit("message", { user: username, text: message });
      setMessage("");
    }
  };

  const formatDate = (timestamp: string) => {
    const date = new Date(timestamp);
    return date.toLocaleString(); // 로컬 시간으로 변환
  };

  return (
    <div>
      <h1>실시간 채팅</h1>
      <div>
        {messages.map((msg, index) => (
          <div key={index}>
            <strong>{msg.user}</strong> ({formatDate(msg.timestamp)}):{" "}
            {msg.text}
          </div>
        ))}
      </div>
      <input
        type="text"
        placeholder="사용자 이름"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="text"
        placeholder="메시지"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>전송</button>
    </div>
  );
};

export default Chat;

 

4. 타입 정의

types/socket.ts 파일을 생성해 타입 정의

import { Server as HTTPServer } from 'http';
import { NextApiResponse } from 'next';
import { Server as SocketIOServer } from 'socket.io';

export type NextApiResponseServerIO = NextApiResponse & {
  socket: {
    server: HTTPServer & {
      io: SocketIOServer;
    };
  };
};

export interface Message {
  user: string;
  text: string;
  timestamp: string;
}

 

5. 서버 실행

모든 설정이 완료되면 서버 실행

npm run dev

 

6. Test

컴퓨터와 핸드폰이 같은 와이파이 상에 접속되어 있으면, IP주소를 통해 localhost에 접속 가능한 점을 이용해 테스트가 가능하다. + 위의 예시는 localhost:port/chat 위치에서 실행됨

 

고민해볼 법한 내용

확장 가능성: 현재 구축한 채팅 애플리케이션을 어떻게 더 확장할 수 있을지에 대한 고민 (예: 메시지 저장, 유저 인증 등).

 

Github URL

https://github.com/ciela0426/realtime-chat