如何使用JavaScript獲取本機IP地址

在我們進行網絡編程過程中，獲取本機IP地址是經常用到的一個功能，而JavaScript作為一門在瀏覽器中廣泛應用的腳本語言，也可以藉助其提供的API來獲取本機IP地址。以下將從多個方面介紹如何使用JavaScript獲取本機IP地址。

一、使用WebRTC技術

WebRTC是Web Real-Time Communication的縮寫，是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術。通過使用WebRTC技術，我們可以很方便地獲取到當前機器的IP地址。使用WebRTC獲取IP地址需要幾個步驟：

// 打開瀏覽器控制台
// 創建一個RTCPeerConfiguration對象，設置ICE Server
const config = {iceServers: [{urls: 'stun:stun.l.google.com:19302'}]};
// 創建一個RTCPeerConnection對象，並傳遞configuration選項
const pc = new RTCPeerConnection(config);
// 創建一個自定義的RTCPeerConnection對象的candidate，同時查詢ICE candidates列表
pc.createDataChannel('');
pc.createOffer()
  .then(pc.setLocalDescription.bind(pc))
  .catch((error) => {
      console.log(error);
  });
pc.onicecandidate = (iceEvent) => {
  console.log(iceEvent)
    if (iceEvent.candidate) {
        const url = 'https://api.ipify.org?format=jsonp&callback=findIP';
        // 發送GET請求獲取本機外網IP地址
        fetch(url).then(res => res.text()).then(res => {
            eval(res);
        });
    }
};
function findIP(json) {
  console.log(json.ip);
}

上述代碼中，我們通過創建一個RTCPeerConnection對象，並設置名為stun:stun.l.google.com:19302的ICE Server來獲取本機IP地址。在根據ICE Server創建好RTCPeerConnection對象後，我們創建了一個data channel，之後調用createOffer()方法，該方法用來創建一個SDP描述文件，並返回一個Promise對象，我們將其resolved後，調用setLocalDescription()方法將其設置為該RTCPeerConnection對象的本地SDP描述，然後通過監聽onicecandidate事件獲取candidate，並發送GET請求訪問https://api.ipify.org獲取IP地址。

二、使用第三方API

除了使用WebRTC技術之外，我們還可以藉助一些第三方API來獲取本機IP地址。比較常用的API有ipify、ip-api.com和api.ipify.org等，這裡以ipify為例：

fetch('https://api.ipify.org?format=json')
  .then(res => res.json())
  .then(data => console.log(data.ip))

我們通過fetch方法請求https://api.ipify.org並獲取格式為JSON的響應結果，之後通過訪問data.ip屬性來獲得本機IP地址。

三、使用DNS查詢

DNS（Domain Name System）域名系統是互聯網中最重要的非核心協議之一，它將一個域名映射為IP地址。因此，我們可以通過使用DNS查詢的方式來獲得本機IP地址，方法如下：

function getIP(onNewIP) {
  var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
  var pc = new myPeerConnection({
      iceServers: []
  }),
  noop = function() {},
  localIPs = {},
  count = 0,
  matchIps = ["192", "172", "10", "169.254", "127"];
  pc.createDataChannel("");
  pc.createOffer(function(sdp) {
      sdp.sdp.split("\n").forEach(function(line) {
          if (line.indexOf("candidate") < 0) {
              return;
          }
          line.match(/((udp|tcp) .*) /i).map(function(expr) {
              if (expr.match(matchIps.join('|'))) {
                  count++;
                  return;
              }
              expr = expr.replace(/ udp /i, ' ').replace(/ tcp /i, ' ');
              var lineArr = expr.split(" "),
              ipVersion = "";
              lineArr[0].indexOf(":") != -1 ? ipVersion = "v6" : ipVersion = "v4"
              var ipAddress = lineArr[0];
              if (ipAddress.indexOf(ipVersion) != -1) {
                  ipAddress = ipAddress.split(ipVersion)[1];
              }
              if (localIPs[ipAddress] === undefined) {
                  count++;
                  localIPs[ipAddress] = ipAddress;
              }
          });
      });
      onNewIP(localIPs);
      pc.setLocalDescription(sdp, noop, noop);
  }, noop);
}

在上述代碼中，我們通過創建RTCPeerConnection對象，並通過使用createDataChannel()和createOffer()方法來獲取本機IP地址。因為RTCPeerConnection對象需要和其他設備通訊才能獲取到IP地址，所以需要createDataChannel方法創建一個通道，調用createOffer方法獲取Session描述信息。

四、總結

通過以上三種方式，我們可以在JavaScript中獲取到當前機器的IP地址。在實際開發過程中，我們可以結合具體情況選取合適的獲取方式。