與一些聊天室不同的是，這個聊天架構不是由Client(Browser)不斷送出Request，而是由Server在有需求時才送出訊息或通知。

直到最近pigo大在他的部落格中提到一種叫做Comet架構的概念，我才發現原來有這樣一種架構概念，在這之前我倒是沒有聽過，真是後知後覺啊。

在稍微了解過這種概念後發現與我當初想的好像頗為相似，重點似乎都是Server的主動，而不是不斷的請求，但我不是很確定是否有何不同，不過很恰巧的是Server端都是用C#寫的（硬要攀關係 XD）。

仔細想想這樣的運作架構或許有它的存在的價值，重點在於用在什麼地方。

因此今天又重新把這個網站整理一下搬了出來，有興趣的人不妨隨意玩玩，或許可以激起你另一個想法。

Screenshots

Web 聊天介面

室長端介面

網址：

http://tbase.colorbase.tw/

帳號：test  密碼：test

概念

這個聊天室架構不是由Client(Browser)不斷發送Request請求，而是讓聊天室成員與室長端建立一個固定的連線，換句話說是在有需求時訊息才會被傳遞，而室長端就是一個Server端，訊息流量都由使用者（室長與成員）自行承擔，缺點是使用者如果要當室長必須需要下載一個Client端軟體。

在這樣架構之下總共會有兩種Server端（HTTP Server不納入計算），一是中介Server，用於室長與聊天成員之間建立連線的媒介，處理一些狀態訊息等等，二是室長端。

但事實上，中介Server的角色在某些應用底下，它並不是一定要存在的，因此若單指聊天室長端的Server與聊天成員的運作來看，這樣的運作就會很像所謂的comet（希望我沒有會錯意）。

由於是固定連線的關係，因此在訊息的傳遞上非常即時，實測的結果，室長端使用一般家用網路其即時的效果跟MSN似乎不相上下，當然這取決於連線數量的多寡與頻寬條件。

如下簡圖：

圖示來自：

http://www.iconshock.com/

http://www.vistaicons.com/icon/i161s0/web_browsers_icons.htm

關於comet架構

這有一些文章可以參考：

• http://lightyror.thegiive.net/2007/06/comet-push-server.html
• http://www.pigo.idv.tw/archives/761
• http://blog.roodo.com/rocksaying/archives/12010463.html

PS. pigo大最近打算釋出他的原始碼，有興趣的人不妨留意一下他的消息。

最後我決定以 new BSD license 釋出，希望可以讓有相同需求的人多個選擇。

Lazybones 吉祥物

名稱：藍惰蟲 (bluelazy)

分類：軟體生物

棲息地：每個人的心中

特性：可能促使宿主懶散不事生產，也可能促使宿主為了消除藍惰蟲所釋放的懶惰激素進而改進或創造新事物來滿足懶惰的慾望。

記得小時候被長輩罵懶時，總是以比喻的方式消遣「你是沒骨頭嗎？」

因此以這樣一個概念設計了這個沒有骨頭的生物「藍惰蟲」。

Lazybones 簡介

Lazybones 是一個微型PHP快速開發框架，它被設計的主要目的是減少小型架構網站所需撰寫的程式碼，加快開發的速度、增加可維護性，同時能兼具一定的執行的效能，努力在效能與核心功能間取得平衡點。
目前已實現的特色：

• 核心迷你，執行效能高
• 操作簡便，語法親和
• MVC架構
• 具備可擴充性及開發彈性
• 存取控制清單 (ACL)
• 模型內建ORM
• 事件
• URL路由器
• 視圖佈局
• 主題支援
• 資料驗證器
• 國際化

• Lazybones 官方網站
• Lazybones 討論區

bug修正清單如下：

1. 登入後可能不是顯示自己的暱稱，而是顯示joaoko。
2. 表情符號大串連，點一次表情符號，輸入很多個。
3. 很多地方出現undefined。

噗很大今後將與原色胚子官方網站合併至http://free.colorbase.tw，新訊息也統一在合併的新網站發佈，此處將不再更新噗很大訊息。

1. 最恐怖的靈異現象，硬是要學的werboy發現他登入後顯示的暱稱顯示為「joaoko」(驚！軟體彩蛋嗎？)
   看到這裡我笑翻了，原因是這樣的：
   因為我是joaoko的部落格 – 0與1的邂逅 的頭號粉絲，所以在寫這個小工具時很不自覺的在暱稱那邊預設輸入joaoko…，因此程式沒正確讀到暱稱時，就顯示預設的joaoko了，應該不只他會遇到吧….
2. 針對某人回覆功能
   目前已經有了，只要點一下暱稱，就會自動在訊息輸入框加入對方的帳號（如：@royyan），就跟噗浪的「回覆」是一樣的。
