[แจกฟรี] AJAX Shoutbox พร้อมโค้ด ตอนที่ 3

สำหรับ Shoutbox แล้ว ข้อมูลในกล่องข้อความอาจจะไม่เปลี่ยนแปลงบ่อยเท่า Chat ดังนั้นอัตราการรีเฟรชข้อมูลเราสามารถใช้ค่าสูงๆได้ โดยในโปรเจ็คนี้ผมกำหนดไว้นานถึง 1 นาที
/**
* อัตราการรีเฟรชข้อความ (วินาที)
*/

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 วินาที ก็จะทำให้การโต้ตอบกันรวดเร็วขึ้น

Related

^