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的表格中，並增加一選取按鈕。

最後來看一下成果：