[쉘위헬스]채팅창 분기 설정 socket.io join연결하기

socket.io를 이용하여 채팅방을 열어줘야했다!
View페이지(다른 프론트팀원파트)에서 Chat.js 컴포넌트가 하위 컴포넌트로 들어가게 되어서
View페이지에서 socket.io 기본 세팅 후
axios로 받아오는 서버 데이터로 분기를 나눠준 뒤 join 메서드를 이용해서 방을 개설해주었다!

---

View axios Data

guestId: 2
guestNickname: "Isaac Shields"
hostId: 1
hostNickname: "Hannah Vaughn"
isMatched: true
location: {x: '126.851852125249', y: '37.3075057767206', id: '22512695', phone: '031-401-5575', distance: '', …}
reserved_at: "2022-11-26T06:59:00.000Z"

채팅창 on/off 조건

• [채팅하기 누를 때]
  채팅창 열고 닫고 정하는 데이터 : isMatched
• [채팅창 마감 시간]
  reserved_at 기준으로 2시간이 지났는지 확인하기

---

• 채팅하기 눌렀을 때

• isMatched 먼저 확인해서 매치 가능한 상태인지 확인
  • hostId 또는 guestId 가 Login Id와 같은지 확인
    조건에 만족하지 못한다면 매칭 된 상대만 대화 할 수 있습니다 모달 띄워주기
• reserved_at 으로 시간이 자나있으면 마감 된 채팅방입니다 모달 띄워주기
• 채팅 가능 할 때 채팅 컴포넌트 띄워주면서 join 메서드로 방 연결해주기

Client

  const chatting = () => {
    const { hostId, guestId } = data
    if (ismatched !== true) {
      /* 취소 된 파트너 isMatched === 2 or isMatched === false */
      setModalMessage('매칭 된 상대만 대화 할 수 있습니다');
      setChatModal(true);
    }
    else if (ismatched === true) {
      const reserved = reserveDate.slice(0, reserveDate.length - 1);
      const chatCloseTime = new Date(reserved);
      const now = new Date();
      chatCloseTime.setHours(chatCloseTime.getHours() + 2);

      if (now > chatCloseTime) {
        setModalMessage('마감 된 채팅방입니다');
        setChatModal(true);
      } else {
        if (hostId === userId || guestId === userId) {
          setChatOpen(true);
          socket.emit('join_room', postNumber); // postId로 방 연결해주기
        } else {
          setModalMessage('매칭 된 상대만 대화 할 수 있습니다');
          setChatModal(true);
        }
      }
    }
  };

server

io.on("connection", (socket) => {
  ...
  socket.on("join_room", (data) => {
    socket.join(data);
    console.log(`User with Id: ${socket.id} joined room: ${data}`);
  });
  ...
});

---

socket.io 채팅방 구현하기 위해서 View 페이지 상단에

import io from 'socket.io-client';
const socket = io.connect(process.env.REACT_APP_SERVER_API);

client 라이브러리를 import 해온 뒤 connect 로 서버와 연결해 주었다
서버와 클라이언트가 다른 주소를 사용할 경우 connect로 연결 해 주어야 한다

---

공식홈페이지
https://socket.io/docs/v4/client-api/#socketconnect