网页在线聊天-宁剑.doc

装订线 本科生学年论文（设计） 题目： 基于C/S模式的网页在线聊天室 学 院 计算机科学与技术学院 专 业 xxxxxxxxxxxxxxxx 学 号 xxxxxxxxxxx 姓 名 宁剑 指导教师 xxxxxx 20xx年x月xx日基于C/S模式的网页在线聊天室摘 要早期的应用软件系统大都采用C/S（客户机/服务器）结构，但是具有数据安全性低，数据不一致，实时性差，系统更新不便等劣势。随着网络信息化的不断发展，B/S（浏览器/服务器）结构得到了大规模的应用，成为未来软件发展的趋势。同时，随着Ajax技术的发展，能够让在线应用体验像本地应用一样流畅。这无疑又掀起了一场互联网革命。OSI是Open System Interconnection的缩写，意为开放式系统互联。国际标准化组织（ISO）制定了OSI模型。这个模型把网络通信的工作分为7层，分别是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。本次实验所做的基于C/S模式的网页在线聊天室运用了Ajax技术，可以实现异步传输和动态加载数据，同时用HTML+CSS+JavaScript的前端技术，加上PHP后端服务器脚本语言编写。虽然用到的东西很多，不过都十分简单，代码精简，易于读者理解软件的实现和网络信息的传递。关键词：C/S 异步 在线聊天室 OSI/RM目 录一、 实验目的 1二、 实验内容 1三、 实验分析 1四、 具体实现 3五、 心得体会 12六、 附录 12一、 实验目的为了进一步加强学生对于OSI网络模型结构的理解，同时希望加强学生的应用能力和自主创新能力。二、 实验内容制作一个在线聊天工具，实现方式不限，要求必须实现基本的聊天，理解信息在网络上的传输。三、 实验分析本次实验是制作一个聊天工具，目的在于加深对于网络结构模型的理解，但是该软件的实现方式不限。由于最近刚学了后端PHP语言和前端的JavaScript语言，同时又了解了Ajax的特性，于是结合自身所学，决定用一个简单网页去实现这个聊天室。Ajax工作流程示意图：Ajax传输数据方式示意图：浏览器服务器用户活动Ajax引擎活动异步请求异步响应AJAX即“Asynchronous JavaScript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。聊天室信息流程：服务器浏览器四、 具体实现异步发送请求是Ajax最为核心的内容，Ajax使用XMLHttpRequest对象异步发送请求，代码如下：function createXMLHttpRequest()if(window.XMLHttpRequest)XMLHttpReq = new XMLHttpRequest();else if(window.ActiveXObject)tryXMLHttpReq = new ActiveXObject(Msxml2.XMLHTTP);catch(e)tryXMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP);catch(e)else上面的程序可以在IE、Firefox、Opera等浏览器中创建XMLHttpRequest对象。由于XMLHttpRequest在不同的浏览器中实现方式的不同，因而在不同的浏览器中创建XMLHttpRequest的方式略有差异。一旦XMLHttpRequest对象创建成功，就可以使用XMLHttpRequest发送请求，通过JavaScript代码完成，代码如下：function sendRequest()var chatMsg = document.getElementById(chatMsg).value;var url = index.php;createXMLHttpRequest();XMLHttpReq.open(POST,url,true);XMLHttpReq.setRequestHeader(Content-Type,application/x-www-form-urlencoded);XMLHttpReq.onreadystatechange = processResponse;document.getElementById(chatMsg).value = ;XMLHttpReq.send(chatMsg= + chatMsg);XMLHttpRequest对象有以下几个内置方法：通过open方法取得与服务器连接，发送POST请求；通过setRequestHeader方法设置合适的请求头，让服务器识别所发送过来的数据；通过onreadystatechange方法指定回调函数，当信息从服务器传回时，将自动调用其指定的函数，相当于一个事件监听器；通过调用send方法发送请求。此外，发送信息时应该在按下“SEND”按钮或回车键时发送，故在标签中加入这样一行命令，加入后如右所示：。同时还要加入以下代码，用来处理按下回车键后的操作：function enterHandler(event)var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;if(keyCode = 13)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;self:$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（）函数，由于我们的聊天室不需要用户注册，故用其所在的IP地址来区别不同用户，代码如下：function getIP()if(getenv(HTTP_CLIENT_IP)&strcasecmp(getenv(HTTP_CLIENT_IP),unknown)$ip = getenv(HTTP_CLIENT_IP);else if(getenv(HTTP_X_FORWARDED_FOR)&strcasecmp(getenv(HTTP_X_FORWARDED_FOR),unknown)$ip = getenv(HTTP_X_FORWARDED_FOR);else if(getenv(REMOTE_ADDR)&strcasecmp(getenv(REMOTE_ADDR),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（）将服务器上的聊天信息回传给浏览器，代码如下：$chatMsg = $_POSTchatMsg;if($chatMsg != NULL)$user = getIP();Chatservice:add($user,$chatMsg);Chatservice:get();服务器响应后生成简单的文本，XMLHttpRequest对象有一个responseText属性可以获取服务器生成的文本。在解析服务器响应之前，必须判断服务器响应是否完成，以及响应是否正确。readyState等于4，表示服务器响应完成。status等于200，表示服务器响应正确，其等于404表明资源丢失，其等于500表示内部错误。之后便可将服务器返回的文本通过DOM方式插入到页面中去。代码如下：function processResponse()if(XMLHttpReq.readyState = 4)if(XMLHttpReq.status = 200)document.getElementById(chatArea).value = XMLHttpReq.responseText;document.getElementById(chatMsg).value = ;elsewindow.alert(RESPONSE ERROR!);虽然定义了发送请求的方法，但是根据聊天室的特点，即使本人没有参与聊天，也希望实时获得他人的聊天信息。所以必须定时自动发送空的请求来获取响应，从而及时获得更新的信息。自动发送空的请求与发送信息只有略微差异，代码如下：function sendEmptyRequest()var url = index.php;createXMLHttpRequest();XMLHttpReq.open(POST,url,true);XMLHttpReq.setRequestHeader(Content-Type,application/x-www-form-urlencoded);XMLHttpReq.onreadystatechange = processResponse;XMLHttpReq.send(null);setTimeout(sendEmptyResquest(),800);上面代码中的setTimeout函数是JavaScript的计时器函数，它将会每隔0.8秒重复执行。由于自动发送请求应该在进入聊天室之后就立即执行。所以要在HTML代码的标签中加入这样一行命令：测试部分：1、聊天室界面，输入“你好！”并点击SEND按钮：2、输入“我是2012436109”并回车：3、输入“这是在线聊天室的界面，昵称为我的本机地址”并回车：4、这是服务器自动存储的聊天记录（位于ChatRoom文件夹内）：五、 心得体会通过一个学期对计算机网络的学习和实践，我们收获很多，不仅在知识层面上有所提高，而且了解了开发一个在线聊天室的步骤。从对网络层次模型研究开始，到完成软件的设计，依次经历了实验分析，总体设计，详细设计，实现，测试及维护等过程，加深了对知识的理解。在这里要感谢xxxx老师的辛勤付出。在制作这个聊天室的过程中，花费的时间并不是很多。主要是为了简单快速的实现其功能，所以聊天室的界面较为简陋，功能较为单一。其实这些都可以在此基础上进行扩充，如加入jQuery库的文件传输函数，即可实现文件传输功能。也可以加上数据库的链接，同时制作一个注册或登录的页面，即可实现登录和注册功能。六、 附录代码chat.html：ChatRoomvar input = document.getElementById(charMsg);input.focus();var XMLHttpReq;function createXMLHttpRequest()if(window.XMLHttpRequest)XMLHttpReq = new XMLHttpRequest();else if(window.ActiveXObject)tryXMLHttpReq = new ActiveXObject(Msxml2.XMLHTTP);catch(e)tryXMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP);catch(e)elsefunction processResponse()if(XMLHttpReq.readyState = 4)if(XMLHttpReq.status = 200)document.getElementById(chatArea).value = XMLHttpReq.responseText;document.getElementById(chatMsg).value = ;elsewindow.alert(RESPONSE ERROR!);function sendRequest()var chatMsg = document.getElementById(chatMsg).value;var url = index.php;createXMLHttpRequest();XMLHttpReq.open(POST,url,true);XMLHttpReq.setRequestHeader(Content-Type,application/x-www-form-urlencoded);XMLHttpReq.onreadystatechange = processResponse;document.getElementById(chatMsg).value = ;XMLHttpReq.send(chatMsg= + chatMsg);function sendEmptyRequest()var url = index.php;createXMLHttpRequest();XMLHttpReq.open(POST,url,true);XMLHttpReq.setRequestHeader(Content-