Ajax Push – 創造即時聊天室

Posted on by

這昨晚在找好玩的 API 來玩，不過仍然失敗了！
不過，我卻意外的發現了關鍵字 Server Push
於是我就想，那麼有沒有 PHP Push 呢？
最後則是得知了 Ajax Push 技術！

要說這東西，得先把 Server Push(伺服器推送) 和 Client Pull(客戶端拉曳) 說明一下。
大家都知道，聊天室是「不斷重新整理頁面」來達成的！
不過，這卻會造成大量對伺服器請求，讓伺服器產生負擔。
而 Server Push則是Client Pull的相反作法。

原本是不斷重新整理，轉變成由伺服器不斷發送資料。
此時，原本大量消耗伺服器資源問題沒了！
（但是卻多了大量消耗流量問題，畢竟這就像一個下載不完的檔案！）

不過，在 Ajax 出現後，則出現了混合的作法。
Ajax 的請求作為 Pull, 而伺服器的回應則做為 Push 來使用。
為什麼不會消耗資源和流量呢？
因為 Ajax 的特性：「沒有回應，則不動作直到有回應為止。」
此時，如果發出請求的迴圈因為伺服器不回應而卡死。
那麼就不存在不斷重複要求伺服器資料的問題。

另一方面，原本伺服器得一直送出資料。
現在卻是卡死在無限迴圈中，而且不用段使用如 sleep(1); 來延遲程式執行。
那麼消耗的流量相對比 Server Push 更少（在加上 Server Push 資料一增加，發送量就會更多。）

而 Server Push 是無限迴圈不斷發送資料，現在變成無限迴圈檢查新資料。
此時，是不是變得「省資源」和「更有變化」呢？
原本瀏覽器和伺服器要即時更新是不可能的，現在卻藉由 Ajax 完美的找到折衷的方法。

使用方法如何呢？
以下是某弦研發中的聊天室代碼（還有奇怪東西混在其中啦- -）
*奇怪物已經吃掉了 ^^
Ajax – 使用 jQuery
Server – 使用 PHP

chat.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>蒼時弦也 Real-time Chatroom @ http://frost.tw/</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

function showChat(){
 $.ajax({
 url: 'chat_server.php',
 global: false,
 dataType: 'text',
 type: 'GET',
 success: function(data){
 $('#chatMsg').append('<div>'+data+'</div>');
 this.noerror = true;
 },
 complete: function(obj, status){
 if(!this.noerror){
 setTimeout(function(){ showChat(); }, 5000);
 }else{
 showChat();
 }
 }
 });
}

function submitMsg(){
 var nick = $("input[name='nick']").val();
 var say = $("input[name='say']").val();
 $.ajax({
 url: 'say.php',
 global: false,
 type: 'POST',
 dataTyep: 'html',
 data: ({
 'nick' : nick,
 'say' : say
 }),
 success: function(data){
 $("input[name='say']").val('');
 }
 });
}

$(document).ready(function(){
 showChat();
});

</script>
</head>

<body>
<div id="chatMsg">

</div>
<form action="" method="post" onsubmit="javascript:submitMsg(); return false;">
 <input type="text" name="nick" value="暱稱" size="10" />
 <input type="text" name="say" />
 <input type="submit" value="發言" />
</form>
</body>
</html>

chat_server.php

<?php
//後端
date_default_timezone_set("Asia/Taipei");
set_time_limit(0);
$_GET['first'] = $_GET['first'] ? $_GET['first'] : false;
if(is_file('chat.log')){
 $now = time();
 $modify = filemtime('chat.log');
 while($modify <= $now && !$_GET['first']){
 usleep(10000);
 clearstatcache();
 $modify = filemtime('chat.log');
 }
 $array = file_get_contents('chat.log');
 echo $array;
}

flush();
?>

say.php

<?php
//發文處理
date_default_timezone_set("Asia/Taipei");
if($_POST['say'] && $_POST['nick']){
 /*$fp = fopen('chat.log', 'w+');
 if(filesize('chat.log') > 0){
 $msg =     PHP_EOL."[{$_POST['nick']}] : {$_POST['say']} @ ".date('H:i:s');
 }else{
 $msg =     "[{$_POST['nick']}] : {$_POST['say']} @ ".date('H:i:s');
 }
 fwrite($fp, $msg);
 fclose($fp);*/
 $msg =     "[{$_POST['nick']}] : {$_POST['say']} @ ".date('H:i:s');
 file_put_contents('./chat.log', $msg);
 echo 'success';
}else{
 echo 'nodata!';    
}
?>

最後，要提醒大家：「轉貼請附上連結，昨晚查資料時發現自己文章被轉貼，還沒有註明作者和網址！」
*有興趣可以Google搜尋 Push4Free 當關鍵字，看看那些沒品的人如何轉貼的（微笑

2 thoughts on “Ajax Push – 創造即時聊天室”