弦の手記 » AJAX http://blog.frost.tw 紀錄關於弦夜的日記 Thu, 09 Sep 2010 10:58:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Comet 的世界http://blog.frost.tw/life/poston-2010-07-09/postid-580 http://blog.frost.tw/life/poston-2010-07-09/postid-580#comments Fri, 09 Jul 2010 11:17:23 +0000 蒼時弦也 http://blog.frost.tw/?p=580 昨晚裝好 Ajax Push Engine  之後，就開始研讀開發文件啦！
這類 Comet 伺服器似乎都能讓 JavaScrtip 跑在 Server Side…
(因為我不太瞭解 Comet, 所以稱這些叫做 Comet伺服器)

在 Ajax Push Engine 官方網站上，有一個 MMORPG 的 Demos
我看了之後，二話不說，馬上決定選用 Ajax Push Engine 當作我接觸 Comet 的管道。

不過，經過自己實際撰寫之後，才發現這根本不可能阿（誤
為什麼不可能呢？
1. 官方文件沒說 Server Side 的檔案怎樣用才會動起來
2. 雖然寫好了JavaScript也debug了，但是測試時還是發生錯誤。

也許我該選用 node.js 這款最被推薦的 Comet 伺服器呢！

不過，我想今天就暫時先將就 Ajax Push Engine 吧！
畢竟，有始有終，我這個失敗的作品，多少也得要把他除錯完！

明天再來挑戰 node.js
不過 Comet 讓我如此興奮的原因，不外乎是「可以製作MMORPG」
如果多年前有玩WebGame的朋友，想必會知道一款叫做「創世之光」的遊戲。
可惜現在台服關了，跑去中國開……

我想，我會如此熱衷這個，就是因為那款遊戲！
那麼，我要繼續研究啦！
（每次一開始研究我就停不下來……）

]]> http://blog.frost.tw/life/poston-2010-07-09/postid-580/feed 0 Ajax Push – 創造即時聊天室http://blog.frost.tw/code/poston-2010-07-07/postid-576 http://blog.frost.tw/code/poston-2010-07-07/postid-576#comments Wed, 07 Jul 2010 11:26:17 +0000 蒼時弦也 http://blog.frost.tw/?p=576 這昨晚在找好玩的 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 當關鍵字，看看那些沒品的人如何轉貼的（微笑

]]> http://blog.frost.tw/code/poston-2010-07-07/postid-576/feed 2 Discuz 7.2 插件開發筆記 – 技能系統(1)http://blog.frost.tw/web-project/poston-2010-03-22/postid-458 http://blog.frost.tw/web-project/poston-2010-03-22/postid-458#comments Mon, 22 Mar 2010 10:47:06 +0000 蒼時弦也 http://blog.frost.tw/?p=458 最近在開發論壇插件，說真的，這個系統挺有意義的。
一般人會認為這是「娛樂插件」不過，錯了！！
這是一個「能力指標」的插件喔！

其實我的技能系統，並非「遊戲娛樂」的使用。

技能，如果在現實世界中，可以說是「會使用的技巧與擁有的能力」
那麼，我的技能系統就是用來「紀錄」的系統。

不過，仰賴 7.2 的強大插件擴充，讓我開發上非常順手。

目前系統共兩個資料檔案：「技能資訊」與「修煉資訊」
會這樣做其實很簡單，因為要避免「隨意的升級」

每項技能想要升級，就得通過「修煉選項」的達成，才可以進行升級。
整體來看，可以說是不錯的系統了！

下面就簡單分享使用到的「技巧」
不過說真的，有使用到的就只有 Discuz 上的 Ajax 控制屬於高難度。

我使用的是 Ajax 視窗，因此用 showWindow() 的 JavaScript函式呼叫。

<a href="plugin.php?id=dofskill:upskill&skillid=$key" onclick="javascript:showWindow('upskill', this.href);return false;" title="升級技能">升級技能！</a>

整體上為模仿 Discuz 的作法，而 showWindow 的參數共四個：
1. id 名稱(方便控制)
2. 目標位子
3. 傳遞資料方式，預設get (post用法我其實不會)
4. 是否緩存預設似乎是開啟的

而目標位子的頁面，就很講究了！
Discuz 設計成「直接讀取正常版模」的設計。

所以設計版模時，要照常加入 {template header} 與 {template footer}
否則，就會看空白畫面！

其餘大多是使用 PHP 達成的控制，其實也沒有什麼特別。

說實在的，其實技能系統只是一個基礎系統，實際上沒有太大的意義。

]]> http://blog.frost.tw/web-project/poston-2010-03-22/postid-458/feed 3 Push4Free – 簡易聊天室實作http://blog.frost.tw/code/poston-2010-02-19/postid-402 http://blog.frost.tw/code/poston-2010-02-19/postid-402#comments Fri, 19 Feb 2010 10:39:07 +0000 蒼時弦也 http://blog.frost.tw/?p=402 今天要把昨晚嘗試製作的「聊天室」和大家分享一下。
不過因為Application還未通過審核，所以只好用官方測試帳號。
不過，還是能看出即時變化喔！

今天要請大家先看一下影片，再繼續閱讀。

一樣，看完之後請別忘記回覆一下喔！

首先，大家想必都看到一開始出現了一堆英文訊息吧！
其實那些我還不確定該怎麼去除，除了 ready 是確定的。

不過，重點當然不在此。
當右手邊的視窗切入聊天室之後，左手邊會跳出「有新訪客進入聊天室」等訊息。

其實這是寫在進入的那位訪客的頁面。
原理 > 基本為 Client > Server & Server > Client
而 Client 要 Send Message 給 Server 需要透過 User 的輸入。
但是現在將 API 中定義的 Status == 200 狀態觸發事件，設定 Send 動作。
發送到 Server 之後，會立即傳給所有 User 此時，效果就達到了！
(但是進入的 User 因為還沒啟動接受功能，所以不會發現訊息出現變化。)

而要做到這種程度的聊天室，到底會花多少時間呢？
不瞞各位，只要一小時。

扣掉美化或者其他動作，只是單純的讓聊天室成型。
完完全全只要花上一小時，也許你的動作更快，可以在幾時分鐘內完成。

整個聊天室無需任何框架，只需要一點點的 JavaScript 就能做到。
「這是 Push4Free 的功能，也是基礎」

雖然我很想利用這種功能做成 Web Game
不過，玩家資料的儲存卻成為了障礙。
現在就只能好好想辦法了！

各位對於 Push4Free 的認識，是否更深入了呢？

]]> http://blog.frost.tw/code/poston-2010-02-19/postid-402/feed 0