本教程将指导您如何利用php和html创建一个简单的网页应用，以监控指定ip地址列表的网络延迟。文章将详细讲解如何通过php的`exec()`函数执行系统`ping`命令，并解析其输出结果，最终在网页上以清晰的格式展示每个ip的延迟状态或错误信息，帮助您快速了解网络连接质量。
1. 理解核心机制：PHP的exec()函数与系统ping命令
要实现IP延迟监控，核心在于在服务器端执行ping命令并获取其输出。PHP提供了exec()函数，允许我们执行外部程序或命令。
exec(string $command, array &$output = null, int &$return_var = null): string|false
- $command: 要执行的系统命令，例如ping 8.8.8.8。
- $output: 可选参数，一个数组，命令输出的每一行将作为数组的一个元素。
- $return_var: 可选参数，命令执行后的返回状态码。通常，0表示成功。
ping命令用于测试网络连接的可达性，并估算往返时间。由于不同操作系统的ping命令参数和输出格式略有差异，我们需要进行适配：
- Windows: ping <IP地址> -n 1 -w 100 (发送1个请求，等待100毫秒超时)。
- Linux/macOS: ping <IP地址> -c 1 -W 100 (发送1个请求，等待100毫秒超时，单位为毫秒)。
为了本教程的示例，我们将提供一个同时兼容Windows和Linux/macOS的解决方案，并对常见的ping输出进行解析。
立即学习“PHP免费学习笔记（深入）”；
windows-shell-syntax
下载
在 Windows 上执行终端命令，或对比 Windows 与 Linux 的 Shell 语法时使用。建议先检测当前 Shell 是 PowerShell 还是 cmd.exe，再给出相应命令……
2. 构建IP延迟监控页面
我们将创建一个包含PHP代码的HTML页面，用于读取IP列表，执行ping命令，并展示结果。
2.1 准备IP地址列表
为了方便管理和维护，建议将需要监控的IP地址存储在一个文本文件（例如ips.txt）中，每行一个IP地址。
ips.txt 示例：
1.1.1.1 8.8.8.8 8.8.4.4 invalid.host
如果ips.txt文件不存在，示例代码中也提供了硬编码的IP地址列表作为备用。
2.2 编写PHP与HTML代码
以下是一个完整的PHP/HTML示例，演示如何实现IP延迟监控：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP延迟监控仪表盘</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background-color: #f0f2f5; color: #333; }
h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; }
ul { list-style-type: none; padding: 0; max-width: 800px; margin: 0 auto; }
li { background-color: #ffffff; border: 1px solid #e0e0e0; margin-bottom: 12px; padding: 15px 20px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all 0.2s ease-in-out; }
li:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
li.success { border-left: 6px solid #28a745; }
li.warning { border-left: 6px solid #ffc107; }
li.error { border-left: 6px solid #dc3545; }
.ip-address { font-weight: bold; color: #007bff; font-size: 1.1em; }
.status-info { color: #5a6268; font-size: 1em; text-align: right; } 
