计算机网络学年论文--基于C_S模式的网页在线聊天室

1、装订线 本科生学年论文设计 题目： 基于C/S模式的网页在线聊天室 学 院 计算机科学与技术学院 专 业 计算机科学与技术 学 号 xxxxxxxxxxx 姓 名 宁剑 指导教师 xxxxxx 20 xx年x月xx日基于C/S模式的网页在线聊天室摘 要早期的应用软件系统大都采用C/S客户机/效劳器结构，但是具有数据平安性低，数据不一致，实时性差，系统更新不便等劣势。随着网络信息化的不断开展，B/S浏览器/效劳器结构得到了大规模的应用，成为未来软件开展的趋势。同时，随着Ajax技术的开展，能够让在线应用体验像本地应用一样流畅。这无疑又掀起了一场互联网革命。OSI是Open System Inte

2、rconnection的缩写，意为开放式系统互联。国际标准化组织ISO制定了OSI模型。这个模型把网络通信的工作分为7层，分别是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。本次实验所做的基于C/S模式的网页在线聊天室运用了Ajax技术，可以实现异步传输和动态加载数据，同时用HTML+CSS+JavaScript的前端技术，加上PHP后端效劳器脚本语言编写。虽然用到的东西很多，不过都十分简单，代码精简，易于读者理解软件的实现和网络信息的传递。关键词：C/S 异步 在线聊天室 OSI/RM目 录实验目的 1实验内容 1实验分析 1具体实现 3心得体会 12附录 12实验目的为了进一

3、步加强学生对于OSI网络模型结构的理解，同时希望加强学生的应用能力和自主创新能力。实验内容制作一个在线聊天工具，实现方式不限，要求必须实现根本的聊天，理解信息在网络上的传输。实验分析本次实验是制作一个聊天工具，目的在于加深对于网络结构模型的理解，但是该软件的实现方式不限。由于最近刚学了后端PHP语言和前端的JavaScript语言，同时又了解了Ajax的特性，于是结合自身所学，决定用一个简单网页去实现这个聊天室。Ajax工作流程示意图：Ajax传输数据方式示意图：浏览器效劳器用户活动Ajax引擎活动异步请求异步响应AJAX即“Asynchronous JavaScript And XML异步J

4、avaScript和XML，是指一种创立交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML标准通用标记语言的子集。AJAX 是一种用于创立快速动态网页的技术。通过在后台与效劳器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某局部进行更新。传统的网页不使用 AJAX如果需要更新内容，必须重载整个网页页面。Ajax 的核心是 JavaScript 对象 XML Request。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XML Request 使您可以使用 J

5、avaScript 向效劳器提出请求并处理响应，而不阻塞用户。聊天室信息流程：效劳器浏览器具体实现异步发送请求是Ajax最为核心的内容，Ajax使用XML Request对象异步发送请求，代码如下：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等浏览器中创立XML Request对象。由于XML Request在不同的浏览器中实现方式的不同，因而在不同的浏览器中创立XML Request的方式略有差异。一旦XML Request对象创立成功，就可以使用XML Request发送请求，通过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对象有以下几个内置方法：通过open方法取得与效劳器连接，发送POST请求；通过setRequestHeader方法设置适宜的请求头，让

8、效劳器识别所发送过来的数据；通过onreadystatechange方法指定回调函数，当信息从效劳器传回时，将自动调用其指定的函数，相当于一个事件监听器；通过调用send方法发送请求。此外，发送信息时应该在按下“SEND按钮或回车键时发送，故在标签中参加这样一行命令，参加后如右所示：。同时还要参加以下代码，用来处理按下回车键后的操作：function enterHandler(event)var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;if(keyCode = 13

9、)sendRequest(); 以下代码是在效劳器端定义了一个Chatservice类，包含add和get两个静态方法。add方法用于将发送信息的用户IP及其发送的信息存储到本地的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);以下函数是定义在效劳器端用于获取用户IP地址的getIP函数，由于我们的聊天室不需

11、要用户注册，故用其所在的IP地址来区别不同用户，代码如下：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;以下代码用来调用已经编写好的函数，首先通过全局变量数组POST来获取浏览器发送来的信息。假设信息不为空，那么获取用户的IP地址，并将其和发送来的信息一起存储下来。之后再调用静态函数get将效劳器上的聊天信息回传给浏览器，代码如下

13、：$chatMsg = $_POSTchatMsg;if($chatMsg != NULL)$user = getIP();Chatservice:add($user,$chatMsg);Chatservice:get();效劳器响应后生成简单的文本，XML Request对象有一个responseText属性可以获取效劳器生成的文本。在解析效劳器响应之前，必须判断效劳器响应是否完成，以及响应是否正确。readyState等于4，表示效劳器响应完成。status等于200，表示效劳器响应正确，其等于404说明资源丧失，其等于500表示内部错误。之后便可将效劳器返回的文本通过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!);虽然定义了发送请求的方法，但是根据聊天室的特点，即使本人没有参与聊天，也希望实时获得他人的聊天信息。所以必须定时自动发送空的请求来获取响应，从而及时获得更

15、新的信息。自动发送空的请求与发送信息只有略微差异，代码如下：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函数是JavaScript的计时器函数，它将会每隔0.8秒重复执行。由于自动发送请求应该在进入聊天室之后就立即执行。所以要在HTML代码的标签中参加这样一行命令：测试局部：1、聊天室界面，输入“你好！并点击SEND按钮：2、输入“我是2012436109”并回车：3、输入“这是在线聊天室的界面，昵称为我的本机地址并回车：4、这是效劳器自动存储的聊天记录位于ChatRoom文件夹内：心得体会通过一个学期对计算机网络的学习和实践，我们收获很多，不仅在知识层面上有所提高，而且了解了开发一个在线聊天室的步骤。从对网络层次模型研究开始，到完成软件的设计，依次经历了实验分析，总

17、体设计，详细设计，实现，测试及维护等过程，加深了对知识的理解。在这里要感谢xxxxxx老师的辛勤付出。在制作这个聊天室的过程中，花费的时间并不是很多。主要是为了简单快速的实现其功能，所以聊天室的界面较为简陋，功能较为单一。其实这些都可以在此根底上进行扩充，如参加jQuery库的文件传输函数，即可实现文件传输功能。也可以加上数据库的链接，同时制作一个注册或登录的页面，即可实现登录和注册功能。附录代码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