[Bug] 다른 방 채팅 메시지도 수신

[14KGun]

Describe the bug

여러 개의 채팅방에 동시에 참여하고 있는 경우 다른 방 채팅이 옵니다. 채팅방을 나갔다 들어오면 그 채팅은 사라지긴 합니다.

Screenshots

[withSang]

서버에서는 roomId 구분 없이 Socket.io에 연결된 방 참여중인 모든 사용자에게 새 채팅 메시지 이벤트를 발생시킵니다(해당 코드)

두 가지 해결방법이 있을 것 같습니다!

1. 클라이언트에서 새 채팅 메시지 이벤트가 발생했을 때 새 채팅 메시지의 roomId가 현재 참여중인 방의 roomId와 같을 때에만 메시지를 표시하는 검증 단계를 추가합니다. 해당 채팅방을 지금 켜놓지 않은 사용자에게도 메시지가 전송되기 때문에 클라이언트 측면에서 불필요한 처리가 발생합니다. 아래 함수에 추가할 수 있습니다.
   

   taxi-front/src/pages/Chatting/index.jsx

   Lines 175 to 197 in 8066b84

   	pushBackListener: (chats) => {
   	if (isExpired) return;
   	const isMyMsg = chats.some((chat) => chat.authorId === userOid);
   	if (isMyMsg) sendingMessage.current = null;
   	if (chats.length > 10) {
   	axios({
   	url: "/chats/load/after",
   	method: "post",
   	data: {
   	roomId,
   	lastMsgDate: chats[chats.length - 1].time,
   	},
   	});
   	}
   	setChats(
   	(prevChats) => getCleanupChats([...prevChats, ...chats]),
   	isMyMsg || isBottomOnScroll()
   	? () => scrollToBottom(true)
   	: () => setShowNewMessage(true)
   	);
   	},

2. 서버의 emitChatEvent 함수를 수정하여 방에 참여중이고 현재 해당 채팅방을 켜놓은 사용자들에게만 채팅 메시지를 전송합니다. 서버에서 Redis로 캐시를 관리하면서 각 사용자가 현재 켜놓은 채팅방의 roomId를 저장할 수 있습니다.

[withSang]

@14KGun 헐 이미 커밋을 날리셨군요 빠르세요 ㄷㄷ

[14KGun]

@withSang @chlehdwon

근데 클라이언트가 메시지의 roomId를 알 방법이 없는 것 같은데,
해당 함수에다가 roomId를 추가햐야 할 것 같아요.

https://github.com/sparcs-kaist/taxi-back/blob/1312ab3e21a69684a57013dfa157e644e4414a3e/src/modules/socket.js#L29-L57

taxi-front/src/types/global.d.ts

Lines 43 to 61 in 8066b84

	type Chat = {
	roomId: string; // 방의 objectId
	type:
	| "text"
	| "in"
	| "out"
	| "s3img"
	| "payment"
	| "settlement"
	| "account"; // 메시지 종류 (text|in|out|s3img)
	authorId: string; // 작성자 objectId
	authorName?: string; // 작성자 닉네임 (사용자 입,퇴장 알림 등 전체 메시지일 때: null)
	authorProfileUrl?: string;
	content: string;
	time: Date; // UTC 시각
	isValid: boolean;
	inOutNames: [string];
	};

둘이 필드를 통일시켜야 할 듯 합니당 ㅜ

(back도 typescript 도입을... ㅜ)