使用 JavaScript 获取访客 IP 地址

在Web开发中，有时需要获取访客的 IP 地址，以便做一些特定的行为，比如记录日志或限制访问。而 JavaScript 是客户端脚本语言，可以通过获取访问者的 IP 地址，实现一些有趣的功能。

如何获取访客 IP 地址

1. 通过后台接口获取

获取访客 IP 地址最精确的方式是通过后台接口获取。这种方法需要后台开发人员实现一个接口，然后前端通过AJAX或Fetch等方式调用该接口，从而获取到访客 IP 地址。

function getIpAddress() {
  fetch('https://api.ipify.org?format=json')
    .then(response => response.json())
    .then(data => console.log(data.ip))
    .catch(error => console.error(error));
}

上述代码使用 fetch 函数获取https://api.ipify.org 的 JSON 数据，其中包含了访客的 IP 地址。这样，我们就可以通过 then 方法回调来获取访客 IP 地址。

2. 使用第三方服务获取

如果没有后台接口，可以使用第三方服务获取访客 IP 地址。比如，我们可以调用https://ipapi.com 的 API 来获取访客 IP 地址。

function getIpAddress() {
  fetch('https://ipapi.co/json/')
    .then(response => response.json())
    .then(data => console.log(data.ip))
    .catch(error => console.error(error));
}

类似前面的方法，这种方法同样使用了 fetch 函数来获取 JSON 数据，并通过 then 方法回调来获取访客 IP 地址。

3. 使用 WebSocket 获取

如果您使用的是 WebSocket 协议，您可以使用 WebSocket 对象的 remoteAddress 属性来获取访客 IP 地址。

const server = new WebSocket.Server({ host: '0.0.0.0', port: 8080 });

server.on('connection', (socket, request) => {
  const ip = request.socket.remoteAddress;
  console.log(`New connection from ${ip}`);
});

上述代码中，我们创建了一个 WebSocket 服务器，并监听其连接事件。在连接事件中，我们通过 remoteAddress 属性获取客户端的 IP 地址。

小结

本文介绍了三种 JavaScript 获取访客 IP 地址的方法。第一种方法是通过后台接口获取，第二种方法是使用第三方服务获取，第三种方法是使用 WebSocket 获取。这些方法各有优缺点，具体使用看项目需求。