实时获取用户链接的服务器并且在前端展示出来

本文最后更新于 82 天前，其中的信息可能已经有所发展或是发生改变。

嘿，大家好！🌍 我是 Joey，又来了一个有趣的教程。你有没有想过你的网站访客来自哪里？或者你想展示你的服务器的地理位置，并配上一个酷炫的国旗？好消息！今天，我要教你如何通过 PHP 实现这些功能！

为什么要这么做？

增加互动体验：添加地理位置信息可以让你的网站更有趣、更具互动性。
满足好奇心：访客可能会对你的服务器所在地感到好奇。
很有趣：谁不喜欢在网站上看到自己的国家国旗呢？

我们要做什么

我们将创建一个脚本来：

获取用户的 IP 地址和地理位置信息。
获取服务器的 IP 地址和地理位置信息。
在网站页脚展示这些信息，并附上国旗图标。

实现步骤

1. 获取用户和服务器的 IP 地址

首先，我们需要通过 PHP 获取用户和服务器的 IP 地址。对于用户 IP，我们可以使用 $_SERVER['HTTP_CF_CONNECTING_IP'] 或 $_SERVER['REMOTE_ADDR']。对于服务器 IP，则直接使用 $_SERVER['REMOTE_ADDR']。

<?php
// 获取用户的 IP 地址
$user_ip = $_SERVER['HTTP_CF_CONNECTING_IP'] ?? $_SERVER['REMOTE_ADDR'];

// 获取 Cloudflare 节点信息
$cf_node = $_SERVER['REMOTE_ADDR'];
?>

2. 获取地理位置信息

我们使用 ipinfo.io 的 API 来获取地理位置信息。这一步需要发送 HTTP 请求，并解析返回的 JSON 数据。

// 使用 ipinfo.io API 获取用户地理位置信息
$location_info = file_get_contents("http://ipinfo.io/{$user_ip}/json");
$location_info = json_decode($location_info, true);

// 使用 ipinfo.io API 获取 Cloudflare 节点地理位置信息
$cf_node_info = file_get_contents("http://ipinfo.io/{$cf_node}/json");
$cf_node_info = json_decode($cf_node_info, true);

3. 返回 JSON 数据

为了方便前端使用，我们将这些信息以 JSON 格式返回。

header('Content-Type: application/json');
echo json_encode([
    'user_ip' => $user_ip,
    'user_country' => $location_info['country'],
    'user_city' => $location_info['city'],
    'user_country_code' => strtolower($location_info['country']),
    'cf_node' => $cf_node,
    'cf_node_country' => $cf_node_info['country'],
    'cf_node_city' => $cf_node_info['city'],
    'cf_node_country_code' => strtolower($cf_node_info['country'] ?? '未知'),
]);
?>

4. 后端完整代码

完整代码如下

<?php
header('Content-Type: application/json');

// 获取用户的 IP 地址
$user_ip = $_SERVER['HTTP_CF_CONNECTING_IP'] ?? $_SERVER['REMOTE_ADDR'];

// 使用 ipinfo.io API 获取用户地理位置信息
$user_location_info = file_get_contents("http://ipinfo.io/{$user_ip}/json");
$user_location_info = json_decode($user_location_info, true);

// 获取用户的国家和城市代码
$user_country = $user_location_info['country'] ?? '未知';
$user_country_code = strtolower($user_country);
$user_city = $user_location_info['city'] ?? '未知';

// 获取 Cloudflare 节点信息
$cf_node = $_SERVER['REMOTE_ADDR'];

// 使用 ipinfo.io API 获取 Cloudflare 节点地理位置信息
$cf_node_info = file_get_contents("http://ipinfo.io/{$cf_node}/json");
$cf_node_info = json_decode($cf_node_info, true);

// 获取 Cloudflare 节点的国家和城市信息
$cf_node_country = $cf_node_info['country'] ?? '未知';
$cf_node_country_code = strtolower($cf_node_country);
$cf_node_city = $cf_node_info['city'] ?? '未知';

// 返回 JSON 数据
echo json_encode([
    'user_ip' => $user_ip,
    'user_country' => $user_country,
    'user_country_code' => $user_country_code,
    'user_city' => $user_city,
    'cf_node' => $cf_node,
    'cf_node_country' => $cf_node_country,
    'cf_node_country_code' => $cf_node_country_code,
    'cf_node_city' => $cf_node_city,
]);
?>

5. 前端展示

在 HTML 页脚中，我们使用 JavaScript 来获取并展示这些信息。同时，通过 Hampus Borgos 提供的国家旗帜图标库，展示对应的国旗。

<!-- 页脚 -->
<footer>
    <div id="server-info">
        现在为您提供服务的服务器是 <span id="cf-country"></span> <img id="cf-flag" src="" alt="国旗" style="width: 16px; height: 16px;"> 
        城市: <span id="cf-city"></span>，IP地址: <span id="cf-ip"></span>
    </div>
    <div id="user-info">
        您来自 <span id="user-country"></span> <img id="user-flag" src="" alt="国旗" style="width: 16px; height: 16px;">，
        城市: <span id="user-city"></span>，IP地址: <span id="user-ip"></span>
    </div>
</footer>

<script type="text/javascript">
    function fetchData() {
        fetch('这里换成你后端php的位置')
            .then(response => response.json())
            .then(data => {
                document.getElementById('cf-country').textContent = data.cf_node_country;
                document.getElementById('cf-city').textContent = data.cf_node_city;
                document.getElementById('cf-ip').textContent = data.cf_node;
                document.getElementById('cf-flag').src = `https://raw.githubusercontent.com/hampusborgos/country-flags/main/svg/${data.cf_node_country_code}.svg`;

                document.getElementById('user-country').textContent = data.user_country;
                document.getElementById('user-city').textContent = data.user_city;
                document.getElementById('user-ip').textContent = data.user_ip;
                document.getElementById('user-flag').src = `https://raw.githubusercontent.com/hampusborgos/country-flags/main/svg/${data.user_country_code}.svg`;
            });
    }

    fetchData();
</script>

大功告成！

通过上述步骤，我们实现了在博客页脚中展示用户和服务器的地理信息，包括IP地址、国家、城市以及对应的国旗图标。这不仅增加了博客的互动性，还让访问者对服务器的地理位置有更多了解。如果你也对这种功能感兴趣，赶快动手试试吧！

最终效果

Telegram 群组: 加入我们

记得持续关注我，获取更多有趣的内容哦！