CODEWITHSUNDEEP
javascriptforeachasync-await
Jayson Meribe
Jayson Meribe

Reputation: 134

Async-await not working as I expected in forEach loop

I am using WebRTC to try and connect two users together. I call createOffer then I set the local description of the peer connection using what createOffer returns. I don't know why I am getting the following error:

Note: I am using firebase firestore as a signaling server

Uncaught (in promise) DOMException: Cannot set local offer when createOffer has not been called.

Here is my code:

async function preformSignaling() {
  let users = await negDoc.collection("users").get();
  let newPeerConnection;

  users.forEach(async (doc) => {
    if (isNotAlreadyConnected(doc.id)) {
      newPeerConnection = new UserConnection(servers, doc.id);

      if (doc.id != sessionStorage.getItem("userID") && doc.id != "metadata") {

        let connOfferDescription =
          await newPeerConnection.userPeerConnection.createOffer();

        await newPeerConnection.userPeerConnection.setLocalDescription(
          connOfferDescription
        );

        await doc.collection("offer-candidates").doc("offer").set({
          offer: newPeerConnection.userPeerConnection.localDescription,
        });
      }

      peerConnections.push(newPeerConnection);
    }
  });
}

class UserConnection {
  constructor(servers, remoteUserID) {
    this.userPeerConnection = new RTCPeerConnection(servers);
    this.remoteStream = new MediaStream();
    this.remoteUserID = remoteUserID;
  }

  getRemoteUserID() {
    return this.remoteUserID;
  }
}

Upvotes: 0

Views: 590

Answers (1)

Steve
Steve

Reputation: 4975

I'm taking a bit of a blind stab here but using async-await in a forEach (or map,filter,reduce etc.) is a common gotcha. It essentially just fires a bunch of async calls.

It won't wait for what's happening in that callback to finish before firing the next one. The internals of the forEach would need to await the callback and the callback must return a promise.

Because you have let newPeerConnection outside of the loop, you are probably writing that variable multiple times before any of the createOffer calls finish.

You could bring that variable inside the loop if none of these simultaneous calls will affect each other. Otherwise, just use a for-of loop if you'd like to run them one by one. That might look something like this:

async function preformSignaling() {
    let users = await negDoc.collection('users').get();
    let newPeerConnection;

    for (let doc of users) {
        if (!isNotAlreadyConnected(doc.id)) continue;

        newPeerConnection = new UserConnection(servers, doc.id);

        if (
            doc.id !== sessionStorage.getItem('userID') &&
            doc.id !== 'metadata'
        ) {
            let connOfferDescription =
                await newPeerConnection.userPeerConnection.createOffer();

            await newPeerConnection.userPeerConnection.setLocalDescription(
                connOfferDescription
            );

            await doc.collection('offer-candidates').doc('offer').set({
                offer: newPeerConnection.userPeerConnection.localDescription,
            });
        }

        peerConnections.push(newPeerConnection);
    }
}

Note a couple of minor changes in there for better practices: !== not !=, and check the inverse of the bool and continue early to avoid the pyramid of doom.

Upvotes: 2

Related Questions