Async-await not working as I expected in forEach loop

Question

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;
  }
}

It seems possible you've confused the async parts of your app. For instance calls like await newPeerConnection when the methods have no return value is a warning flag. — Randy Casburn
– Randy Casburn, Commented Nov 29, 2021 at 17:51
@RandyCasburn But I don't use those methods and I'm still having the same issues. — Jayson Meribe
– Jayson Meribe, Commented Nov 29, 2021 at 22:38

Steve · Accepted Answer · 2021-11-29 23:40:27Z

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.

Collectives™ on Stack Overflow

Async-await not working as I expected in forEach loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related