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

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

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

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

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

5、avaScript 向效勞器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。聊天室信息流程：效勞器瀏覽器具體實(shí)現(xiàn)異步發(fā)送請(qǐng)求是Ajax最為核心的內(nèi)容，Ajax使用XML Request對(duì)象異步發(fā)送請(qǐng)求，代碼如下：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對(duì)象。由于XML Request在不同的瀏覽器中實(shí)現(xiàn)方式的不同，因而在不同的瀏覽器中創(chuàng)立XML Request的方式略有差異。一旦XML Request對(duì)象創(chuàng)立成功，就可以使用XML Request發(fā)送請(qǐng)求，通過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對(duì)象有以下幾個(gè)內(nèi)置方法：通過open方法取得與效勞器連接，發(fā)送POST請(qǐng)求；通過setRequestHeader方法設(shè)置適宜的請(qǐng)求頭，讓

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

9、)sendRequest(); 以下代碼是在效勞器端定義了一個(gè)Chatservice類，包含add和get兩個(gè)靜態(tài)方法。add方法用于將發(fā)送信息的用戶IP及其發(fā)送的信息存儲(chǔ)到本地的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、要用戶注冊(cè)，故用其所在的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ā)送來的信息一起存儲(chǔ)下來。之后再調(diào)用靜態(tài)函數(shù)get將效勞器上的聊天信息回傳給瀏覽器，代碼如下

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

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ā)送請(qǐng)求的方法，但是根據(jù)聊天室的特點(diǎn)，即使本人沒有參與聊天，也希望實(shí)時(shí)獲得他人的聊天信息。所以必須定時(shí)自動(dòng)發(fā)送空的請(qǐng)求來獲取響應(yīng)，從而及時(shí)獲得更

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

17、體設(shè)計(jì)，詳細(xì)設(shè)計(jì)，實(shí)現(xiàn)，測(cè)試及維護(hù)等過程，加深了對(duì)知識(shí)的理解。在這里要感謝xxxxxx老師的辛勤付出。在制作這個(gè)聊天室的過程中，花費(fèi)的時(shí)間并不是很多。主要是為了簡(jiǎn)單快速的實(shí)現(xiàn)其功能，所以聊天室的界面較為簡(jiǎn)陋，功能較為單一。其實(shí)這些都可以在此根底上進(jìn)行擴(kuò)充，如參加jQuery庫(kù)的文件傳輸函數(shù)，即可實(shí)現(xiàn)文件傳輸功能。也可以加上數(shù)據(jù)庫(kù)的鏈接，同時(shí)制作一個(gè)注冊(cè)或登錄的頁(yè)面，即可實(shí)現(xiàn)登錄和注冊(cè)功能。附錄代碼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