[chat] 현재 접속중인 유저

miin·2022년 6월 4일
0

Skill Collection [Function]

목록 보기
33/44

결과

full code

https://github.com/suminllll/chatting-sample

내용

  • 채팅방에 유저가 들어오면 join userMember에 숫자가 뜨고, 유저 닉네임이 표시
  • 채팅방을 나가면 join userMember에서 제거

코드

client

const fetchRoomUsers = async (roomNo) => {
  const response = await httpRequest("GET", `/rooms/chat/${roomNo}/userList`);
  return response;
};

const [userList, setUserList] = useState([]); //접속한 유저 리스트
const { user } = useGuard(); //현재 유저, 사용자 토큰이 있는지 확인후 user 정보를 보내줌

//채팅방 유저리스트를 서버에서 받아옴
      socket.emit("/rooms/join", {
        roomNo: props.roomNo,
        memberNo: user?.member_no,
        nick: user?.nick,
        type: "SYSTEM_USER_IN",
      });

      //채팅방 유저리스트를 서버에서 받아옴
      socket.on("/rooms/join", (data) => {
        console.log("joinuser", data);

        //접속한 유저 불러오기
        fetchRoomUsers(data.roomNo).then((response) => {
          let res = response.data;

          setUserList([...new Set(res.map((res) => res.nick))]);
        });
      });

//채팅방 나가기
      socket.on("/rooms/out", async (data) => {
        console.log("outUser", data);

        //joined members 반영
        fetchRoomUsers(props.roomNo).then((response) => {
          const res = response.data;
          setUserList([...new Set(res.map((res) => res.nick))]);
        });
      });

	return(
              <div className="joinWrap">
          <button onClick={handleClickBack}>Out</button>
          <h4 className="roomTitle">{room}</h4>
          <h4>{`Joined ${userList.length} Members`}</h4>
          {userList.map((user) => (
            <div className="joinUser" key={user.member_no}>
              <p>* {user}</p>
            </div>
          ))}
        </div>
)

server

socket.on("/rooms/join", async (data) => {
    console.log("채팅방 입장", data);

    const { roomNo, memberNo} = data;

    if (
      !userList.includes(memberNo) &&
      userList !== undefined &&
      memberNo !== undefined
    ) {
      userList.push(memberNo);

      _db
        .qry(
          "INSERT INTO room_users (room_no, member_no) VALUES (:roomNo, :memberNo)",
          data
        )
        .then(() => {
          //그 방에 집어넣는다
          socket.join(roomNo);
            io.in(roomNo).emit("/rooms/join", data);
        });
    }
  });

//채팅방 나가기
  socket.on("/rooms/out", (data) => {
    const { roomNo, memberNo } = data;

    if (memberNo !== undefined) {
      socket.leave(roomNo, memberNo);
      io.in(roomNo).emit("/rooms/out", data);

      //userList에서 나간 유저 삭제
      userList = userList.filter((user) => user !== memberNo);

      //userList client로 보냄
      io.in(roomNo).emit("/rooms/out", data);

      _db
        .qry(
          `DELETE FROM room_users WHERE room_no = :roomNo AND member_no = :memberNo`,
          data
        )
        .then(() => {});
    }
  });

0개의 댓글