PHP 簡易聊天室實現 (一)：框架架構、檔案操作、定時刷新、滾動條控制

整體框架：Frameset 多視窗佈局

傳統聊天室常用 `` 將頁面切分為四區：

• 頂部 (top.php)：標題、公告、用戶資訊。
• 左側 (list.php)：在線用戶列表。
• 中部上 (center.php)：公共聊天訊息區。
• 中部下 (private.php)：私聊訊息區。
• 底部 (talk.php)：發言輸入框。

<frameset rows="80,*,100" cols="*" border="1" framespacing="0">
  <frame src="top.php" name="topFrame" scrolling="no" noresize>
  <frameset rows="*" cols="168,*">
    <frame src="list.php" name="leftFrame" scrolling="no">
    <frameset rows="70%,*">
      <frame src="center.php" name="mainFrame" scrolling="auto">
      <frame src="private.php" name="priFrame" scrolling="auto">
    </frameset>
  </frameset>
  <frame src="talk.php" name="bottomFrame" scrolling="no" noresize>
</frameset>

現代替代：CSS Flex/Grid + AJAX 長輪詢 / WebSocket，單頁應用 (SPA) 體驗更佳。

檔案操作核心函數 (以文字檔儲存訊息/用戶)

寫入訊息範例 (追加模式 + 鎖定)

<?php
function appendChat($file, $data) {
    $fp = fopen($file, 'a'); // 追加
    if ($fp) {
        flock($fp, LOCK_EX); // 獨佔鎖
        fwrite($fp, $data . "\n");
        flock($fp, LOCK_UN);
        fclose($fp);
    }
}

// 讀取最近 50 行
function readLastLines($file, $lines = 50) {
    $all = file($file, FILE_IGNORE_NEW_LINES);
    return array_slice($all, -$lines);
}
?>

定時刷新技術：清除閒置用戶

<script>
// 每 30 秒檢查一次，移除超過 60 秒無發言的用戶
function cleanupUsers() {
    fetch('cleanup.php?action=remove_idle&timeout=60')
        .then(r => r.json())
        .then(data => { if (data.removed) refreshUserList(); });
}
setInterval(cleanupUsers, 30000); // 30 秒

// 單次延遲執行 (如顯示提示 3 秒後消失)
setTimeout(() => { alertBox.style.display = 'none'; }, 3000);

後端 cleanup.php 讀取用戶檔案，比對最後活躍時間戳，移除逾期者並重寫檔案。

滾動條自動置底：訊息區永遠顯示最新

整頁滾動 (傳統 frameset)

<script>
function scrollWindow() {
    window.scrollTo(0, document.body.scrollHeight); // 或極大值 99999
    setTimeout(scrollWindow, 200);
}
scrollWindow();
</script>

區塊內滾動 (現代 div + overflow)

<div id="msgList" style="height:300px; overflow-y:auto;">...</div>
<script>
function scrollMsgList() {
    const el = document.getElementById('msgList');
    el.scrollTop = el.scrollHeight;
    setTimeout(scrollMsgList, 200);
}
scrollMsgList();
</script>

防刷新機制 (教學示範，實務不建議)

• 屏蔽 F5：`onkeydown="return event.keyCode !== 116"` (僅攔截鍵盤，無法阻擋選單/工具列)。
• 屏蔽右鍵選單：`oncontextmenu="return false"` (易被繞過，破壞 UX)。
• 隱藏工具列：`window.open(url, '_blank', 'toolbar=no,menubar=no,location=no')` (現代瀏覽器多忽略)。

結論：前端無法可靠防刷新，正確做法是後端設計**冪等 API**、**Token 防重複提交**、**WebSocket 狀態同步**，讓刷新不造成資料重複或狀態錯亂。

安全性補充

• 訊息內容輸出時必須 htmlspecialchars() 防 XSS。
• 檔案儲存路徑不可直接對外下載，建議放在 `public` 目錄外。
• 併發寫入必須加檔案鎖 (`flock`) 或改用 SQLite/Redis/MySQL。
• 私聊訊息需驗證雙方身份，防橫向越權。