A-AA+then

บทนี้ถือเป็นบทที่สำคัญของ Shout box เลยครับ เป็นการใช้เทคนิค Auto refresh ไปอ่านข้อมูลทีละบรรทัดจากฐานข้อมูลมาแสดง ซึ่งมีลักษณะคล้ายๆ Chat เพียงแต่ไม่จำเป็น ต้องอ่านเร็วนักก็ได้ คืออ่านตามจังหวะการเปลี่ยนของข้อมูล

หลักการก็คือให้ Javascript จับเวลาไปอ่านข้อมูลมาจากฐานข้อมูล(Text) โดยการอ่านทีละบรรทัดตามค่าที่ส่งให้ไป ซึ่งค่านี้จะเพิ่มขึ้นเรื่อยๆ (อ่านบรรทัดที่ 1, 2, 3....) จนถึงบรรทัดสุดท้ายแล้วก็มาเริ่มอ่านบรรทัดแรกใหม่อย่างนี้เรื่อยไป เมื่ออ่านได้แล้วก็มาแสดงผล โดยที่ในการแสดงผลจะแยกออกเป็น 2 ส่วนตามชนิดของ browser โดยที่ถ้าเป็น IE จะใช้ filter ของ IE แต่ถ้าเป็น Browser อื่นจะใช้การกำหนด opacity เพื่อให้ภาพมีลักษณะ fade แทน

if (window.addEventListener) window.addEventListener("load", shoutStart, false)
else if (window.attachEvent) window.attachEvent("onload", shoutStart)
else if (document.getElementById) window.onload=shoutStart

เมื่อทำการเรียกครั้งแรกก็จะไปเรียก shoutStart มาทำงานเพื่อจับเวลาการแสดงข้อมูล

var shout_id=0;

/* เริ่มต้นการทำงาน shoutbox */
function shoutStart() {
  /* อ่านรายการแรก */
  shoutGetMessage(shout_id);
}

/* อ่าน message มาแสดง */
function shoutGetMessage(id) {
  /* สร้าง connection */
  shout_req.open("POST", shout_path+"get.php");
  shout_req.onreadystatechange=function() {
    if (shout_req.readyState==4) {
      /* จับเวลาแสดงรายการถัดไป */
      shout_timer=setTimeout('shoutGetMessage(shout_id)', shout_interval);
      if (shout_req.status==200) {
        var data=shout_req.responseText;
        var datas=data.split(String.fromCharCode(1));
        /* แสดงผล */
        shoutDisplay('shout_content', datas[0]);
        /* ข้อความต่อไป */
        shout_id = parseInt(datas[1]);

      };
    };
  };
  /* Header ภาษาไทย */
  shout_req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  /* ส่งค่า */
  shout_req.send("id="+id);
}

shoutStart จะไปเรียกให้ shoutGetMessage ทำงานโดยส่งค่า id แรกเท่ากับ 0 ไป เป็นการอ่านรายการแรก ด้วยการใช้ AJAX ไปร้องขอข้อมูลจาก Server โดยหน้า get.php ซึงเมื่อได้รับข้อมูลตอบกลับมาก็จะเอาไปแสดงผลโดยฟังก์ชั่น shoutDisplay แล้วก็เก็บข้อมูล id ถัดไปที่จะแสดงผลเก็บไว้ในตัวแปร shout_id และก็เริ่มต้นจับเวลาการแสดงผลในครั้งถัดไปทันที

<?
  header("content-type: application/x-javascript; charset=UTF-8");
  
  //ค่ากำหนด
  include("config.php");
  
  //ค่าที่ส่งมา
  $id=(int)$_POST[id];
  
  $file=$shout_path."data.php";
  if (file_exists($file)) {
    $fr=file($file);
    $temp=$id;
    if ($id<0) {//ย้อนกลับถึงรายการสุดท้าย
      $id=count($fr)-1;
      $next=$id+1;
    } else {
      $next=$id+1;
      if ($next>=count($fr)) $next=0;
    }
    echo $fr[$id].chr(1).$next;
  } else
    echo chr(1)."0";
?>

จะเห็นว่า get.php ก็ไม่มีอะไรมาก เป็นการอ่านข้อมูลจากไฟล์ data.php ออกมาแล้วก็คืนค่ากลับไปตามบรรทัดที่กำหนดมา ที่ดูยุ่งหน่อยก็เห็นจะเป็นการคำนวนบรรทัดที่จะแสดงให้อยู่ภายในกรอบที่กำหนด (คือมีบรรทัดนั้นจริงๆ) และก็การคืนค่าบรรทัดถัดไปที่จะแสดง

ในตอนคืนค่าจะเห็นว่าผมคืนค่า ข้อความที่อ่านได้ ตามด้วย chr(1) และบรรทัดถัดไปที่จะแสดง ซึ่งจะไปถูกแยกออกโดย Javascript ที่ส่วนของ AJAX อีกที ด้วยฟังก์ชั่นvar datas=data.split(String.fromCharCode(1)); ค่าที่ไ้ด้มาก็จะเป็น array โดยที่ datas[0] ก็คือข้อความ ส่วน datas[1] ก็จะเป็นบรรทัดถัดไปที่จะแสดง
ข้อสังเกตุ จะเห็นว่าในหน้านี้ผมก็ยอมให้ใช้ Cache อีกเช่นกัน และผมยังกำหนดให้ header ในหน้านี้เป็น UTF-8 ซึ่งจะทำให้ได้ไฟล์ data.php เป็นไฟล์ UTF-8 ซึ่งจะทำให้สมารถใช้ภาษาอื่นนอกจากภาษาไทย หรือ อังกฤษ ได้
อัปเดท shout box ครับ ตัวนี้มีการเปลี่ยนแปลงเล็กน้อยในส่วนของรูปแบบครับ โดยใช้ DIV แทน Table ตามคอนเซ็ปต์ Tableless Design (XHTML) สำหรับโค้ดหลักๆเหมือนกันครับ

rar (1152)

การนำไปใช้งาน ดูตัวอย่างได้ที่ index.php ในไฟล์ดาวน์โหลดครับ และให้ปรับ chmod ให้ไดเร็คทอรี่ของ shoutbox เป็น 775 (หรือ 777) ด้วย

AJAX

Relate

^