第十五章聊天室.pptVIP

Chapter 15 聊天室 本章提要 15 - 1 聊天室程式的架構 15 - 2 Index.htm 與 Global.asax 應用程式檔 15 - 3 接收使用者發言的 Input.aspx 15 - 4 顯示所有發言的 ShowMsg.aspx 15 - 5 新增表情圖示與自訂文字顏色的功能 15 - 6 改良儲存與顯示發言的方式 聊天室 從本章開始, 我們會提供許多網頁應用程式的範例, 讓您瞭解如何應用前面所學的各項技術, 實際撰寫 ASP.NET 的網頁應用程式。 15 - 1 聊天室程式的架構 本章將製作如下聊天室： 聊天室程式的架構 聊天室程式乍看之下可能會覺得複雜, 但其實只要將架構拆解, 便可以發現其原理相當簡單。以下是本章聊天室程式的架構示意圖： 聊天室程式的架構 上圖中的 Index.htm 被分成上下兩個頁框 (frame), 頁框的功用是將一個網頁畫面切割成多個區域, 每個區域可各自顯示不同網頁。 而 Index.htm 網頁以頁框切割成兩部分：上頁框的來源為 ShowMsg.aspx, 下頁框的來源則為 Input.aspx。 Input.aspx 檔案會顯示可輸入的文字欄位, 讓使用者在其中輸入要發言的內容, 然後將使用者輸入的文字儲存在 Application 物件內的變數。 聊天室程式的架構 在第 7 章曾經說明 Application 是 Web 應用程式中各網頁都能存取的物件, 由於 Input.aspx 會將使用者的發言存放在 Application 物件內, 所以 ShowMsg.aspx 檔案只要從 Application 物件中逐一讀取所有的值, 即可將使用者的發言顯示於網頁上。 15 - 2 Index.htm 與 Global.asax 應用程式檔 本節將先說明 Index.htm 與 Global.asax 這兩個重要檔案的內容與設定。 Index.htm 的內容 Global.asax 應用程式檔 Index.htm 的內容 從 15-1 節的架構說明中, 我們知道 Index.htm 會被分割為上下兩個頁框, 上頁框由 ShowMsg.aspx 檔顯示所有使用者的發言, 下頁框則是 Input.aspx 讓使用者輸入文字。 所以 Index.htm 的內容非常簡單, 只要使用 HTML 的頁框 (frame) 語法, 設定網頁視窗如何分割, 以及分割後各頁框的來源檔案即可： Index.htm 的內容 Index.htm 的內容 第 8 行『rows = “*, 100”』表示要將頁框切割為上下兩個部分, 下頁框的高為 100 像素, 其餘部分皆屬於上頁框。 所以不論瀏覽器的視窗大小如何, 下頁框都會永遠保持 100 像素高, 而上頁框則會隨著視窗大小 改變高度： Index.htm 的內容 第 9、10 行分別設定上下頁框的來源檔案為 ShowMsg.aspx 與 Input.aspx, 其中 name 屬性設定頁框名稱, 至於 scrolling 屬性則為是否要顯示捲動軸, 設定為 auto 表示如果網頁內容大於視窗才會顯示捲動軸。 Global.asax 應用程式檔 將使用者的發言存放於 Application 物件時, 最好先設定儲存的數量上限, 當發言數超過上限, 最舊的發言便不再保留, 以節省伺服器資源。 我們將在 Application 物件中定義一個名為 ChatMsgMax 的變數來設定此上限值, 並且在 Global.asax 檔案的 Application_Start 程序內設定其初始值： Global.asax 應用程式檔 Global.asax 應用程式檔 第 7 章曾經說明 Global.asax 包含了網頁應用程式各工作階段的處理程序, 而 Application_Start 是應用程式第一次啟動時會執行的程序, 所以聊天室程式第一次執行時, 便會自動在 Application 物件內新增 ChatMsgMax 變數, 並且設定其值為 100, 表示聊天室程式最多只儲存 100 筆發言記錄。 Global.asax 應用程式檔 ChatMsgMax 變數是聊天室程式各個檔案都會使用的變數, 因此我們若是在 Application_Start 程序宣告並且定義這個變數, 之後在各 .aspx 檔案中便可以直接存取, 不需要每個檔案都重新定義 ChatMsgMax 變數。 而且未來如果想要增加儲存的發言筆數, 只要修改 Global.asax 檔即可, 不用一一修改其他檔案。 Global.asax 應用程式檔 所以建議您撰寫應用程式時, 將這種所有檔案都會用到的變數, 以中央控管的方式來定義, 對於程式的使用與維護