[แจกฟรี] AJAX Shoutbox พร้อมโค้ด ตอนที่ 3
สำหรับ Shoutbox แล้ว ข้อมูลในกล่องข้อความอาจจะไม่เปลี่ยนแปลงบ่อยเท่า Chat ดังนั้นอัตราการรีเฟรชข้อมูลเราสามารถใช้ค่าสูงๆได้ โดยในโปรเจ็คนี้ผมกำหนดไว้นานถึง 1 นาที
เริ่มต้นในครั้งแรกจะมีการเรียก doShoutbox ในบรรทัดล่างสุดเป็นการโหลดข้อความในครั้งแรก โดยใช้ Ajax ส่งไปอ่านข้อมูลจากไฟล์ get.php ซึ่งเป็นการอ่านไฟล์ตรงๆ เพื่อความรวดเร็วในการทำงาน
เมื่อได้ข้อมูลที่ต้องการกลับมาแล้วก็เอาข้อมูลใส่ลงใน ul#shout_content เพื่อแสดงผล เป็นอันสิ้นสุดการทำงานใน 1 รอบ
หลังจากแสดงผลแล้วก็จะเป็นการจับเวลาการโหลดข้อมูลรอบถัดไปทันที ซึ่งเมื่อครบกำหนดเวลาก็จะมีการเรียกฟังก์ชั่น doShoutbox มาทำงานอีกครั้ง
/**
* อัตราการรีเฟรชข้อความ (วินาที)
*/
var interval = 60;
var shout_timer,
shout_content = null;
var doShoutbox = function() {
if (shout_timer) {
// หยุดการจับเวลาครั้งก่อนหน้า
window.clearTimeout(shout_timer);
}
// โหลด Ajax
var req = initAjax();
// Event
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
if (shout_content != req.responseText) {
shout_content = req.responseText;
var content = document.getElementById("shout_content");
// แสดงผล
content.innerHTML = shout_content;
// เลื่อนไปบรรทัดล่างสุด
content.scrollTop = content.scrollHeight;
}
// อ่านข้อมูลรอบต่อไป
shout_timer = window.setTimeout(doShoutbox, interval * 100);
}
}
};
// สร้าง connection
req.open("POST", "get.php");
// Header ภาษาไทย
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
// ส่งค่า
req.send();
};
// เรียกใช้งานครั้งแรก
doShoutbox.call();
เริ่มต้นในครั้งแรกจะมีการเรียก doShoutbox ในบรรทัดล่างสุดเป็นการโหลดข้อความในครั้งแรก โดยใช้ Ajax ส่งไปอ่านข้อมูลจากไฟล์ get.php ซึ่งเป็นการอ่านไฟล์ตรงๆ เพื่อความรวดเร็วในการทำงาน
<?php
// file
$file = './datas/chat.php';
if (is_file($file)) {
echo preg_replace('/<\?.*?>/', '', file_get_contents($file));
}
เมื่อได้ข้อมูลที่ต้องการกลับมาแล้วก็เอาข้อมูลใส่ลงใน ul#shout_content เพื่อแสดงผล เป็นอันสิ้นสุดการทำงานใน 1 รอบ
<ul id="shout_content">
<li class="center"><em>Loading...</em></li>
</ul>
หลังจากแสดงผลแล้วก็จะเป็นการจับเวลาการโหลดข้อมูลรอบถัดไปทันที ซึ่งเมื่อครบกำหนดเวลาก็จะมีการเรียกฟังก์ชั่น doShoutbox มาทำงานอีกครั้ง
จริงๆแล้ว Chatroom ก็แทบไม่ได้แตกต่างอะไรกับ Shoutbox เลย เพราะมีลักษณะการทำงานที่เหมือนกันทุกประการ ในกรณีที่ต้องการดัดแปลงเป็น Chatroom สิ่งที่ต้องทำคือปรับอัตราการรีเฟรชให้เร็วขึ้น เช่นเป็น 10 วินาที ก็จะทำให้การโต้ตอบกันรวดเร็วขึ้น