[4주차 개발일지 1] Socket.io를 사용한 실시간 채팅 구현 (240924)

socket.io

socket.io는 웹 애플리케이션을 위한 실시간 양방향 통신 라이브러리로, 주요 특징은 다음과 같습니다.

1. 실시간 통신: 서버와 클라이언트 간 즉각적인 데이터 교환이 가능합니다.
2. 양방향 통신: 서버에서 클라이언트로, 클라이언트에서 서버로 자유롭게 데이터를 전송할 수 있습니다.
3. 이벤트 기반: 사용자 정의 이벤트를 만들고 처리할 수 있습니다.
4. 자동 재연결: 연결이 끊어졌을 때 자동으로 다시 연결을 시도합니다.
5. 다양한 전송 방식 지원: WebSocket을 우선으로 사용하지만, 필요에 따라 다른 방식으로 대체할 수 있습니다.

프로젝트에서 예약 관련자간의 빠른 의사소통을 위해 실시간 채팅을 제공하자는 아이디어에서 사용하게 되었습니다.

 

ServerSide

1. 연결 설정

const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:3000",
  },
});


socketIo(io);
const port = process.env.SOCKET_PORT || 5001;
httpServer.listen(port, () => {
  console.log("server listening on port", port);
});

백엔드 서버와 다른 포트를 사용하며 소켓을 띄우기 위해 사용

 

2. 연결 처리

io.on('connection', (socket) => {
        console.log('User connected', socket.id);
~~~
// 연결 해제 처리
socket.on('disconnect', () => {
            console.log('User disconnected', socket.id);
        });

 

3. 이벤트 처리와 발신

socket.user = user;

                const welcomeMessage = {
                    chat: `${user.name} 님이 입장하셨습니다.`,
                    user: { id: null, name: "system" },
                };
                io.emit('message', welcomeMessage);

                cb({ ok: true, data: user });

ClientSide

1. 연결 설정

import {io} from "socket.io-client"
const socket = io("http://localhost:5001")
export default socket;

 

2. 이벤트 생성

socket.emit("login", token, (res) => {
        if (res?.ok) {
          setUser(res.data);
          socket.emit("join_room", { roomId: postId.postId });
        } else {
          setError(res.error || "로그인에 실패했습니다.");
          console.error("로그인 실패:", res.error);
        }
        setIsLoading(false);
      });

 

3. 이벤트 수신(from server)

socket.on('receive_message', messageHandler);

이렇게 emit(발신)과 on(수신)을 통해 사용했다.

 

 

 

아쉬운점

특정 룸에만 채팅을 보내는게 아직 구현되지 않아 전체 채팅방을 공유하는 방식으로 사용되고 있다.