JS獲取本機IP的幾種方法

一、JS獲取本機IP地址

在開發前端應用時，我們可能需要獲取訪問者的IP地址，以便顯示一些對應的信息，這時候我們可以通過JavaScript來獲取本機的IP地址。

//方法一：
function getIPAddress(){
  return new Promise((resolve, reject)=>{
    var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection;
    var pc = new RTCPeerConnection({iceServers:[]}),
      noop = function(){},
      localIPs = {};
    pc.createDataChannel('');
    pc.createOffer(pc.setLocalDescription.bind(pc), noop);
    pc.onicecandidate = function(ice){
      if(!ice || !ice.candidate || !ice.candidate.candidate)  return;
      let ip = /(192\.168|172\.16|10\.(\d{1,3})|([2][5][0-5]|[2][0-4][0-9]|[01]?[0-9][0-9]?)(\.([2][5][0-5]|[2][0-4][0-9]|[01]?[0-9][0-9]?)){2})/.exec(ice.candidate.candidate)[0];
      if(!localIPs[ip]) resolve(ip);
      localIPs[ip] = true;
    };
  });
}

通過RTCPeerConnection可以獲取到本地的IP地址，但是該方案存在一個局限性，即需要用戶允許瀏覽器訪問麥克風和攝像頭，否則獲取不到 IP地址。

//方法二：
function getIPAddress(){
  return new Promise((resolve, reject)=>{
    //使用第三方服務
    $.getJSON("https://api.ipify.org?format=json", function(data){
      resolve(data.ip);
    });
  });
}

該方法通過調用第三方web API獲取本地的IP地址，無需用戶授權，適用於大量數據獲取場景。

二、JS獲取本機IPv4地址

IPv4地址是網絡連接的基礎，更多的應用場景需要使用IPv4地址進行開發。

function getIPv4Address(){
  return new Promise((resolve, reject) => {
    //1.使用w3c api
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    if (typeof window.RTCPeerConnection == 'undefined') {
      //使用第三方服務
      $.getJSON("https://ipv4.myexternalip.com/json", function(data){
        resolve(data.ip);
      });
    }
    else {
      var pc = new RTCPeerConnection();
      pc.createDataChannel(''); 
      pc.createOffer(function(sdp){
        pc.setLocalDescription(sdp, function() {});
      }, function onerror(){}); 
      pc.onicecandidate = function(ice) {
        if (!ice || !ice.candidate || !ice.candidate.candidate) return;
        var ip = /([0-9]{1,3}(.[0-9]{1,3}){3})/.exec(ice.candidate.candidate)[1];
        resolve(ip);
      };
    }
  });
}

三、JS獲取本機IPv6地址

IPv6地址是網絡連接的未來，對於全球範圍內分布的設備進行唯一標識不再是問題，而且IPv6地址的長度也比IPv4地址更長，可以支持更複雜的網絡應用場景。

function getIPv6Address(){
  return new Promise((resolve, reject) => {
    //使用第三方服務
    $.getJSON("https://api6.ipify.org?format=json", function(data){
      resolve(data.ip);
    });
  });
}

四、JS獲取本機MAC地址

MAC地址是設備唯一的物理地址，可以通過它來對設備進行唯一標識，而且它是網絡層面的，能夠直接與網絡的通信技術對接。

function getMACAddress(){
  return new Promise((resolve, reject) => {
    //使用第三方服務
    $.getJSON("https://api.macvendors.com", function(data){
      resolve(data);
    });
  });
}

五、JS獲取前端IP地址

前端IP地址是指客戶端的公網IP地址，即用戶真實連接到Internet的IP地址。

function getClientIPAddress(){
  return new Promise((resolve, reject) => {
    //使用第三方服務
    $.getJSON("https://ipapi.co/json/", function(data){
      resolve(data.ip);
    });
  });
}

綜上所述，JS獲取本機IP地址的方法有多種，可以通過調用第三方web API獲取，也可以通過瀏覽器的RTCPeerConnection對象獲取。