JavaScript 通过 WebRTC 捕获 IP(异步/等待问题)

Question

我已经想出了通过 WebRTC 捕获 IP 的代码。但是我遇到了问题，我无法将 IP 作为变量返回，我只能在控制台中打印 IP、在警报中显示它们或在 HTML 页面上显示它们。但我需要返回 IP 作为函数的变量。

我认为问题出在异步/等待中。我不是 JavaScript 开发人员，花了一整天的时间才找到放置 await 的地方。

请帮我解决这个问题。谢谢。

function findIPsWithWebRTC() {
    var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    var pc = new myPeerConnection({iceServers: [{urls: "stun:stun.l.google.com:19302"}]}),
    noop = function() {},
    IPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

    function ipIterate(ip) {
        if (!IPs[ip]) console.log('got ip: ', ip);
        IPs[ip] = true;
    }

    pc.createDataChannel("");

    pc.createOffer(function(sdp) {
        sdp.sdp.split('\n').forEach(function(line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(ipIterate);
        });
        pc.setLocalDescription(sdp, noop, noop);
    }, noop);

    pc.onicecandidate = function(ice) {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
        ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
    };

    console.log("ips: " + JSON.stringify(IPs));
    return {
        "source": "WebRTC",
        "name": "IPs",
        "value": JSON.stringify(IPs)
    }
}

alert(findIPsWithWebRTC().value);

我可以在控制台中输出 IP，但无法从函数中返回 IP 作为值。

Answer 1

findIPsWithWebRTC 无法返回 IP，因为 IP 是异步提供给您的代码的。同步函数不能返回异步过程的结果。

相反，您的 findIPsWithWebRTC 应返回一个 promise，该 promise 将通过您当前尝试返回的对象来实现。它看起来就像您在onicecandidate中获取IP(或者可能是对createOffer的回调？)，所以(参见*** ):

function findIPsWithWebRTC() {
    // *** Return a promise
    return new Promise((resolve, reject) => {
        var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
        var pc = new myPeerConnection({iceServers: [{urls: "stun:stun.l.google.com:19302"}]}),
        noop = function() {},
        IPs = {},
        ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
        key;

        function ipIterate(ip) {
            if (!IPs[ip]) console.log('got ip: ', ip);
            IPs[ip] = true;
        }

        pc.createDataChannel("");

        pc.createOffer(function(sdp) {
            sdp.sdp.split('\n').forEach(function(line) {
                if (line.indexOf('candidate') < 0) return;
                line.match(ipRegex).forEach(ipIterate);
            });
            pc.setLocalDescription(sdp, noop, noop);
            // *** Resolve the promise? Or see below.
            resolve({
                "source": "WebRTC",
                "name": "IPs",
                "value": JSON.stringify(IPs)
            });
        }, noop);

        pc.onicecandidate = function(ice) {
            if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
            ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
            // *** Resolve the promise? Or see above.
            resolve({
                "source": "WebRTC",
                "name": "IPs",
                "value": JSON.stringify(IPs)
            });
        };
    });
}

大概还有一种方法会导致此失败。在这种情况下，您需要调用 reject，这样 Promise 就不会永远悬而未决。

使用findIPsWithWebRTC的代码需要处理它提供 promise 的事实。您可以在 async 函数中使用它:

// In an `async` function
try {
    const ipInfo = await findIPsWithWebRTC();
    // ...use `ipInfo`...
} catch (error) {
    // Handle/report error
}

...或者在非async函数中，使用then和catch:

findIPsWithWebRTC()
.then(ipInfo => {
    // ...use `ipInfo`...
})
.catch(error => {
    // Handle/report error
});

在这两种情况下，如果使用结果的函数不是顶级使用者，通常会将错误处理留给它。在 async 示例中，您可以通过不使用 try/catch 来实现这一点(拒绝会自动传播给调用者)。在非async示例中，您可以通过返回调用then的结果而不使用catch来实现。