不過，不能放PHP等程式上去一直是弦也頭痛的問題。
但今天弦也看到了一篇用 jQuery + YQL (Yahoo Query Language) + Google Spreadsheet 的應用教學，得到萌發啟發了？
先看一下我們邪門的參考資料：
http://tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/ – YQL + Google Docs via jQuery 製作動態 FAQ （亂翻譯）
http://p2pu.org/webcraft/node/27443/document/27520 – 就算是Google Spreadsheet 的 Form 我也有辦法讓他卡到陰（根本不是這麼一回事！）

光靠以上兩篇，我們就可以做出邪門的 純JavaScript 留言板摟！

步驟一：

到你的 Google Docs 新增邪門的表單（和試算表一組的那個！？）
然後設定一下欄位（本範例只有暱稱和留言兩個項目）

步驟二：

取得表單的網址（Google 會給你一段 iframe 的 HTML 語法，用那段找出來～）

（網址是 src="網址" 的部份）

步驟三：

從表單找出送出的位置，還有各個欄位的 name 是多少。

如果有 Firebug 或者使用較新版的Chrome/Safari可以點選右鍵>觀察元素，比較好找。
（action="表單送出位置" 還有各欄位的 name 值）

步驟四：

轉換成HTML頁面（美工請自己負責喔～）

引用 jQuery 程式庫，這邊使用 1.4 是因為教學的版本，各位可以自行選用新版。

建構前端介面（表單、留言區塊）

撰寫 JavaScript 部份（使用YQL輔助）

上面的 csvURL 是從發布表單的地方取得：

（選用 csv格式）

接著設定 YQL 的查詢網址。
?q= 之後是查詢語法，這邊使用的是
SELECT * FROM csv WHERE url = ‘csvURL(有經過 urlEncode)’ AND column = ‘time, nickname, content’
這樣就代表我用 csv 格式查詢，從我傳入的 URL 位置，並且依序設定欄位名稱為 time, nickname, content

最後用 jQuery 的 Ajax 功能取得 JSON 傳回，並且用 $.each 依序處理傳回值。
（用FireFox可以觀察到物件在 msg.query.result.row 裡面，不過只有一筆資料會發生錯誤就是了……）

註：在 each 的處理函式讓他傳入 key 檢查是否 == 0 來把 Google Spreadsheet 預設的欄位跳過。

最後做偵測處理。
1. 送出表單會跑到 Google 頁面，所以讓 form 指向設定的框架（隱藏）
2. 用 jQuery 偵測 onsubmit 事件，送出後設定 submitted 為 true
3. 此時隱藏的 iframe 會因為送出表單觸發，接著發現 submitted 為 true 於是重新整理頁面。
4. 留言板流程運作完畢

這樣一來就可以留言了，中間有一些部份需要多加思考。
註：使用 YQL 會無法即時，而 jQuery Plugin 的 jSpreadheet 版本過舊，各位可能要自己處理 CSV 格式化。

範例：http://dl.dropbox.com/u/4023935/Web%20Showcase/evil-Google-Guestbook.html

難得學校補假天氣好，好日子不配上好程式怎行呢？
網友贊助主機當運行平台，不好好開發怎麼行呢？

所以，今天的 Node.js 寫得特別順！
（以上純屬想像……）

今天的開發有點類似將 Node.js 從一般的聊天室應用，改良成大型聊天室。
要形容的話，就是增加了 Room 的概念。
只要經過 addRoom 方法，指定一個 Room Name 傳入。
那麼，你就可以創建一個聊天室了！

當然，運行速度有V8保證，絕對不慢。
（說真的用JavaScript運行起來真的「快」阿！）

不過，這個開發果然「瘋狂」
因為這是一整個「物件導向」式的做法。
雖然這家伙根本沒有在認真用物件導向……
待會看了程式碼，你會怎麼想？

不過，使用物件確實有點高難度。
而且身為神奇的開發者，竟然在今天才發現加上 new 修飾後，就是個物件……
（果然是基本功沒練好就上場的瘋子……）

廢話不多說，來看看程式碼吧！
但是，我才…才…才不會讓你看完整哩！

你們看看，好長一條阿！
沒錯，兇手就是他！！

這是將聊天室模組化的成果，充滿了奇蹟（誤

使用方法也很簡單，先是用 Node.js 的 require 把他引入。

var chat = require("./chat.js");
chat.addRoom("general");
chat.listen(80);

接著，神奇的事情就發生拉！！！
那就是，你打不開網頁……

為什麼？
因為沒有寫 Client 端阿！
現在邪惡的開發者竟然用當年測試Node.js的簡易Client接收訊息。
（到底是怎麼將兩個完全不合的程式組起來，也是很神秘的……當年似乎是幾個月前……）

