计算机网络学年论文宁剑.docx
- 文档编号:9852807
- 上传时间:2023-05-21
- 格式:DOCX
- 页数:24
- 大小:578.40KB
计算机网络学年论文宁剑.docx
《计算机网络学年论文宁剑.docx》由会员分享,可在线阅读,更多相关《计算机网络学年论文宁剑.docx(24页珍藏版)》请在冰点文库上搜索。
计算机网络学年论文宁剑
本科生学年论文(设计)
题目:
基于C/S模式的网页在线聊天室
学院计算机科学与技术学院
专业计算机科学与技术
学号xxxxxxxxxxx
姓名宁剑
指导教师xxxxxx
20xx年x月xx日
基于C/S模式的网页在线聊天室
摘要
早期的应用软件系统大都采用C/S(客户机/服务器)结构,但是具有数据安全性低,数据不一致,实时性差,系统更新不便等劣势。
随着网络信息化的不断发展,B/S(浏览器/服务器)结构得到了大规模的应用,成为未来软件发展的趋势。
同时,随着Ajax技术的发展,能够让在线应用体验像本地应用一样流畅。
这无疑又掀起了一场互联网革命。
OSI是OpenSystemInterconnection的缩写,意为开放式系统互联。
国际标准化组织(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即“AsynchronousJavaScriptAndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX=异步JavaScript和XML(标准通用标记语言的子集)。
AJAX是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页页面。
Ajax的核心是JavaScript对象XMLHttpRequest。
该对象在InternetExplorer5中首次引入,它是一种支持异步请求的技术。
简而言之,XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
聊天室信息流程:
四、具体实现
异步发送请求是Ajax最为核心的内容,Ajax使用XMLHttpRequest对象异步发送请求,代码如下:
functioncreateXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
XMLHttpReq=newXMLHttpRequest();
}
elseif(window.ActiveXObject)
{
try
{
XMLHttpReq=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
}
}
}
else
{
}
}
上面的程序可以在IE、Firefox、Opera等浏览器中创建XMLHttpRequest对象。
由于XMLHttpRequest在不同的浏览器中实现方式的不同,因而在不同的浏览器中创建XMLHttpRequest的方式略有差异。
一旦XMLHttpRequest对象创建成功,就可以使用XMLHttpRequest发送请求,通过JavaScript代码完成,代码如下:
functionsendRequest()
{
varchatMsg=document.getElementById('chatMsg').value;
varurl="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”按钮或回车键时发送,故在
sendRequest()"/>。 同时还要加入以下代码,用来处理按下回车键后的操作: functionenterHandler(event) { varkeyCode=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文件中逐行读取出来,并回传给浏览器,代码如下: classChatservice { privatestatic$chatString=""; privatestatic$num=0; staticfunctionadd($user,$chatMsg) { self: : $chatString="$user: $chatMsg\r\n"; self: : $num=strlen(self: : $chatString); @$fp=fopen("dialog.txt",'a'); if(! $fp) { echo"Can'twriteit! "; exit; } fwrite($fp,self: : $chatString); fclose($fp); } staticfunctionget() { @$fp=fopen("dialog.txt",'r'); if(! $fp) { echo"Can'treadit! "; exit; } while(! feof($fp)) { echofgets($fp); } fclose($fp); } } 以下函数是定义在服务器端用于获取用户IP地址的getIP()函数,由于我们的聊天室不需要用户注册,故用其所在的IP地址来区别不同用户,代码如下: functiongetIP() { if(getenv("HTTP_CLIENT_IP")&&strcasecmp(getenv("HTTP_CLIENT_IP"),"unknown")) { $ip=getenv("HTTP_CLIENT_IP"); } elseif(getenv("HTTP_X_FORWARDED_FOR")&&strcasecmp(getenv("HTTP_X_FORWARDED_FOR"),"unknown")) { $ip=getenv("HTTP_X_FORWARDED_FOR"); } elseif(getenv("REMOTE_ADDR")&&strcasecmp(getenv("REMOTE_ADDR"),"unknown")) { $ip=getenv("REMOTE_ADDR"); } elseif(isset($_SERVER['REMOTE_ADDR'])&&$_SERVER['REMOTE_ADDR']&&strcasecmp($_SERVER['REMOTE_ADDR'],"unknown")) { $ip=$_SERVER['REMOTE_ADDR']; } else { $ip="unknown"; } return$ip; } 以下代码用来调用已经编写好的函数,首先通过全局变量数组[POST]来获取浏览器发送来的信息。 若信息不为空,则获取用户的IP地址,并将其和发送来的信息一起存储下来。 之后再调用静态函数get()将服务器上的聊天信息回传给浏览器,代码如下: $chatMsg=$_POST['chatMsg']; if($chatMsg! =NULL) { $user=getIP(); Chatservice: : add($user,$chatMsg); } Chatservice: : get(); 服务器响应后生成简单的文本,XMLHttpRequest对象有一个responseText属性可以获取服务器生成的文本。 在解析服务器响应之前,必须判断服务器响应是否完成,以及响应是否正确。 readyState等于4,表示服务器响应完成。 status等于200,表示服务器响应正确,其等于404表明资源丢失,其等于500表示内部错误。 之后便可将服务器返回的文本通过DOM方式插入到页面中去。 代码如下: functionprocessResponse() { if(XMLHttpReq.readyState==4) { if(XMLHttpReq.status==200) { document.getElementById("chatArea").value=XMLHttpReq.responseText; document.getElementById("chatMsg").value=""; } else { window.alert("RESPONSEERROR! "); } } } 虽然定义了发送请求的方法,但是根据聊天室的特点,即使本人没有参与聊天,也希望实时获得他人的聊天信息。 所以必须定时自动发送空的请求来获取响应,从而及时获得更新的信息。 自动发送空的请求与发送信息只有略微差异,代码如下: functionsendEmptyRequest() { varurl="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文件夹内):
五、心得体会
通过一个学期对计算机网络的学习和实践,我们收获很多,不仅在知识层面上有所提高,而且了解了开发一个在线聊天室的步骤。
从对网络层次模型研究开始,到完成软件的设计,依次经历了实验分析,总体设计,详细设计,实现,测试及维护等过程,加深了对知识的理解。
在这里要感谢xxxxxx老师的辛勤付出。
在制作这个聊天室的过程中,花费的时间并不是很多。
主要是为了简单快速的实现其功能,所以聊天室的界面较为简陋,功能较为单一。
其实这些都可以在此基础上进行扩充,如加入jQuery库的文件传输函数,即可实现文件传输功能。
也可以加上数据库的链接,同时制作一个注册或登录的页面,即可实现登录和注册功能。
六、附录
代码chat.html:
DOCTYPEhtml>
varinput=document.getElementById("charMsg");
input.focus();
varXMLHttpReq;
functioncreateXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
XMLHttpReq=newXMLHttpRequest();
}
elseif(window.ActiveXObject)
{
try
{
XMLHttpReq=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
}
}
}
else
{
}
}
functionprocessResponse()
{
if(XMLHttpReq.readyState==4)
{
if(XMLHttpReq.status==200)
{
document.getElementById("chatArea").value=XMLHttpReq.responseText;
document.getElementById("chatMsg").value="";
}
else
{
window.alert("RESPONSEERROR!
");
}
}
}
functionsendRequest()
{
varchatMsg=document.getElementById('chatMsg').value;
varurl="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);
}
functionsendEmptyRequest()
{
varurl="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);
}
functionenterHandler(event)
{
varkeyCode=event.keyCode?
event.keyCode:
event.which?
event.which:
event.charCode;
if(keyCode==13)
{
sendRequest();
}
}//JavaScriptDocument
body{
background-attachment:
fixed;
background-image:
url(background.jpg);
background-repeat:
no-repeat;
}
#chatArea{
float:
left;
height:
350px;
width:
750px;
margin-bottom:
20px;
font-size:
18px;
}
#chatMsg{
height:
100px;
width:
600px;
float:
left;
font-size:
24px;
}
#buttonStyle{
float:
left;
position:
absolute;
left:
640px;
top:
378px;
}
sendRequest()"/>
代码index.php:
php
classChatservice
{
privatestatic$chatString="";
privatestatic$num=0;
staticfunctionadd($user,$chatMsg)
{
self:
:
$chatString="$user:
$chatMsg\r\n";
self:
:
$num=strlen(self:
:
$chatString);
@$fp=fopen("dialog.txt",'a');
if(!
$fp)
{
echo"Can'twriteit!
";
exit;
}
fwrite($fp,self:
:
$chatString);
fclose($fp);
}
staticfunctionget()
{
@$fp=fopen("dialog.txt",'r');
if(!
$fp)
{
echo"Can'treadit!
";
exit;
}
while(!
feof($fp))
{
echofgets($fp);
}
fclose($fp);
}
}
functiongetIP()
{
if(getenv("HTTP_CLIENT_IP")&&strcasecmp(getenv("HTTP_CLIENT_IP"),"unknown"))
{
$ip=getenv("HTTP_CLIENT_IP");
}
elseif(getenv("HTTP_X_FORWARDED_FOR")&&strcasecmp(getenv("HTTP_X_FORWARDED_FOR"),"unknown"))
{
$ip=getenv("HTTP_X_FORWARDED_FOR");
}
elseif(getenv("REMOTE_ADDR")&&strcasecmp(getenv("REMOTE_ADDR"),"unknown"))
{
$ip=getenv("REMOTE_ADDR");
}
elseif(isset($_SERVER['REMOTE_ADDR'])&&$_SERVER['REMOTE_ADDR']&&strcasecmp($_SERVER['REMOTE_ADDR'],"unknown"))
{
$ip=$_
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 计算机网络 学年 论文