3. 沒辦法看圖片或照片
   目前圖片或照片會已預設瀏覽器開啟，還沒做像噗浪那樣直接顯示或開啟。
4. 沒有完整讀取到全部的留言
   基本上，這是故意的，因為如果剛加入一個聊天噗，噗很大把全部的舊訊息都載入的話不僅比較耗時間，一般聊天室通常頂多秀出最後幾則，所以噗很大只會讀出最後10則噗。
5. 噗主人可以刪除其他噗友回覆嗎？
   這個小工具是去讀噗浪的資料，把它做成像聊天室一樣的功能，因此噗浪架構上有的東西才有辦法辦到，所以刪除單一回覆是沒辦法的，但刪除整個噗是有可能的（還沒做）。

v0.1 beta目前有的Bug：

1. 登入後不是顯示自己的暱稱，而是顯示joaoko (好搞笑的bug)。
2. 表情符號大串連，點一次表情符號，輸入很多個。
3. 很多地方出現undefined。

噗友建議＆想做清單：

1. 記住帳號密碼。
2. 分頁聊天。
3. 老闆來了熱鍵。
4. 圖片或影片可以直接顯示。

但噗浪所設的反應速度並不是那麼即時，因此當有人發表回覆之後，如果沒有自己按重新整理的話，要過一段時間才會收到新訊息。

所以就寫了這個把噗浪的任意一則噗變成即時聊天室的工具，讓噗很大的人 — 噗更大！

軟體擷圖：

噗很大今後將與原色胚子官方網站合併至http://free.colorbase.tw，新訊息也統一在合併的新網站發佈，此處將不再更新噗很大訊息。

今天把小綠人製成Flash loading元素以供直接套用：

仿照交通號誌的效果，剛開始會走比較慢，後面會走比較快

使用方式：

我已經把loading所需的ActionScript寫進去了，因此只需複製元件到目的文件即可。

1. 打開小綠人flash原始檔。
2. 開啟「元件庫面板」，找到名為「loading」的影片片段(MovieClip)，按下滑鼠右鍵 >> 複製。
3. 切換到你的flash原始檔中。
4. 開啟「元件庫面板」，按下滑鼠右鍵 >> 貼上(Flash會一併複製其他所需元件過去)。
5. 新增一個場景（此場景可命名為loading），並排在第一順位。
6. 把loading影片片段拉到新增的場景中。
7. 完成，現在你的flash擁有小綠人loading提示功能了。

PS. loading的ActionScript我使用AS3.0的語法。

小綠人Flash loading元素原始檔下載

1. 支援顏色的拖曳，方便操作。
2. 主視窗加入快速歷史紀錄。

前往下載頁面

前往歷史紀錄

我對javascript樣板引擎的需求大致如下：

1. 操作簡單（我想沒有人不喜歡簡單吧？）。
2. 要有區塊的功能（這是很常見的需求）。
3. 檔案要小（javascript是在Client端執行的，越小的檔案當然越好）。

先來介紹兩個不錯的樣板引擎

1. jTemplates

以jQuery為基礎開發的樣板引擎，感覺相當不錯，檔案很小(壓縮後約4kb)，樣板語法類似Smarty (可見其功能完整性足夠，而且Smarty知名度夠，因此對很多人來說Smarty樣板語法很容易上手)
官方的特色介紹：

• Fast*, Small (<10kB)
• 100% in JavaScript
• Work with Ajax and/or JSON
• Allow to use JavaScript code in templates
• Work with jQuery
• Allow to build cascading templates
• Allow to define parameters in templates
• Syntax similar to Smarty
• Live Refresh! automatic update content from server
• Free to commercial or non-commercial use!

http://jtemplates.tpython.com/

2.JavaScriptTemplates

純Javascript的樣板引擎，功能感覺相當強大，也很複雜

http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

royTemplate for jQuery plug-in

因為我喜歡簡單，所以懶人專用、操作簡單的jQuery早成了我寫javascript時必定會一起載入的library，原本這方面的需求都是直接把jQuery強大的DOM操作能力當成樣板引擎在用，但最近發現這樣的寫法真夠讓人吐血的麻煩，因此就在網路上找到上面推薦的那兩個感覺不錯的樣板引擎。
只是我的需求還不到那麼複雜的功能，檔案小、操作簡單的樣板引擎才是我需要的，因此才會重新發明輪子，把我原本的寫法進一步寫成一個jQuery 的樣板引擎Plug-in，好讓自己以後不用再邊寫邊吐血 XD

特色：

