⚫ forEach는 async를 기다려주지 않는다

forEach 는 동기적으로 동작하기 때문에 비동기 작업의 완료를 기다리지 않고 다음 반복(iteration)으로 넘어간다.

m2-res_480p.mp4

따라서 아래와 같은 코드를 실행했을 때, 우리가 기대하는 결과(순차적으로 offer 등록하고 sendOffer 이벤트를 발생)를 얻을 수 없다.

socket.on('offerRequest', (data) => {
	users.forEach(async (oldId) => {
	  const peerConnection = new RTCPeerConnection();
	  peerConnectionMap.set(oldId, peerConnection);
	
	  localStream
	    .getTracks()
	    .forEach((track) => peerConnection.addTrack(track, localStream));
	
	  const offer = await peerConnection.createOffer();
	  await peerConnection.setLocalDescription(offer);
	
	  socket.emit("sendOffer", { socketId: socket.id, offer });
	});
});

원하는 결과를 얻기 위해서는 for...of 혹은 Promise.all과 map 을 사용해주어야 한다.

1. for…of 사용

socket.on('offerRequest', async (data) => {
	for(const oldId of users) {
		const peerConnection = new RTCPeerConnection();
	  peerConnectionMap.set(oldId, peerConnection);
	
	  localStream
	    .getTracks()
	    .forEach((track) => peerConnection.addTrack(track, localStream));
	
	  const offer = await peerConnection.createOffer();
	  await peerConnection.setLocalDescription(offer);
	
	  socket.emit("sendOffer", { socketId: socket.id, offer });
  });
});

2. Promise.all과 map 사용

socket.on('offerRequest', async (data) => {
	const connections => users.map(async (oldId) => {
		const peerConnection = new RTCPeerConnection();
	  peerConnectionMap.set(oldId, peerConnection);
	
	  localStream
	    .getTracks()
	    .forEach((track) => peerConnection.addTrack(track, localStream));
	
	  const offer = await peerConnection.createOffer();
	  await peerConnection.setLocalDescription(offer);
	
	  socket.emit("sendOffer", { socketId: socket.id, offer });
  });
  await Promise.all(connections);
});

• 참고

  https://www.coreycleary.me/why-does-async-await-in-a-foreach-not-actually-await

  https://medium.com/@shahzarana4/the-pitfalls-of-using-foreach-with-async-await-in-javascript-8a43066904ff

  https://www.reddit.com/r/learnjavascript/comments/xvfmvu/how_asyncawait_runs_inside_foreach_and_why_it/