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对象获取。