計算機網(wǎng)絡(luò)學(xué)年論文--基于C_S模式的網(wǎng)頁在線聊天室

1、裝訂線 本科生學(xué)年論文設(shè)計 題目： 基于C/S模式的網(wǎng)頁在線聊天室 學(xué) 院 計算機科學(xué)與技術(shù)學(xué)院 專 業(yè) 計算機科學(xué)與技術(shù) 學(xué) 號 xxxxxxxxxxx 姓 名 寧劍 指導(dǎo)教師 xxxxxx 20 xx年x月xx日基于C/S模式的網(wǎng)頁在線聊天室摘 要早期的應(yīng)用軟件系統(tǒng)大都采用C/S客戶機/效勞器結(jié)構(gòu)，但是具有數(shù)據(jù)平安性低，數(shù)據(jù)不一致，實時性差，系統(tǒng)更新不便等劣勢。隨著網(wǎng)絡(luò)信息化的不斷開展，B/S瀏覽器/效勞器結(jié)構(gòu)得到了大規(guī)模的應(yīng)用，成為未來軟件開展的趨勢。同時，隨著Ajax技術(shù)的開展，能夠讓在線應(yīng)用體驗像本地應(yīng)用一樣流暢。這無疑又掀起了一場互聯(lián)網(wǎng)革命。OSI是Open System Inte

2、rconnection的縮寫，意為開放式系統(tǒng)互聯(lián)。國際標(biāo)準(zhǔn)化組織ISO制定了OSI模型。這個模型把網(wǎng)絡(luò)通信的工作分為7層，分別是物理層、數(shù)據(jù)鏈路層、網(wǎng)絡(luò)層、傳輸層、會話層、表示層和應(yīng)用層。本次實驗所做的基于C/S模式的網(wǎng)頁在線聊天室運用了Ajax技術(shù)，可以實現(xiàn)異步傳輸和動態(tài)加載數(shù)據(jù)，同時用HTML+CSS+JavaScript的前端技術(shù)，加上PHP后端效勞器腳本語言編寫。雖然用到的東西很多，不過都十分簡單，代碼精簡，易于讀者理解軟件的實現(xiàn)和網(wǎng)絡(luò)信息的傳遞。關(guān)鍵詞：C/S 異步 在線聊天室 OSI/RM目 錄實驗?zāi)康?1實驗內(nèi)容 1實驗分析 1具體實現(xiàn) 3心得體會 12附錄 12實驗?zāi)康臑榱诉M一

3、步加強學(xué)生對于OSI網(wǎng)絡(luò)模型結(jié)構(gòu)的理解，同時希望加強學(xué)生的應(yīng)用能力和自主創(chuàng)新能力。實驗內(nèi)容制作一個在線聊天工具，實現(xiàn)方式不限，要求必須實現(xiàn)根本的聊天，理解信息在網(wǎng)絡(luò)上的傳輸。實驗分析本次實驗是制作一個聊天工具，目的在于加深對于網(wǎng)絡(luò)結(jié)構(gòu)模型的理解，但是該軟件的實現(xiàn)方式不限。由于最近剛學(xué)了后端PHP語言和前端的JavaScript語言，同時又了解了Ajax的特性，于是結(jié)合自身所學(xué)，決定用一個簡單網(wǎng)頁去實現(xiàn)這個聊天室。Ajax工作流程示意圖：Ajax傳輸數(shù)據(jù)方式示意圖：瀏覽器效勞器用戶活動Ajax引擎活動異步請求異步響應(yīng)AJAX即“Asynchronous JavaScript And XML異步J

4、avaScript和XML，是指一種創(chuàng)立交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。AJAX = 異步 JavaScript和XML標(biāo)準(zhǔn)通用標(biāo)記語言的子集。AJAX 是一種用于創(chuàng)立快速動態(tài)網(wǎng)頁的技術(shù)。通過在后臺與效勞器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某局部進行更新。傳統(tǒng)的網(wǎng)頁不使用 AJAX如果需要更新內(nèi)容，必須重載整個網(wǎng)頁頁面。Ajax 的核心是 JavaScript 對象 XML Request。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XML Request 使您可以使用 J

