如何使用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地址。在实际开发过程中，我们可以结合具体情况选取合适的获取方式。