[Fullstack] 고객센터 채팅 기능 만들기

예전에 코딩알려주는누나의 채팅앱 만들기 영상을 보고 이번 프로젝트에 적용해보고 싶단 생각에,

2주 배운 모자란 백엔드 실력이지만... 온전한 기능을 다하진 못해도 간단한 채팅앱 만들기에 도전을 해보았다!

 

[BackEnd]

HTTP

• 단방향(클라이언트 요청시만)
• 연결 지속성 ❌

 

웹소켓

• 양방향(각자대화를 원할때 요청 가능)
• 연결 지속성⭕️

 

👉🏻 웹소켓으로 지속적인 실시간 양방향 통신을 할 수 있고, 서버가 새로운 메시지가 있을때 클라이언트에게 즉시 메시지를 보낼수있다.

 

 

https://github.com/Yuiii0/chat-server

GitHub - Yuiii0/chat-server

 

[FrontEnd]

 

프론트에서 socket 연결하기

//server.js

import { io } from "socket.io-client";

const socket = io("http://localhost:5001"); //연결하고싶은 BE 주소
export default socket;

 

 

socket 통신하기 

    socket.emit("login", userName, (res: SocketResponse) => {
      if (res?.ok) {
        setUser(res.data);
      }
    });
    socket.on("message", (message) => {
      setMessageList((prev) => [...prev, message]);
    });

    return () => {
      socket.off("message");
    };

 

소켓을 통해, 서버에 로그인 요청을 보내고 message를 리스닝해서  messageList 값을 설정해서 메시지를 띄운다.

 

 

const sendMessage: FormEventHandler<HTMLFormElement> = (event) => {
    event.preventDefault();
    socket.emit("sendMessage", message, (res: SocketResponse) => {
      console.log("sendMessageRds", res);
    });
    setMessage("");
  };

emit을 통해 input창에 입력한 메시지를 보낸다.

 

 

 

클라이언트측에서 메시지를 보내면, 시스템 메시지를 보내도록 구현하였다.

 

 

 

 

 

 

 

 

개선이 많이 필요하지만, 채팅  기능을 구현해보았다는 점에 의미를 두고싶다 🙂