결과
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();
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);
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.filter((user) => user !== memberNo);
io.in(roomNo).emit("/rooms/out", data);
_db
.qry(
`DELETE FROM room_users WHERE room_no = :roomNo AND member_no = :memberNo`,
data
)
.then(() => {});
}
});