5、avaScript 向效勞器提出請求并處理響應(yīng)，而不阻塞用戶。聊天室信息流程：效勞器瀏覽器具體實現(xiàn)異步發(fā)送請求是Ajax最為核心的內(nèi)容，Ajax使用XML Request對象異步發(fā)送請求，代碼如下：function createXML Request()if(window.XML Request)XML Req = new XML Request();else if(window.ActiveXObject)tryXML Req = new ActiveXObject(Msxml2.XML );catch(e)tryXML Req = new ActiveXObject(Microsoft.X

6、ML );catch(e)else上面的程序可以在IE、Firefox、Opera等瀏覽器中創(chuàng)立XML Request對象。由于XML Request在不同的瀏覽器中實現(xiàn)方式的不同，因而在不同的瀏覽器中創(chuàng)立XML Request的方式略有差異。一旦XML Request對象創(chuàng)立成功，就可以使用XML Request發(fā)送請求，通過JavaScript代碼完成，代碼如下：function sendRequest()var chatMsg = document.getElementById(chatMsg).value;var url = index.php;createXML Request();

7、XML Req.open(POST,url,true);XML Req.setRequestHeader(Content-Type,application/x-www-form-urlencoded);XML Req.onreadystatechange = processResponse;document.getElementById(chatMsg).value = ;XML Req.send(chatMsg= + chatMsg);XML Request對象有以下幾個內(nèi)置方法：通過open方法取得與效勞器連接，發(fā)送POST請求；通過setRequestHeader方法設(shè)置適宜的請求頭，讓

8、效勞器識別所發(fā)送過來的數(shù)據(jù)；通過onreadystatechange方法指定回調(diào)函數(shù)，當(dāng)信息從效勞器傳回時，將自動調(diào)用其指定的函數(shù)，相當(dāng)于一個事件監(jiān)聽器；通過調(diào)用send方法發(fā)送請求。此外，發(fā)送信息時應(yīng)該在按下“SEND按鈕或回車鍵時發(fā)送，故在標(biāo)簽中參加這樣一行命令，參加后如右所示：。同時還要參加以下代碼，用來處理按下回車鍵后的操作：function enterHandler(event)var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;if(keyCode = 13

9、)sendRequest(); 以下代碼是在效勞器端定義了一個Chatservice類，包含add和get兩個靜態(tài)方法。add方法用于將發(fā)送信息的用戶IP及其發(fā)送的信息存儲到本地的dialog.txt文件中。而get方法用于將用戶IP和信息從dialog.txt文件中逐行讀取出來，并回傳給瀏覽器，代碼如下：class Chatserviceprivate static $chatString = ;private static $num = 0;static function add($user,$chatMsg)self:$chatString = $user : $chatMsgrn;se

