前端獲取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地址的方式有很多種，在實際應用中應該根據不同的場景選擇不同的方式。在選擇的同時，要考慮到代碼實現的複雜度、跨瀏覽器兼容性以及介面訪問限制等因素。