前端获取IP详解

一、什么是IP地址？

IP地址是Internet Protocol的简称，翻译成中文就是“网际协议”，它是在网络上唯一标识一个节点（设备）的方式。每个节点（设备）都有一个独特的IP地址，这个IP地址可以用来在网络上找到这个节点（设备）。

IP地址是一个由32位二进制数分成4组，每组8位，转换成十进制后加上小数点连成的字符串。例如，“192.168.1.1”就是一个IP地址。

二、前端获取IP的方式

1.使用Ajax发送请求获取客户端IP地址

$.ajax({
    url: "https://api.ipify.org?format=jsonp&callback=?",
    dataType: "jsonp",
    success: function(json) {
        var ip = json.ip;
        console.log(ip);
    }
});

这种方式通过向第三方接口发送请求，从响应中获取IP地址。它的优点是代码量较小，容易实现，在一些简单的应用场景下比较实用；缺点是需要向第三方接口发送请求，可能会受到接口访问限制，而且该IP地址是客户端的公网IP，不能获取客户端的局域网IP。

2.利用WebRTC API获取本机IP地址

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

  var RTCPeerConnection = window.RTCPeerConnection
    || window.mozRTCPeerConnection
    || window.webkitRTCPeerConnection;

  if (!RTCPeerConnection) {
    callback([]);
    return;
  }

  var pc = new RTCPeerConnection({iceServers:[]}),
    noop = function(){};   
  pc.createDataChannel("");    
  pc.createOffer(function(sdp) {
    sdp.sdp.split('\n').forEach(function(line) {   
      if (line.indexOf('candidate') < 0) return;   
      line.split(' ').forEach(function(part) {
        if (part.indexOf('192.168.') === 0 || part.indexOf('172.') === 0 || part.indexOf('10.') === 0) {
          if (!(part in ip_dups)) {
            ip_dups[part] = true;
          }
        }
      });
    });
    Object.keys(ip_dups).forEach(function(ip) {
      callback(ip);
    });
  }, noop); 
}

这种方式使用浏览器的WebRTC API获取本机IP地址。它的优点是可以获取客户端的局域网IP地址；缺点是需要比较复杂的代码实现，而且可能会有跨浏览器兼容性问题。

3.利用Websocket获取客户端IP地址

var ws = new WebSocket('ws://example.com:1234');
ws.onopen = function(){
    var ip = ws._socket.remoteAddress;
    console.log(ip);
};

这种方式利用Websocket获取客户端IP地址。它的优点是可以获得客户端的IP地址；缺点是必须要建立Websocket连接，而且代码比较复杂。

三、总结

前端获取IP地址的方式有很多种，在实际应用中应该根据不同的场景选择不同的方式。在选择的同时，要考虑到代码实现的复杂度、跨浏览器兼容性以及接口访问限制等因素。