2011年5月26日 星期四

jQuery_簡易非同步聊天室(jQuery+JSON+WService) Part2

上星期抽空整理jQuery的程式碼,亂做了一個超級簡陋聊天室,經過簡單的試用以後,果然是又爛又難用。所以這週還是利用改案子改到頭昏的時候修改了一下,順便用這一個頁面測試了一些CSS設定。

修改的部份包括:
1. 除了滑鼠送出訊息,增加可按Enter送出訊息。
2. 訊息太多時,卷軸會自動捲動,但使用者往前觀看內容時,關閉自動捲動。
3. 使用者列表改為即時取得,可確認誰在線上。
4. 可以看到自己丟出去的訊息了。
5. 自己的訊息與對方的訊息以不同顏色表示。

整個程式分成四個部份:
1. HTML配置
2. jQuery操作
3. WebService
4. Database

橫向來看主要也分為四個部份:
1. 帳號登入部分:單純以一個WebService確認使用者帳號密碼是否正確。
2. 傳送訊息部份:以滑鼠點擊或Enter觸發後,將訊息存入資料庫(Say_List)當中。
3. 接收訊息部份:以Timer定時呼叫WebService去查看資料庫是否有新增加的訊息,若是有利用JSON傳回來;取得後,動態增加到SayingList的表格中。
4. 使用者列表同部部分:以Timer定時呼叫WebService,紀錄登入者的呼叫時間,並將時間在15秒緩衝時間內的名單撈回來;取得後,動態增加到UserList的表格中,並增加一選取按鈕。

最後來看一下成果:

沒有留言:

張貼留言