《计算机网络学年论文基于CS模式的网页在线聊天室》由会员分享，可在线阅读，更多相关《计算机网络学年论文基于CS模式的网页在线聊天室（20页珍藏版）》请在金锄头文库上搜索。
1、装订线 本科生学年论文（设计） 题目： 基于C/S模式的网页在线聊天室 学 院 计算机科学与技术学院 专 业 计算机科学与技术 学 号 xxxxxxxxxxx 姓 名 宁剑 指导教师 xxxxxx 20xx年x月xx日基于C/S模式的网页在线聊天室摘 要早期的应用软件系统大都采用C/S（客户机/服务器）结构，但是具有数据安全性低，数据不一致，实时性差，系统更新不便等劣势。随着网络信息化的不断发展，B/S（浏览器/服务器）结构得到了大规模的应用，成为未来软件发展的趋势。同时，随着Ajax技术的发展，能够让在线应用体验像本地应用一样流畅。这无疑又掀起了一场互联网革命。OSI是Open System
2、 Interconnection的缩写，意为开放式系统互联。国际标准化组织（ISO）制定了OSI模型。这个模型把网络通信的工作分为7层，分别是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。本次实验所做的基于C/S模式的网页在线聊天室运用了Ajax技术，可以实现异步传输和动态加载数据，同时用HTML+CSS+JavaScript的前端技术，加上PHP后端服务器脚本语言编写。虽然用到的东西很多，不过都十分简单，代码精简，易于读者理解软件的实现和网络信息的传递。关键词：C/S 异步 在线聊天室 OSI/RM目 录一、 实验目的 1二、 实验内容 1三、 实验分析 1四、 具体实现 3五
3、、 心得体会 12六、 附录 12一、 实验目的为了进一步加强学生对于OSI网络模型结构的理解，同时希望加强学生的应用能力和自主创新能力。二、 实验内容制作一个在线聊天工具，实现方式不限，要求必须实现基本的聊天，理解信息在网络上的传输。三、 实验分析本次实验是制作一个聊天工具，目的在于加深对于网络结构模型的理解，但是该软件的实现方式不限。由于最近刚学了后端PHP语言和前端的JavaScript语言，同时又了解了Ajax的特性，于是结合自身所学，决定用一个简单网页去实现这个聊天室。Ajax工作流程示意图：Ajax传输数据方式示意图：浏览器服务器用户活动Ajax引擎活动异步请求异步响应AJAX即“
4、Asynchronous JavaScript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中
5、首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。聊天室信息流程：服务器浏览器四、 具体实现异步发送请求是Ajax最为核心的内容，Ajax使用XMLHttpRequest对象异步发送请求，代码如下：function createXMLHttpRequest()if(window.XMLHttpRequest)XMLHttpReq = new XMLHttpRequest();else if(window.ActiveXObject)tryXMLHttpReq = new ActiveXOb
6、ject(Msxml2.XMLHTTP);catch(e)tryXMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP);catch(e)else上面的程序可以在IE、Firefox、Opera等浏览器中创建XMLHttpRequest对象。由于XMLHttpRequest在不同的浏览器中实现方式的不同，因而在不同的浏览器中创建XMLHttpRequest的方式略有差异。一旦XMLHttpRequest对象创建成功，就可以使用XMLHttpRequest发送请求，通过JavaScript代码完成，代码如下：function sendRequest()v
7、ar 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 = ;XMLHttpR
8、eq.send(chatMsg= + chatMsg);XMLHttpRequest对象有以下几个内置方法：通过open方法取得与服务器连接，发送POST请求；通过setRequestHeader方法设置合适的请求头，让服务器识别所发送过来的数据；通过onreadystatechange方法指定回调函数，当信息从服务器传回时，将自动调用其指定的函数，相当于一个事件监听器；通过调用send方法发送请求。此外，发送信息时应该在按下“SEND”按钮或回车键时发送，故在标签中加入这样一行命令，加入后如右所示：。同时还要加入以下代码，用来处理按下回车键后的操作：function enterHandler
9、(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 st
10、atic $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
11、);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)&
12、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)