那麼，你準備好試用了嗎？
當開發者心血來潮之時，你就可以用了！

期待嗎？
請關注「才…才不會讓你看（羞）」系列！
（喔！沒有這東西……）

如果想知道更多，請關注本網誌很糟糕的標題，因為很糟糕，所以看到內容會很失望。
讓你最失望的，一定就是網址。
「所以，請關注下一張圖片！？」

在 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的朋友，想必會知道一款叫做「創世之光」的遊戲。
可惜現在台服關了，跑去中國開……

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

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

不過，仰賴 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 達成的控制，其實也沒有什麼特別。

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

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

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

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

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

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

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

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

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

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

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

功能是什麼呢？
他提供的功能是「免費聊天室伺服器」

不過這樣說，其實也不能完全「正確」
根據我的了解，實際上有 Socket 伺服器的功能。

那麼，如果說我想製作一款 Web Game (如寵物森林這種)
就能夠利用 Push4Free 的免費服務來達成，又因為「免費」
而且不需要將這種消耗資源的程式放在伺服器，對於開發者來說是非常有益的！

不過礙於各種怪事(？)
所以今天只能把 JavaScript 的 API – PJAX 下載下來測試。
一照官方的測試設定，確實確定是「同步更新」

以往的聊天室都利用「刷新頁面」來即時顯示訊息。
但是 Push4Free 則是利用 JavaScript 引用 Flash 來做出效果。

在很多方面，可以算是一種「突破」
各位可以在網路上找看看 JavaScript & Socket 的相關資料，都有搭配 Flash
不過，因為我使用 Linux 無法製作 Flash 所以只好用 JavaScript 拉！

那麼，就各位請觀看我錄製的測試短片。

看完之後，別忘記用留言告訴我心得。
「可別讓我『苦苦等待』大家的心得喔！」

今天下午則是做了實作，情況也非常不錯。

那麼簡單了解一下 SWF Upload 吧！
下載 Sample 版本後上傳，就有多種範例可用。

不過都是範例上傳，不會有實際作用。

而我使用的是Speed Demo來做改良。
成品除了能夠儲存資料之外，還可以顯示出連結。

首先，我們要來了解一下結構(核心部份在/而Speed Demo則在/speeddemo資料夾)
index.php – 頁面主體
upload.php – 負責處理上傳
/js/handlers.js – 客制化處理
/js/swfupload.queue.js – 查尋序列的JavaScript
/js/swfupload.speed.js – 統計上傳速度的 JavaScript
/images – 上傳按鈕的資料夾

首先調整index.php的表格，我是加在右方的表格：

<tr><td>上傳的檔案：</td><td id="fileup"></td></tr>

還有加入一項客製化訊息(在custom{} 中)：

fileup : document.getElementById("fileup");

之後編輯 upload.php 加入上傳檔案的功能。

<?php

 function imgtype($name){
 $arr = explode('.', $name);
 return '.'.$arr[1];        
 }

 // Work-around for setting up a session because Flash Player doesn't send the cookies
 if (isset($_POST["PHPSESSID"])) {
 session_id($_POST["PHPSESSID"]);
 }
 session_start(); 

 // The Demos don't save files 

 if (!isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) {
 echo "上傳時出現了錯誤 - 無法取得檔名。";
 } 

 $img = $_FILES["Filedata"]["tmp_name"];
 $imgname = substr(md5(time().$_FILES["Filedata"]["name"]),0,16).imgtype($_FILES["Filedata"]["name"]);
 $path = './upload/'.$imgname;
 if(@move_uploaded_file($img, $path))
 echo '<a href="http://'.$_SERVER['HTTP_HOST'].'/swfupload/beta/upload/'.$imgname.'" target="_blank">'.$_FILES['Filedata']['name'].'</a>';
 else
 echo '這張圖片上傳發生錯誤 - 無法複製檔案。';
?>

接著修改 /js/handlers.js 加入更新上傳列表的設定：
修改 fileDialogComplete() 函式初使化上傳檔案列表：

function fileDialogComplete() {

	this.startUpload();
	this.customSettings.fileup.innerHTML = "";

}

接著修改 uploadSuccess() 函式自動加入新上傳的檔案連結：

function uploadSuccess(file, serverData) {

	try {

		updateDisplay.call(this, file);
		this.customSettings.fileup.innerHTML += "" + serverData;

	} catch (ex) {

		this.debug(ex);

	}

}

最後，選取多個檔案測試上傳。
就會發現原本不會列出檔案以及上傳檔案的功能，進化了！