网页在线聊天宁剑讲解.docx

网页在线聊天宁剑讲解.docx

《网页在线聊天宁剑讲解.docx》由会员分享，可在线阅读，更多相关《网页在线聊天宁剑讲解.docx（24页珍藏版）》请在冰豆网上搜索。

网页在线聊天宁剑讲解

本科生学年论文（设计）

题目：

基于C/S模式的网页在线聊天室

学院计算机科学与技术学院

专业xxxxxxxxxxxxxxxx

学号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文件夹内）：

五、心得体会

通过一个学期对计算机网络的学习和实践，我们收获很多，不仅在知识层面上有所提高，而且了解了开发一个在线聊天室的步骤。

从对网络层次模型研究开始，到完成软件的设计，依次经历了实验分析，总体设计，详细设计，实现，测试及维护等过程，加深了对知识的理解。

在这里要感谢xxxx老师的辛勤付出。

在制作这个聊天室的过程中，花费的时间并不是很多。

主要是为了简单快速的实现其功能，所以聊天室的界面较为简陋，功能较为单一。

其实这些都可以在此基础上进行扩充，如加入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（）"/>