PHP项目如何实现进度条效果？

wen PHP项目 2026-06-16 245

本文目录导读：

PHP项目如何实现进度条效果？

基于Session + 轮询（最常用）
使用文件存储进度（适用于多用户）
使用数据库存储进度
使用WebSocket（更实时）
使用现代前端技术（Fetch + AbortController）
最佳实践建议

在PHP项目中实现进度条效果，通常需要结合前端轮询或WebSocket技术，因为PHP本身是同步阻塞的,以下是几种常见实现方式：

基于Session + 轮询（最常用）

后端代码 (process.php)

<?php
session_start();
// 启动长时间任务
if (!isset($_GET['action'])) {
    // 模拟任务
    $_SESSION['progress'] = 0;
    $total = 100;
    for ($i = 1; $i <= $total; $i++) {
        // 模拟耗时操作
        usleep(50000); // 50ms
        $_SESSION['progress'] = round(($i / $total) * 100);
        // 如果需要停止
        if (isset($_SESSION['stop']) && $_SESSION['stop']) {
            $_SESSION['progress'] = -1;
            break;
        }
    }
    echo "完成";
}
// 获取进度
if (isset($_GET['action']) && $_GET['action'] == 'progress') {
    header('Content-Type: application/json');
    echo json_encode([
        'progress' => $_SESSION['progress'] ?? 0
    ]);
}
?>

前端代码 (HTML + JavaScript)

<!DOCTYPE html>
<html>
<head>PHP进度条示例</title>
    <style>
        .progress-bar {
            width: 100%;
            height: 30px;
            background-color: #f0f0f0;
            border-radius: 5px;
            margin: 20px 0;
        }
        .progress-fill {
            height: 100%;
            background-color: #4CAF50;
            border-radius: 5px;
            transition: width 0.3s ease;
            width: 0%;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <button onclick="startTask()">开始任务</button>
    <div class="progress-bar">
        <div class="progress-fill" id="progressFill">0%</div>
    </div>
    <p id="status">等待开始...</p>
    <script>
        let progressInterval;
        function startTask() {
            document.getElementById('status').textContent = '任务进行中...';
            // 获取进度
            progressInterval = setInterval(function() {
                fetch('process.php?action=progress')
                    .then(response => response.json())
                    .then(data => {
                        const progress = data.progress;
                        if (progress >= 0 && progress <= 100) {
                            updateProgress(progress);
                        }
                        // 任务完成
                        if (progress >= 100) {
                            clearInterval(progressInterval);
                            document.getElementById('status').textContent = '任务完成！';
                        }
                        // 任务被取消
                        if (progress == -1) {
                            clearInterval(progressInterval);
                            document.getElementById('status').textContent = '任务已取消';
                        }
                    });
            }, 500); // 每500ms查询一次
            // 启动后台任务
            fetch('process.php');
        }
        function updateProgress(value) {
            const fill = document.getElementById('progressFill');
            fill.style.width = value + '%';
            fill.textContent = value + '%';
        }
    </script>
</body>
</html>

使用文件存储进度（适用于多用户）

后端代码

<?php
function getProgressFile($taskId) {
    return "/tmp/progress_" . md5($taskId) . ".txt";
}
// 创建任务
if (!isset($_GET['action'])) {
    $taskId = $_GET['task_id'] ?? uniqid();
    $progressFile = getProgressFile($taskId);
    // 模拟文件处理
    file_put_contents($progressFile, '0');
    $total = 100;
    for ($i = 1; $i <= $total; $i++) {
        usleep(50000);
        $progress = round(($i / $total) * 100);
        file_put_contents($progressFile, $progress);
    }
    file_put_contents($progressFile, '100');
    echo json_encode(['task_id' => $taskId]);
}
// 获取进度
if (isset($_GET['action']) && $_GET['action'] == 'progress') {
    $taskId = $_GET['task_id'] ?? '';
    $progressFile = getProgressFile($taskId);
    if (file_exists($progressFile)) {
        header('Content-Type: application/json');
        echo json_encode(['progress' => file_get_contents($progressFile)]);
    }
}
?>

使用数据库存储进度

<?php
// 数据库表结构
// CREATE TABLE task_progress (
//     id INT AUTO_INCREMENT PRIMARY KEY,
//     task_id VARCHAR(64) UNIQUE,
//     progress INT DEFAULT 0,
//     status VARCHAR(20) DEFAULT 'running',
//     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
// );
// 更新进度
function updateProgress($taskId, $progress, $status = 'running') {
    $db = new PDO('mysql:host=localhost;dbname=test', 'user', 'password');
    $stmt = $db->prepare("UPDATE task_progress SET progress = ?, status = ? WHERE task_id = ?");
    $stmt->execute([$progress, $status, $taskId]);
}
// 获取进度
function getProgress($taskId) {
    $db = new PDO('mysql:host=localhost;dbname=test', 'user', 'password');
    $stmt = $db->prepare("SELECT progress, status FROM task_progress WHERE task_id = ?");
    $stmt->execute([$taskId]);
    return $stmt->fetch(PDO::FETCH_ASSOC);
}
?>

使用WebSocket（更实时）

使用 Ratchet 或 Swoole 实现：

// 需要安装 Ratchet
// composer require cboden/ratchet
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
class ProgressWebSocket implements MessageComponentInterface {
    protected $clients;
    protected $progress = 0;
    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }
    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})\n";
    }
    public function onMessage(ConnectionInterface $from, $msg) {
        // 客户端发送 "start" 开始任务
        if ($msg === 'start') {
            for ($i = 1; $i <= 100; $i++) {
                usleep(50000);
                $this->progress = $i;
                // 广播进度
                foreach ($this->clients as $client) {
                    $client->send($this->progress);
                }
            }
        }
    }
    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
    }
    public function onError(ConnectionInterface $conn, \Exception $e) {
        $conn->close();
    }
}

使用现代前端技术（Fetch + AbortController）

// 支持取消任务的版本
async function startTaskWithCancel() {
    const controller = new AbortController();
    try {
        const response = await fetch('process.php', {
            signal: controller.signal
        });
        // 轮询进度
        const progressInterval = setInterval(async () => {
            const progressResponse = await fetch('progress.php');
            const data = await progressResponse.json();
            if (data.progress >= 100) {
                clearInterval(progressInterval);
            }
            updateProgress(data.progress);
        }, 200);
    } catch (err) {
        if (err.name === 'AbortError') {
            console.log('任务已取消');
        }
    }
}
// 取消任务
function cancelTask() {
    controller.abort();
    fetch('cancel.php'); // 通知后端取消
}

最佳实践建议

选择合适的方案：
- 简单项目：Session + 轮询
- 高并发：文件或数据库存储
- 实时性要求高：WebSocket
性能优化：
- 设置合理的轮询间隔（200-1000ms）
- 使用缓存减少数据库查询
- 考虑使用Redis存储进度
用户体验：
- 显示预计剩余时间
- 支持取消操作
- 添加动画过渡效果
- 显示任务详细信息
安全性：
- 验证任务所有权
- 设置超时机制
- 防止重复请求

选择哪种实现方式取决于你的具体需求、服务器环境以及项目复杂度，对于大多数简单的PHP项目，Session + 轮询 是最简单直接的方案。

本文地址： https://www.bmjup.com/post/6356.html