為什么我被告知我沒有調用 createOffer()，而我顯然已經調用了？

Question

我正在使用 WebRTC 嘗試將兩個用戶連接在一起。 我調用 createOffer，然后使用 createOffer 返回的內容設置對等連接的本地描述。 我不知道為什么會出現以下錯誤：

注意：我使用 firebase firestore 作為信令服務器

未捕獲（承諾中）DOMException：未調用 createOffer 時無法設置本地優惠。

這是我的代碼：

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

Answer 1

我在這里采取了一些盲目的嘗試，但是在forEach （或 map、filter、reduce 等）中使用 async-await 是一個常見的問題。 它本質上只是觸發了一堆異步調用。

在觸發下一個回調之前，它不會等待該回調中發生的事情完成。 forEach的內部需要等待回調，並且回調必須返回 promise。

因為您已經let newPeerConnection在循環之外，所以您可能在任何createOffer調用完成之前多次寫入該變量。

如果這些同時調用都不會相互影響，您可以將該變量帶入循環中。 否則，如果您想逐個運行它們，只需使用 for-of 循環。 這可能看起來像這樣：

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

請注意其中的一些小改動以獲得更好的實踐：,== not.=，並檢查 bool 的倒數並盡早繼續以避免厄運金字塔。