JavaScript通过WebRTC捕获IP（通过异步/等待发出）

Question

I have came up with code that capture IPs via WebRTC. However I have run into issue, I can't return IPs as variable, I'm able only print IPs in console, show them in alert or show them on HTML page. But I need return IPs as variable from function.

I believe issue is in async/awaiting. I'm not JavaScript developer and it will took whole day to find out a place where to put await .

Please help me solve this issue. Thank you.

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

I can output IPs in console, but I can't return IPs as value from function.

Answer 1

findIPsWithWebRTC can't return the IPs, because the IPs are provided to your code asynchronously. A synchronous function cannot return the result of an asynchronous process.

Instead, your findIPsWithWebRTC should return a promise , which will be fulfilled with the object your currently trying to return. It looks like you get the IPs in in onicecandidate (or perhaps the callback to createOffer ?), so (see *** ):

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

Presumably there's also a way for this to fail. You'll want to call reject in that case, so that the promise doesn't stay unsettled forever.

Code using findIPsWithWebRTC will need to handle the fact that it provides a promise. You can either consume it within an async function:

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

...or in a non- async function, use then and catch :

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

In both cases, if the function consuming the result isn't the top-level consumer, you would normally leave error handling to it. In the async example, you'd do that by not having the try / catch (rejections are automatically propagated to the caller). In the non- async example, you'd do it by returning the result of calling then and not having catch .