PHP + MySQL 即時聊天室實作教學：從資料庫設計到前端輪詢

聊天室是學習 PHP + MySQL 互動開發的經典入門專案。本文以簡單、可運行的程式碼示範核心流程：使用框架分隔輸入區與顯示區、Meta Refresh 定時輪詢、資料庫自動清理舊訊息。雖然現代專案多採用 WebSocket/長輪詢，但此架構邏輯清晰，適合理解基礎原理。

1. 系統架構規劃

• main.php：框架頁，分上下兩個 frame（顯示區 80%、輸入區 20%）。
• login.php：輸入暱稱，寫入 Cookie，導向 main.php。
• cdisplay.php：讀取資料庫最新 15 筆訊息，每 5 秒自動重整。
• speak.php：處理發言表單，寫入資料庫。

2. 資料庫建表

CREATE TABLE `chat` (
  `chtime` DATETIME NOT NULL,
  `nick` CHAR(10) NOT NULL,
  `words` VARCHAR(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 核心程式碼

login.php

<form action="main.php" method="post">
  暱稱：<input type="text" name="nick" required>
  <input type="submit" value="進入聊天室">
</form>

main.php

<?php
setcookie('nick', $_POST['nick'] ?? '', time()+3600);
?>
<frameset rows="80%,*">
  <frame src="cdisplay.php" name="chatdisplay">
  <frame src="speak.php" name="speak">
</frameset>

cdisplay.php（含自動清理邏輯）

<?php
$link = mysqli_connect('localhost', 'root', '', 'chat_db');
mysqli_set_charset($link, 'utf8mb4');

$res = mysqli_query($link, "SELECT * FROM `chat` ORDER BY `chtime`");
$rows = mysqli_num_rows($res);
$show = min(15, $rows);

if ($rows > 0) {
    mysqli_data_seek($res, $rows - $show);
    while ($row = mysqli_fetch_assoc($res)) {
        echo htmlspecialchars($row['chtime']) . ' ';
        echo '<strong>' . htmlspecialchars($row['nick']) . '</strong>: ';
        echo htmlspecialchars($row['words']) . '<br>';
    }
}

// 只保留最新 20 筆，刪除更舊資料
if ($rows > 20) {
    mysqli_data_seek($res, $rows - 20);
    $old = mysqli_fetch_assoc($res);
    mysqli_query($link, "DELETE FROM `chat` WHERE `chtime` < '" . $old['chtime'] . "'");
}
mysqli_close($link);
?>
<meta http-equiv="refresh" content="5;url=cdisplay.php">

speak.php

<?php
if (!empty($_POST['words'])) {
    $link = mysqli_connect('localhost', 'root', '', 'chat_db');
    $nick = $_COOKIE['nick'] ?? '匿名';
    $words = mysqli_real_escape_string($link, $_POST['words']);
    $time = date('Y-m-d H:i:s');
    mysqli_query($link, "INSERT INTO `chat` (`chtime`,`nick`,`words`) VALUES ('$time','$nick','$words')");
    mysqli_close($link);
}
?>
<form method="post">
  <input type="text" name="words" placeholder="輸入發言..." required>
  <input type="submit" value="發言">
</form>

4. 安全性與改進方向

• 防 XSS：輸出時務必用 htmlspecialchars()。
• 防 SQL 注入：使用 Prepared Statements (mysqli/PDO) 取代字串拼接。
• 效能瓶頸：Meta Refresh 每 5 秒全頁重整，用戶多時負載大。進階版可改用 AJAX 長輪詢 或 WebSocket (Ratchet/Swoole) 實現真正即時推播。
• 功能擴充：線上用戶列表、表情符號、私訊、訊息加密、管理員踢人/禁言。

5. 部署提醒

確保 PHP 啟用 mysqli 擴充，資料庫連線資訊請改用環境變數或獨立設定檔，勿硬編碼於程式碼中。