한 WebRTC API는 클라이언트의 로컬 IP를 검색 할 수 있습니다.
그러나 브라우저가이를 지원하지 않거나 클라이언트가 보안상의 이유로 비활성화했을 수 있습니다. 어쨌든 미래에 패치 될 가능성이 있기 때문에 장기적 으로이 "해킹"에 의존해서는 안됩니다 (Cullen Fluffy Jennings의 답변 참조).
아래 ECMAScript 6 코드는이를 수행하는 방법을 보여줍니다.
/* ES6 */
const findLocalIp = (logInfo = true) => new Promise( (resolve, reject) => {
window.RTCPeerConnection = window.RTCPeerConnection
|| window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection;
if ( typeof window.RTCPeerConnection == 'undefined' )
return reject('WebRTC not supported by browser');
let pc = new RTCPeerConnection();
let ips = [];
pc.createDataChannel("");
pc.createOffer()
.then(offer => pc.setLocalDescription(offer))
.catch(err => reject(err));
pc.onicecandidate = event => {
if ( !event || !event.candidate ) {
// All ICE candidates have been sent.
if ( ips.length == 0 )
return reject('WebRTC disabled or restricted by browser');
return resolve(ips);
}
let parts = event.candidate.candidate.split(' ');
let [base,componentId,protocol,priority,ip,port,,type,...attr] = parts;
let component = ['rtp', 'rtpc'];
if ( ! ips.some(e => e == ip) )
ips.push(ip);
if ( ! logInfo )
return;
console.log(" candidate: " + base.split(':')[1]);
console.log(" component: " + component[componentId - 1]);
console.log(" protocol: " + protocol);
console.log(" priority: " + priority);
console.log(" ip: " + ip);
console.log(" port: " + port);
console.log(" type: " + type);
if ( attr.length ) {
console.log("attributes: ");
for(let i = 0; i < attr.length; i += 2)
console.log("> " + attr[i] + ": " + attr[i+1]);
}
console.log();
};
} );
내가 글을 return resolve(..)
쓰거나 return reject(..)
단축키로 사용하는 것에 주목하십시오 . 두 함수 모두 아무것도 반환하지 않습니다.
그러면 다음과 같은 것이있을 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Local IP</title>
</head>
<body>
<h1>My local IP is</h1>
<p id="ip">Loading..</p>
<script src="ip.js"></script>
<script>
let p = document.getElementById('ip');
findLocalIp().then(
ips => {
let s = '';
ips.forEach( ip => s += ip + '<br>' );
p.innerHTML = s;
},
err => p.innerHTML = err
);
</script>
</body>
</html>