1. 操作簡易，只需指派JSON資料即可。
2. 沒有複雜樣板引擎語法，區塊的是否呈現完全取決於資料變數及HTML結構，適合以WYSIWYG編輯器編輯樣板(如Dreamweaver)。
3. 支援階層區塊
4. 檔案本身size迷你(以jQuery為基礎)，原始大小 2.11 KB，壓縮後1.17 KB。

使用概念很簡單，有用過Web Server端語言(如PHP)樣板引擎的人應該會很容易理解，使用概念如下：

1. 資料變數採用 JSON格式，樣板變數的格式為： %變數名稱%，例如：%title%
2. 區塊的定義只需要設定HTML tag的屬性blk即可，如：blk=』區塊名稱』。
3. 單一區塊直接指定子值即可，而重複區塊資料指派JSON array資料即可

基本範例：
HTML，樣板的部份用一個tag包裹起來，並設定style=』display:none』，用以隱藏原始樣板

%hello%
這個區塊將被顯示
這個區塊不會被顯示！

javascript，將結果顯示在id=』result』的tag裡面

//JSON變數資料
var vars =
{
	hello:'Hello world!!',
	block1:{}
};
/*
以下資料最終結果一樣
var vars =
{
	hello:'Hello world!!',
	block1:true,
	block2:undefined;
};
*/

//操作方式
/*
	結果 = $(樣板).royTemplate(JSON資料);
*/
var result = $('#template').royTemplate(vars);
$('#result').html(result);

結果

結果HTML，由於block2沒有指派資料，所以不會顯示

Hello world!!
這個區塊將被顯示




%hello%
這個區塊將被顯示
這個區塊不會被顯示！

表格區塊範例：

HTML

%title1%
%title2%


%bookName%
%author%

javascript，由於要讓rows區塊以重複區塊的方式呈現，因此JSON變數資料中指派rows陣列以顯示多列資料

//JSON變數資料
var vars =
{
	title1:'書名',
	title2:'作者',
	rows:
	[
		{
			bookName:'jQuery in Action',
			author:'Bibeault, Bear'

		},
		{
			bookName:'Learning jQuery',
			author:'Jonathan Chaffer、Karl Swedberg',

		},
		{
			bookName:'JavaScript Programmer’s Reference',
			author:'Horn, Shannon'
		}
	]
};
//如果rows區塊只需顯示一次，則不需指派Array資料，改為如下
/*
var vars =
{
	title1:'書名',
	title2:'作者',
	rows:
	{
		bookName:'jQuery in Action',
		author:'Bibeault, Bear'
	}
};
*/

$('#result').html($('#tableTemplate').royTemplate(vars));

結果HTML

<div id="result">
	<table id="tableTemplate" border="0" cellspacing="2" cellpadding="5" width="900">
		<tbody>
			<tr>
				<td bgcolor="#cccccc" width="62%">書名</td>
				<td bgcolor="#cccccc" width="38%">作者</td>
			</tr>
			<tr><td><strong>jQuery in Action</strong></td><td>Bibeault, Bear</td>
			</tr>
			<tr><td><strong>Learning jQuery</strong></td><td>Jonathan Chaffer、Karl Swedberg</td>
			</tr>
			<tr><td><strong>JavaScript Programmer’s Reference</strong></td><td>Horn, Shannon</td>
			</tr>
		</tbody>
	</table>
</div>
<div style="display: none">
	<table id="tableTemplate" border="0" cellspacing="2" cellpadding="5" width="900">
		<tbody>
			<tr>
				<td bgcolor="#cccccc" width="62%">%title1%</td>
				<td bgcolor="#cccccc" width="38%">%title2%</td>
			</tr>
			<tr blk="rows"><td><strong>%bookName%</strong></td><td>%author%</td>
			</tr>
		</tbody>
	</table>
</div>

下載：royTemplate
包含royTemplate的原始檔及壓縮後的檔案，與四個範例(基本Demo、表格列表(階層區塊)Demo、綜合Demo、AJAX Demo for PHP)

遊戲規則

• 在限定時間內找出兩圖之間不同的地方並以滑鼠點選右圖不同的地方。
• 若點錯將扣除3秒的時間。
• 找不到的時候可以點一下上面的包子頭圖案，會自動隨機解出一個不同處。
• 階級從一開始，每十關加一階並增加一個包子頭。
• 每局基礎遊戲時間為90秒，每次進階扣除每局基礎遊戲時間5秒。

得分重點

• 盡可能不要找包子頭幫忙。
• 越快找到所有的不同處得分越高。
• 階級越高，過關加分越高。

包子頭找不同：http://www.foodshow.tw/bao/bao_different/

美食愛秀網：http://www.foodshow.tw/

硬碟圖示下載 包含png、ico格式及4種尺寸

本創作採用「創用 CC 姓名標示-非商業性 2.5 台灣 授權條款」授權