10、lf:$num = strlen(self:$chatString); $fp = fopen(dialog.txt,a);if(!$fp)echo Cant write it!;exit;fwrite($fp,self:$chatString);fclose($fp);static function get()$fp = fopen(dialog.txt,r);if(!$fp)echo Cant read it!;exit;while(!feof($fp)echo fgets($fp);fclose($fp);以下函數(shù)是定義在效勞器端用于獲取用戶IP地址的getIP函數(shù)，由于我們的聊天室不需

11、要用戶注冊，故用其所在的IP地址來區(qū)別不同用戶，代碼如下：function getIP()if(getenv( _CLIENT_IP)&strcasecmp(getenv( _CLIENT_IP),unknown)$ip = getenv( _CLIENT_IP);else if(getenv( _X_FORWARDED_FOR)&strcasecmp(getenv( _X_FORWARDED_FOR),unknown)$ip = getenv( _X_FORWARDED_FOR);else if(getenv(REMOTE_ADDR)&strcasecmp(getenv(REMOTE_ADD

12、R),unknown)$ip = getenv(REMOTE_ADDR);else if(isset($_SERVERREMOTE_ADDR)&$_SERVERREMOTE_ADDR&strcasecmp($_SERVERREMOTE_ADDR,unknown)$ip = $_SERVERREMOTE_ADDR;else$ip = unknown;return $ip;以下代碼用來調(diào)用已經(jīng)編寫好的函數(shù)，首先通過全局變量數(shù)組POST來獲取瀏覽器發(fā)送來的信息。假設(shè)信息不為空，那么獲取用戶的IP地址，并將其和發(fā)送來的信息一起存儲下來。之后再調(diào)用靜態(tài)函數(shù)get將效勞器上的聊天信息回傳給瀏覽器，代碼如下

13、：$chatMsg = $_POSTchatMsg;if($chatMsg != NULL)$user = getIP();Chatservice:add($user,$chatMsg);Chatservice:get();效勞器響應(yīng)后生成簡單的文本，XML Request對象有一個responseText屬性可以獲取效勞器生成的文本。在解析效勞器響應(yīng)之前，必須判斷效勞器響應(yīng)是否完成，以及響應(yīng)是否正確。readyState等于4，表示效勞器響應(yīng)完成。status等于200，表示效勞器響應(yīng)正確，其等于404說明資源喪失，其等于500表示內(nèi)部錯誤。之后便可將效勞器返回的文本通過DOM方式插入到頁面

14、中去。代碼如下：function processResponse()if(XML Req.readyState = 4)if(XML Req.status = 200)document.getElementById(chatArea).value = XML Req.responseText;document.getElementById(chatMsg).value = ;elsewindow.alert(RESPONSE ERROR!);雖然定義了發(fā)送請求的方法，但是根據(jù)聊天室的特點，即使本人沒有參與聊天，也希望實時獲得他人的聊天信息。所以必須定時自動發(fā)送空的請求來獲取響應(yīng)，從而及時獲得更

15、新的信息。自動發(fā)送空的請求與發(fā)送信息只有略微差異，代碼如下：function sendEmptyRequest()var url = index.php;createXML Request();XML Req.open(POST,url,true);XML Req.setRequestHeader(Content-Type,application/x-www-form-urlencoded);XML Req.onreadystatechange = processResponse;XML Req.send(null);setTimeout(sendEmptyResquest(),800);上面

16、代碼中的setTimeout函數(shù)是JavaScript的計時器函數(shù)，它將會每隔0.8秒重復(fù)執(zhí)行。由于自動發(fā)送請求應(yīng)該在進入聊天室之后就立即執(zhí)行。所以要在HTML代碼的標(biāo)簽中參加這樣一行命令：測試局部：1、聊天室界面，輸入“你好！并點擊SEND按鈕：2、輸入“我是2012436109”并回車：3、輸入“這是在線聊天室的界面，昵稱為我的本機地址并回車：4、這是效勞器自動存儲的聊天記錄位于ChatRoom文件夾內(nèi)：心得體會通過一個學(xué)期對計算機網(wǎng)絡(luò)的學(xué)習(xí)和實踐，我們收獲很多，不僅在知識層面上有所提高，而且了解了開發(fā)一個在線聊天室的步驟。從對網(wǎng)絡(luò)層次模型研究開始，到完成軟件的設(shè)計，依次經(jīng)歷了實驗分析，總

17、體設(shè)計，詳細設(shè)計，實現(xiàn)，測試及維護等過程，加深了對知識的理解。在這里要感謝xxxxxx老師的辛勤付出。在制作這個聊天室的過程中，花費的時間并不是很多。主要是為了簡單快速的實現(xiàn)其功能，所以聊天室的界面較為簡陋，功能較為單一。其實這些都可以在此根底上進行擴充，如參加jQuery庫的文件傳輸函數(shù)，即可實現(xiàn)文件傳輸功能。也可以加上數(shù)據(jù)庫的鏈接，同時制作一個注冊或登錄的頁面，即可實現(xiàn)登錄和注冊功能。附錄代碼chat.html：ChatRoomvar input = document.getElementById(charMsg);input.focus();var XML Req;function cr

18、eateXML Request()if(window.XML Request)XML Req = new XML Request();else if(window.ActiveXObject)tryXML Req = new ActiveXObject(Msxml2.XML );catch(e)tryXML Req = new ActiveXObject(Microsoft.XML );catch(e)elsefunction processResponse()if(XML Req.readyState = 4)if(XML Req.status = 200)document.getEleme

19、ntById(chatArea).value = XML Req.responseText;document.getElementById(chatMsg).value = ;elsewindow.alert(RESPONSE ERROR!);function sendRequest()var chatMsg = document.getElementById(chatMsg).value;var url = index.php;createXML Request();XML Req.open(POST,url,true);XML Req.setRequestHeader(Content-Type,application/x-www-form-urlencoded);XML Req.onreadystatechange = processResponse;document.getElementById(chatMsg).value = ;XML Req.send(chatMsg= + chatMsg);function sendEmptyRequest()var url = index.php;createXML Request();XML Req.open(POST,url,true);XML Req.setRequestHeader(Content-Type,applicat