PHP 聊天室實作教學 (一)：表單處理、檔案儲存與框架架構

從零建立基於檔案儲存的即時聊天室核心模組

經典 PHP 教學範例：使用 HTML 表單提交訊息、檔案系統儲存聊天記錄、iframe 框架實現準即時刷新。本文詳細拆解表單處理、訊息讀寫、HTML 結構生成等核心邏輯。

整體架構設計

chat.html (框架頁)
├── input.html (輸入表單框架) → 提交至 chat.php3
└── messages.html (訊息顯示框架) ← chat.php3 寫入、自動刷新

1. 輸入表單 (input.html)

<html><body>
<form action="chat.php3" method="POST" target="messages">
    暱稱: <input type="text" name="name" maxlength="20" required><br>
    訊息: <input type="text" name="message" maxlength="200" required><br>
    <input type="submit" value="發送">
</form>
</body></html>

關鍵點**：target="messages" 讓表單提交結果顯示在 messages 框架，輸入框架不刷新。

2. 核心處理邏輯 (chat.php3)

<?php
// 1. 讀取現有訊息檔案
$messages = file("messages.html"); // 每行一個元素

// 2. 提取歷史訊息 (跳過第 0 行標頭、保留第 1-9 行共 9 條)
$old_messages = '';
for ($i = 1; $i < 10; $i++) {
    if (isset($messages[$i])) $old_messages .= $messages[$i];
}

// 3. 處理新訊息
$name = htmlspecialchars($_POST['name'] ?? '');
$message = htmlspecialchars($_POST['message'] ?? '');
$new_message = "$name : $message<br>\n";

// 4. 組裝完整 HTML 頁面
$header = '<html><head>' .
    '<meta http-equiv="refresh" content="8">' . // 8 秒自動刷新
    '<meta name="robots" content="noindex">' .
    '</head><body bgcolor="#000000" text="#ffffff">';

$footer = '<br><font color="#000000">© Mike Hall 2000</font></body></html>';

// 5. 寫入檔案 (覆蓋模式)
$fp = fopen("messages.html", "w");
fwrite($fp, $header . "\n");
fwrite($fp, $old_messages);
fwrite($fp, $new_message);
fwrite($fp, $footer);
fclose($fp);
?>

3. 框架主頁 (chat.html)

<html>
<frameset rows="80%,20%">
    <frame src="messages.html" name="messages">
    <frame src="input.html" name="input">
</frameset>
</html>

核心機制深度解析

現代化重構方向

• 儲存層：MySQL/Redis 替代檔案，支援索引、分頁、全文搜尋
• 即時通訊：WebSocket (Ratchet/Swoole) 或 Server-Sent Events (SSE) 替代 Meta Refresh
• 架構分離：API 後端 + 前端框架 (Vue/React) 替代 iframe 框架
• 用戶系統：Session/JWT 認證、房間/頻道、私訊、@提及
• 訊息豐富化：Markdown 渲染、表情包、圖片/檔案上傳、代碼高亮
• 擴展性：Redis Pub/Sub 多進程廣播、水平擴展、負載均衡

學習價值總結

雖技術棧過時，但此範例完美展示了 Web 應用四大核心要素：

1. 輸入：HTML Form → $_POST 處理
2. 處理：資料清洗、邏輯組裝、狀態管理
3. 儲存：檔案 I/O (file, fopen, fwrite)
4. 輸出：動態 HTML 生成、Meta Refresh 自動更新

理解這些基礎，再學習現代框架才能知其然更知其所以然。