2024.02.05 TIL

Today's list

1. 채팅 기능 완성

채팅 기능이 완성되었습니다.

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
import ChatMessageList from './ChatMessageList';
import ChatInput from './ChatInput';
import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
import { Message } from '../../types/interface';

const socket = io('http://localhost:4000');

const ChatContainer: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const auth = getAuth();
    onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });

    socket.on('chat message', (message: Message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    return () => {
      socket.off('chat message');
    };
  }, []);

  const handleSendMessage = (message: string) => {
    if (user) {
      socket.emit('chat message', { text: message, sender: user.displayName || "Anonymous", id: Date.now().toString() });
    }
  };

  if (!user) {
    return <div>채팅을 사용하기 위해 로그인을 해주세요!</div>;
  }

  return (
    <div>
      <ChatMessageList messages={messages} />
      <ChatInput onSendMessage={handleSendMessage} />
    </div>
  );
};

export default ChatContainer;

사용자의 로그인 상태에 따라 채팅 기능에 대한 제한을 걸어두었고, 로컬로 실험하기 위한 서버도 완성했습니다.

import express from 'express';
import { createServer } from 'http';
import { Server, Socket } from 'socket.io';
import cors from 'cors'; // cors import 추가

const app = express();
app.use(cors()); // CORS 미들웨어 적용

const server = createServer(app);
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // 클라이언트 주소, 실제 주소로 변경 필요
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
});

io.on('connection', (socket: Socket) => {
  console.log('New client connected');

  socket.on('chat message', (message: any) => {
    io.emit('chat message', message);
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

const port = process.env.PORT || 4000;
server.listen(port, () => console.log(`Listening on port ${port}`));

----

해당 서버는 일단 로컬에서 실험 한 결과 잘 나옵니다.

이제 UI/UX 부분만 다음으면 될 것 같습니다.