[쉘위헬스] socket.io 채팅방 생성하기

먼저 구현하기에 앞서 Socket.io란 무엇인지 정리해보고자 한다

socket.io란?

• 양방향 통신을 하기 위해 웹소켓 기술을 활용하는 라이브러리이다
• 클라이언트 라이브러리와 서버 라이브러리가 다르다 (socket.io-client , socket.io)
• 자바스크립트를 이용해서 브라우저에 상관없이 실시간 웹을 구현할 수 있다
• 현존하는 대부분의 실시간 웹 기술들을 추상화해 놓았다
  • Websocket, flashSocket, ajax, long poling, ajax muti streaming, IFrame, Json Poling 등
• 웹 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용한다

웹소켓에 비하여 자체적으로 브로드캐스팅이 가능하고
웹소켓의 사용을 단순화 하여 사용할 수 있고, 자바스크립트로 구현할 수 있기때문에 socket.io를 선택하여 양방향통신 기능을 구현하였다.

이전에 View페이지(게시글) 에서 채팅하기 버튼을 누른 뒤 채팅방이 생성되면 실시간소통으로 메세지를 주고 받을 수 있도록 설정하였다.

// view에서 연결한 socket을 props로 Chat에게 전달
<Chat data={data} postId={postNumber} socket={socket} />

Client

채팅창에서 Enter 와 click 입력 될 경우 아래와 같은 일들이 실행될 수 있는 함수를 만들었다.
1. socket.io 핸들러 호출
2. axios 서버 db저장

message 전송 시 실행되는 함수

  const sendMessage = async (e) => {
    if (e.key === 'Enter' && content !== '') {
      await socketMessage(); //socket.io 서버전달 핸들러 호출
      await handleSendMessage(); // 메세지 db 저장
    }
    if (e.type === 'click' && content !== '') {
      await socketMessage(); //socket.io 서버전달 핸들러 호출
      await handleSendMessage(); // 메세지 db 저장
    }
  };

---

데이터 배열에 저장 하고 보내기

emit 으로 'send_message' 라는 이름으로 생성된 messageData 전송

  const socketMessage = async () => {
    const messageData = {
      room: postId,
      authorId: id,
      content: content,
      time: new Date()
    };
    setMessageList((list) => [...list, messageData]);// 화면에 랜더링되는 배열
    await socket.emit('send_message', messageData);
  };

useEffect로 데이터 받아오기

상대방에게서 메세지를 받아오게 될 경우 실행 된다

  useEffect(() => {
    socket.on('receive_message', (data) => {
      setMessageList((list) => [...list, data]); // 화면에 랜더링되는 배열
    });
  }, [socket]);

Server (백엔드 팀원분 작성코드)

서버에서는 클라이언트에서 emit으로 전달해주면 on으로 받은 뒤 emit으로 다시 값을
전달해주어서 메세지가 오고 갈 수 있도록 해주었다

io.on("connection", (socket) => {
  console.log(`User conneced: ${socket.id}`);
  socket.on("join_room", (data) => {
    socket.join(data);
    console.log(`User with Id: ${socket.id} joined room: ${data}`);
  });
  socket.on("send_message", (data) => {
    const messageData = formatMessage(data.authorId, data.content, data.time);
    console.log(messageData);
    socket.to(data.room).emit("receive_message", messageData);
  });
  socket.on("disconnect", () => {
    console.log("User Disconnected, socket.id");
  });
});

마치며,

평소에 실생활에서 쉽게 볼 수 있는 기능을 양방향통신 기능을 구현하려고 자료를 찾아보았더니
웹소켓, socket.io 라는 단어들을 접할 수 있었고 공부를 하여서 기능을 마무리 지었어야했다

처음 접한내용이다보니 생소한 단어들도 많았고 정말 많은 글들을 읽었지만 아직까지 완벽하게 이해하지는 못한것같다
브로드캐스팅이라는 단어가 어떤뜻인지는 알겠지만 설명하기 어려운 부분이였는데 서로 지정된 공간끼리는 공유 할 수 있도록 쉽게 연결해주는 기능이라고 이해했다.
그래도 이전에 모르던 때와 비교해서는 웹소켓과 소켓아이오의 차이점도 알게되었고
기능구현도 마무리 할 수 있었다