Merge pull request #91 from boostcampwm-2022/88-socket-webrtc-실제-테스트-후-리팩토링

Socket webrtc 실제 테스트 후 리팩토링

Author: bh2980

backend/socket/src/room/room.gateway.ts

@@ -53,8 +53,8 @@ export class RoomGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
 	handleDisconnect(@ConnectedSocket() client: Socket) {
 		this.logger.log(`disconnected: ${client.id}`);
-		this.connectionService.leaveRoom({ client, server: this.server });
 		this.webrtcService.disconnectWebrtc({ client, server: this.server });
+		this.connectionService.leaveRoom({ client, server: this.server });
 	}
 
 	// interview

backend/socket/src/room/room.module.ts

@@ -4,13 +4,14 @@ import { InmemoryRoomRepository } from './repository/inmemory-room.repository';
 import { RoomGateway } from './room.gateway';
 import { ConnectionService } from './service/connection/connection.service';
 import { InterviewService } from './service/interview/interview.service';
+import { WebrtcService } from './service/webRTC/webrtc.service';
 
 export const RoomRepository: ClassProvider = {
 	provide: ROOM_REPOSITORY_INTERFACE,
 	useClass: InmemoryRoomRepository,
 };
 
 @Module({
-	providers: [RoomGateway, RoomRepository, ConnectionService, InterviewService],
+	providers: [RoomGateway, RoomRepository, ConnectionService, InterviewService, WebrtcService],
 })
 export class RoomModule {}

backend/socket/src/room/service/webRTC/webrtc.service.ts

@@ -13,8 +13,10 @@ export class WebrtcService {
 
 	startSignaling({ client, server }: { client: Socket; server: Namespace }) {
 		const user = this.roomRepository.getUserByClientId(client.id);
+		const usersInRoom = this.roomRepository.getUsersInRoom(user.roomUUID);
+		console.log(usersInRoom);
 
-		server.to(user.roomUUID).emit(EVENT.RECEIVE_SIGNALING, { userUUID: user.uuid });
+		client.to(user.roomUUID).emit(EVENT.RECEIVE_SIGNALING, { userUUID: user.uuid });
 		return {};
 	}
 
@@ -27,10 +29,12 @@ export class WebrtcService {
 		connectSignal: WebrtcBaseDto;
 		eventType: EVENT;
 	}) {
-		const { opponentId } = connectSignal;
+		const { myId, opponentId } = connectSignal;
 		const opponentClientId = this.roomRepository.getClientIdByUser(opponentId);
 
-		server.to(opponentClientId).emit(eventType, { connectSignal });
+		server
+			.to(opponentClientId)
+			.emit(eventType, { ...connectSignal, myId: opponentId, opponentId: myId });
 		return {};
 	}
 

frontend/src/hooks/useWebRTCSignaling.ts

@@ -109,28 +109,38 @@ const useWebRTCSignaling = (
 	const startConnection = async (myId) => {
 		await getMyStream(myId);
 
-		socket.on('receive_signaling', async (opponentId) => {
+		socket.on('receive_signaling', async ({ userUUID: opponentId }) => {
+			console.log('시그널 받음', '상대방', opponentId, '나', myId);
 			const newConnection = makeConnection(myId, opponentId);
 			const offer = await newConnection.createOffer();
 			newConnection.setLocalDescription(offer);
 
+			console.log('offer 보냄', offer, opponentId);
+
 			socket.emit('offer', { offer, myId, opponentId });
 		});
 
-		socket.on('offer', async ({ offer, opponentId }) => {
+		socket.on('offer', async ({ offer, myId, opponentId }) => {
+			console.log('offer 받음', offer);
 			const newConnection = makeConnection(myId, opponentId);
 			newConnection.setRemoteDescription(offer);
 			const answer = await newConnection.createAnswer();
 			newConnection.setLocalDescription(answer);
 
+			console.log('answer 보냄');
+
 			socket.emit('answer', { answer, myId, opponentId });
 		});
 
 		socket.on('answer', ({ answer, opponentId }) => {
+			// console.log(answer, opponentId);
+			console.log('answer 받음');
 			connectionListRef.current.get(opponentId).connection.setRemoteDescription(answer);
 		});
 
 		socket.on('icecandidate', ({ icecandidate, opponentId }) => {
+			// console.log(icecandidate, opponentId);
+			console.log('ice 받음');
 			connectionListRef.current.get(opponentId).connection.addIceCandidate(icecandidate);
 		});
 
@@ -145,7 +155,8 @@ const useWebRTCSignaling = (
 	 * 그 후, connectionListRef과 외부 webRTCUserList를 업데이트합니다.
 	 * @param closeId 서버가 보낸 나간 UserId
 	 */
-	const closeConnection = (closeId) => {
+	const closeConnection = ({ userUUID: closeId }) => {
+		console.log(closeId);
 		const oldStream = webRTCUserList.get(closeId).stream;
 		const oldConnection = webRTCUserList.get(closeId).connection;