2023亲测有效！JS获取你的电脑IP，快速查看内部和外部网络IP

2023-09-03 14:11:57

掌握 JavaScript 轻松获取你的电脑 IP 地址

在浩瀚的互联网世界中，你的电脑就像一栋拥有唯一地址的虚拟房屋。这个地址，我们称之为 IP 地址，它能精准地标识你的设备在网络中的位置。本文将为你揭秘如何利用 JavaScript 代码获取你的电脑 IP 地址，无论是本地地址还是公网地址，都能轻松搞定！

什么是 IP 地址？

IP 地址是互联网协议 (IP) 分配给连接到网络的每台设备的数字标签。它由一串数字组成，用点号分隔，例如："192.168.1.1"。IP 地址有两种类型：

本地 IP 地址： 用于标识设备在本地网络（如家庭 Wi-Fi）中的位置。
外部网络 IP 地址： 用于标识设备在互联网上的位置，使其他设备可以访问它。

获取电脑本地 IP 地址

要获取你的电脑本地 IP 地址，我们可以利用 WebRTC API 中的 RTCPeerConnection 对象。这个对象可以用来创建点对点连接，而它在创建连接时会返回本地 IP 地址。

const getLocalIP = () => {
  const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
  const pc = new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.l.google.com:19302",
      },
    ],
  });
  pc.createDataChannel("");
  pc.onicecandidate = (e) => {
    if (e.candidate && e.candidate.candidate && e.candidate.candidate.indexOf("typ relay") >= 0) {
      let ip = e.candidate.candidate.split(" ").find((s) => s.indexOf("typ relay") >= 0).split(":")[2].split(" ")[0];
      console.log(ip);
      return ip;
    }
  };
};

获取电脑网络 IP 地址

获取电脑网络 IP 地址的方式更加简单。我们可以通过向第三方 API 发送请求来获取该信息。本文推荐使用 ipify API：

const getPublicIP = async () => {
  const response = await fetch("https://api.ipify.org?format=json");
  const data = await response.json();
  console.log(data.ip);
  return data.ip;
};

显示 IP 地址

获取到 IP 地址后，我们可以使用 JavaScript 来显示它们：

const displayIP = (ip) => {
  document.getElementById("local-ip").innerHTML = ip;
};

完整代码

将上述代码片段组合在一起，我们就得到了一个完整的 JavaScript 函数，可以获取和显示你的电脑 IP 地址：

window.onload = async () => {
  const localIP = await getLocalIP();
  const publicIP = await getPublicIP();
  displayIP(localIP);
  displayIP(publicIP);
};