使用JavaScript獲取本機IP地址

在Web開發或網路編程中，獲取本機IP地址是一個常見的需求。通過JavaScript獲取本機IP地址是基於客戶端實現的技術，因此其實現具有一定的複雜性和局限性。本文將從多個方面對JavaScript獲取本機IP地址進行詳細解析，幫助讀者了解其實現原理和使用方法。

一、使用WebRTC API獲取本機IP地址

WebRTC（Web Real-Time Communication）是一項由W3C制定的Web API，用於在端到端的實時通信中使用的技術。WebRTC可以用於音視頻通話、數據共享以及文件傳輸等場景。通過WebRTC API，我們可以輕鬆地獲取本地網路介面的信息，包括IP地址。下面是獲取本機IP地址的JavaScript代碼：

function getLocalIPAddress(callback) {
  var ip_dups = {};

  // RTCPeerConnection對象獲取本地網路介面信息
  var RTCPeerConnection = window.RTCPeerConnection ||
    window.mozRTCPeerConnection ||
    window.webkitRTCPeerConnection;
  var mediaConstraints = {
    optional: [{
      RtpDataChannels: true
    }]
  };

  // 獲取ICE伺服器配置，一般不需要修改
  var servers = {
    iceServers: [{
      urls: "stun:stun.l.google.com:19302"
    }]
  };

  // 創建RTCPeerConnection對象並綁定事件
  var pc = new RTCPeerConnection(servers, mediaConstraints);

  // 將所有的網路介面地址存儲到ip_dups中
  pc.onicecandidate = function (ice) {
    if (ice.candidate) {
      var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
      var ip_addr = ip_regex.exec(ice.candidate.candidate)[1];

      if (ip_dups[ip_addr] === undefined)
        callback(ip_addr);

      ip_dups[ip_addr] = true;
    }
  };

  // 創建一個不傳輸數據的data channel，觸發onopen回調事件
  pc.createDataChannel("");

  // 調用createOffer方法，觸發onicecandidate事件
  pc.createOffer(function (result) {
    pc.setLocalDescription(result, function () {}, function () {});
  }, function () {});
}

代碼中，我們藉助RTCPeerConnection對象獲取本機網路介面的信息，然後通過正則表達式解析出其IP地址，並檢查是否有重複IP地址。需要注意的是，由於獲取IP地址是通過調用WebRTC API實現的，因此僅支持現代瀏覽器。此外，由於WebRTC API的使用限制，該方法不能在本地打開的HTML文件中進行調用。

二、使用XHR對象獲取本機IP地址

XMLHttpRequest（XHR）對象是JavaScript中經典的非同步通信技術。我們可以通過XHR對象向伺服器發送請求並獲取響應結果。基於XHR對象，我們也可以獲取請求方的IP地址。下面是獲取本機IP地址的JavaScript代碼：

function getLocalIPAddress(callback) {
  // 創建XHR對象
  var xhr = new XMLHttpRequest();

  // 請求本機IP地址的JSON文件
  xhr.open("GET", "https://api.ipify.org?format=json", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      // 解析JSON文件並獲取IP地址
      var response = JSON.parse(xhr.responseText);
      callback(response.ip);
    }
  };
  xhr.send();
}

代碼中，我們通過向」https://api.ipify.org?format=json」發送非同步請求，獲取JSON格式的響應數據，並從中解析出IP地址。該方法不存在局限性，支持任何瀏覽器，且可以在本地文件中進行調用。

三、使用WebSocket對象獲取本機IP地址

WebSocket是HTML5標準中新增的雙向通信協議，用於實現瀏覽器與伺服器之間的實時通信。通過WebSocket對象，我們可以獲取本機IP地址。下面是獲取本機IP地址的JavaScript代碼：

function getLocalIPAddress(callback) {
  // 創建WebSocket對象
  var socket = new WebSocket("wss://echo.websocket.org");

  // 監聽WebSocket對象的打開事件
  socket.onopen = function (event) {
    // 獲取WebSocket對象的本地地址
    callback(socket.localAddress);

    // 關閉WebSocket對象
    socket.close();
  };
}

代碼中，我們通過創建WebSocket對象，並在其打開事件回調函數中獲取本地地址信息。需要注意的是，由於WebSocket協議需要通過伺服器來實現雙向通信，因此該方法不能在本地打開的HTML文件中進行調用。

四、使用DNS查詢獲取本機IP地址

在實際的網路編程中，我們往往需要通過DNS查詢獲取本機的IP地址。在JavaScript中，我們可以使用DNS查詢工具庫如dns.js，實現通過DNS查詢獲取本機IP地址的功能。下面是獲取本機IP地址的JavaScript代碼：

function getLocalIPAddress(callback) {
  // 引入dns.js庫
  var dns = require('dns');

  // 獲取主機名和對應的IP地址
  dns.lookup(require('os').hostname(), function (err, addresses, family) {
    if (err) throw err;
    callback(addresses);
  });
}

代碼中，我們通過引入dns.js庫實現對本機IP地址的查詢。需要注意的是，由於dns.js庫需要在Node.js環境中運行，因此該方法不能在瀏覽器環境中直接調用。

五、使用第三方API獲取本機IP地址

除了前面介紹的方法外，我們還可以通過第三方API來獲取本機IP地址。下面是獲取本機IP地址的JavaScript代碼：

function getLocalIPAddress(callback) {
  // 使用第三方API獲取IP地址
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://ipinfo.io/json", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      var response = JSON.parse(xhr.responseText);
      callback(response.ip);
    }
  };
  xhr.send();
}

代碼中，我們使用第三方API（ipinfo.io）來獲取IP地址信息。由於第三方API的存在，我們無需通過複雜的JavaScript代碼來獲取本機IP地址，簡單方便。

六、總結

通過本文的介紹，我們了解了多種獲取本機IP地址的JavaScript技術，包括使用WebRTC API、XHR對象、WebSocket對象、DNS查詢和第三方API等。讀者可以根據自己的實際需求選擇合適的方法來獲取本機IP地址。需要注意的是，不同的方法具有不同的局限性和實現複雜度，讀者應該根據實際情況選擇適合自己的方案。