การสร้าง chat แบบ simple ๆ ภาค1 PHP, jQuery

การสร้าง chat พูดคุยออนไลน์ผ่านอินเทอร์เน็ต นอกจากจะใช้สอบถาม ค้นหาข้อมูลแล้ว ก็ยังใช้สนทนาแลกเปลี่ยนความคิดเห็นกันแบบสดๆ หรือ เป็นกิจกรรมยอดฮิตกิจกรรมหนึ่งเลยทีเดียว สำหรับบางคนที่อาจหาเพื่อน หรือใครสักคน ไว้พูดคุยแก้เหงา.... ^^

สิ่งที่ต้องมี

เอาละครับมาสร้างฐานข้อมูลกันก่อนดังนี้

CREATE TABLE `mychat` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user` varchar(255) NOT NULL DEFAULT '',
  `msg` text NOT NULL,
  `datetime` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `date` char(5) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
);

สร้างไฟล์ mychat.php
จากนั้นผมก็จะเริ่มด้วยการสร้างฟอร์มสำหรับส่งข้อความไปเก็บยังฐานข้อมูลก่อนดังนี้

<table>
    <tbody><tr>
        <td>ตรงนี้เอาไว้เรียกไฟล์ chat_out.php</td>
    </tr>
    <tr>
        <td>
            <div id="formsend">
                <input id="msg" name="msg" type="text">
                <button id="send" onclick="Send();">Send</button>
            </div>
        </td>
    </tr>
</tbody></table>

กำหนด css

<style type="text/css">
#msg{
width:450px;
}
</style>

จากนั้นก็สร้าง function javascript ลงไปเพื่อส่งข้อมูลไปยังไฟล์ chat_in.php เพื่อบันทึกลงฐานข้อมูล
ไฟล์ mychat.php

<script type="text/javascript">
function Send(){
var msg = $('#msg').val();
//alert(msg);
var str = Math.random();
var dataString = 'str='+str + '&msg='+msg;
$.ajax({
type: 'POST',
url: 'chat_in.php',
data: dataString,
success:function(data){
document.getElementById('msg').value="";//ล้างค่าใน id msg
}
});
}
</script>

สร้างไฟล์ chat_in.php

<?php
include'../config/config.php';
$msg = $_POST['msg'];
$user = $_COOKIE['']; //เก็บชื่อ user จาก cookie นะครับ
$datetime = date("Y-m-d H:i:s");
$date = date("d");
if($msg != "" && $user != ""){
$sql = "insert into mychat (user,msg,datetime,date) values ('$user','$msg','$datetime','$date')";
mysql_query($sql, $link);


mysql_close();
}
?>

เสร็จแล้วง่ายๆสำหรับไฟล์ chat_in.php

หลังจากนั้นผมก็สร้างไฟล์ chat_out.php ขึ้นมาเพื่อเรียกข้อมูลจากฐานข้อมูลมาแสดง
ไฟล์ chat_out.php

<div id="chatout">
<?php
include '../config/config.php';
$sql = "select * from mychat order by id DESC limit 0,20";//เรียกข้อมูล
$result = mysql_query($sql,$link);
$num = mysql_num_rows($result);
while($row = mysql_fetch_array($result)){
$user[] = $row[user];
$msg[] = $row[msg];
$datetime = $row[datetime];

list($date,$time) = split(' ',$datetime);
list($Y,$m,$d) = split('-',$date);
list($H,$i,$s) = split(':',$time);

switch($m)
{
case "01":$m = "ม.ค."; break;case "02":$m = "ก.พ."; break;
case "03":$m = "มี.ค."; break;case "04":$m = "เม.ย."; break;case "05":
$m = "พ.ค."; break;case "06":$m = "มิ.ย."; break;case "07":$m = "ก.ค."; break;
case "08":$m = "ส.ค."; break;case "09":$m = "ก.ย."; break;case "10":
$m = "ต.ค."; break;case "11":$m = "พ.ย."; break;case "12":$m = "ธ.ค."; break;
}

$Y = $Y+543;
$Y = substr($Y,2);
$date = "$d $m $Y";
$time = "$H:$i";
$datechat[] = $date.' '.$time;
}
?>
</div>

ข้อสังเกตุ
ผมจะรับค่าที่ดึงออกมาจากฐานข้อมูลแบบ array ด้วยการเติม [] ไว้หลังตัวแปร เช่น $user[]
ยกเว้น $datetime เพราะว่าผมต้องการแปลง เดือนและปี มาเป็นแบบไทยก่อน ด้วยการใช้คำสั่ง split()
แยก วัน เดือน ปี ออกเป็นส่วนๆ แล้วนำตัวแปรเดือนมาทำเป็นไทย ด้วย switch() case แล้วก็ทำปีเป็นไทย
ด้วยการนำ 543 มาบวกเข้าไป จากนั้นก็ใช้ฟังก์ชั่น substr() เพื่อทำให้ปีแสดงแค่สองต้วหลังคือ 54
แล้วผมก็นำมาทำเป็น array แบบนี้ $datechat[] = $date.' '.$time;

เมื่อเสร็จแล้วก็สั่ง echo ออกมาด้วยการวนลูปด้วย for

<?php
for($i = count($msg)-1;$i >= 0; $i--){
echo "<div style="padding:5px;overflow:hidden;">";
echo "<font style="color:#999999;font-size:9px;">".$datechat[$i]."</font>";
echo " ";
echo "<font color="#0000ff">:: </font>";
echo "<font color="#29498B" size="2"><b>".$user[$i]."</b></font>";
echo " ";
echo "<font color="#ff0000">>></font>";
echo " ";
echo $msg[$i];
echo "</div>";
}
?>

ท้ายสุดของไฟล์นี้ ผมก็เขียนโค้ดสั่งให้ลบข้อมูล chat ของเมื่อวานทิ้งไปเสีย ด้วยโค้ดนี้

<?php
$today = date("d");
$sql = "delete from mychat where date != '$today'";
mysql_query($sql, $link);
mysql_close();
?>

แล้วก็กำหนด css ให้กับ div
ไฟล์ chat_out.php

<style>
#chatout{
width:500px;
height:450px;
word-wrap:break-word;
overflow-y:auto;
border:1px solid #000000;
padding:10px;
}
</style>

ข้อสังเกตุ
word-wrap:break-word; เป็นการกำหนดให้ตัวหนังสืออยู่ในกรอบของ div
overflow-y:auto; เป็นการกำหนดให้มี scrollbar ในแนวตั้ง

เมื่อมี scrollbar แล้ว ก็ต้องมากำหนดให้ scrollbar อยู่ติดด้านล่างของ div ตลอดด้วย javascript
ดังนี้

<script type="text/javascript">
$(document).ready(function(){
var scroll = document.getElementById('chatout');
scroll.scrollTop = scroll.scrollHeight;
});
</script>

เสร็จแล้วสำหรับ ไฟล์ chat_out.php

แล้วผมก็ย้อนกลับไปทำงานกับไฟล์ mychat.php ต่อ ด้วยการใช้คำสั่ง javascript
เรียกไฟล์ chat_out.php ขึ้นมาแสดงตอนเรียกเพจครั้งแรกก่อนดังนี้

<script type="text/javascript">
$(document).ready(function() {
$("#mychat").load('chat_out.php');
});
</script>

หลังจากนั้นก็ตั้งเวลาให้กับการเรียกไฟล์ chat_out.php ขึ้นมาแสดงเพื่ออัพเดทข้อมูลแบบ auto ด้วย
การใช้ฟังก์ชั่น setInterval() ของ javascript ดังนี้
( หน่วยของเวลาคือ มิลลิวินาที โดย 1 วินาที = 1000 มิลลิวินาที )

<script type="text/javascript">
$(document).ready(function() {
var refreshId = setInterval(function() {
$("#mychat").load('chat_out.php').fadeIn("slow");
}, 5000);
});
</script>

ยังเหลืออีกนิดหนึ่งสำหรับไฟล์นี้ นั่นก็คือตอนที่เราพิมพ์ข้อความเสร็จแล้ว ไม่อยากลากเมาส์ไปกด send ให้
เสียอารมณ์ แต่เคาะ enter ไปเลยด้วยความมันส์ในอารมณ์ ก็ต้องเพิ่มโค้ด javascript เข้าไปแบบนี้

<script type="text/javascript">
 $('#msg').bind('keypress', function(e) {
        if(e.keyCode==13){
                Send();
        }
});
</script>

เสร็จแล้วสำหรับ chat แบบ simple ของเรา ขอเรียนเชิญไปทดสอบได้เลยครับ....