需求分析:
(1)成功登录后获取用户的ID号,根据选择的ID号,实现用户之间即时且无刷新的聊天功能;并且在不同用户使用同一页面时,区分显示的聊天内容。
(2)所有对话数据以XML格式保存在服务器端,在页面显示内容或进行对话时,将调用服务端提供的接口,由接口负责返回或处理XML数据。
功能实现:
<script src="JScript/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:13px}
h3{padding:0px;margin:8px 0px}
.iframe{width:260px;border:solid 1px #666}
.iframe .title{padding:5px;background-color:#eee}
.iframe .title .spnId{font-weight:bold;font-family:Arial}
.iframe .content{padding:8px;font-size:12px}
.iframe .content .lst{height:180px;border:solid 1px #ccc;padding:3px;
line-height:1.5em;overflow-y:scroll;}
.iframe .content .nav{color:#006EFE}
.iframe .content .nav .time,
.iframe .content .msg{margin-left:5px}
.iframe .content .txt{height:50px;width:238px;border:solid 1px #ccc}
.btn {border:#666 1px solid;padding:2px;width:80px;
filter:progid:DXImageTransform.Microsoft
.Gradient(GradientType=0,StartColorStr=#ffffff,
EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
$(function(){
//设置聊天时本人和对方ID
var $FramId = 1243242;
var $SendId = 1234560;
$("#spnSendId").html($SendId);
//定时获取与对方的聊天数据
setTimeout(showList($FromId,$SendId),3000);
$("#btnSend").click(function(){
$.ajax({
url:'Chat.ashx?s=' + $SendId + '&F=' + $FromId + '&c=' + txtA.value,
success:function(data){
if(data == 1){ //发送成功
showList($FromId,$SendId);
txtA.value = "";
}
}
});
});
//获取即时更新的聊天数据
function showList(f,s){
$.ajax({
url:'Xml/Chat.xml',
dataType:'xml',
success:function(data){
var $strUser = $(data).find("message");
var strHTML = "";//初始化保存内容变量
$strUser.each(function(){
//过滤用户数据
if (($(this).sttr("fId") == f &&
$(this).sttr("SId") == S) ||
($(this).sttr("fId") == S &&
$(this).sttr("SId") == f)) {
var strNav = $(this).attr("fId");
if (strNav == f) {
strNav = "我说";}
strHTML += '<div class=\"nav\">
<span>(' + strNav + ')<\/span>
<span class=\"time\">' +
$(this).children("dateTime").text() + '<\/span><\/div>';
strHTML += '<div class=\"msg\">'+
$(this).children("content").text() + '<\/div>';
}
});
//显示处理后的数据
$("#chatList").html(strHTML);
}
});
}
});
</script>
<div class="iframe">
<div class="title">
荣拓即时聊天与(<span id="spnSendId" class="spnId"></span>聊天中)
</div>
<div class="content">
<div id="chatList" class="lst"></div>
</div>
<div class=""content>
<textarea id="txtA" class="txt"></textarea>
<input id="btnSend" type="button"
value="发送" class="btn" />
</div>
</div>
创建一个名为“Chat.ashx”的服务端程序
<%@ WebHandler Language="#C" Class="Chat"%>
using System;
using System.Web;
using System.Xml;
public class Chat : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//定义变量接收页面传回的参数
string strContent = context.Request.QueryString["c"].ToString();
string strFromId = context.Request.QueryString["f"].ToString();
string strSendId = context.Request.QueryString["s"].ToString();
//定义并初始化回调变量值
int intSuccess = 0;
//格式化当前的时间
string strDate = DateTime.Now.ToString("HH:mm:ss");
//定义一个XML文档变量
XmlDocument xmlDoc = new XmlDocument();
try
{
//打开指定的XML文件
xmlDoc.Load(context.Server.MapPath("Xml/Chat.xml"));
//查到根节点元素
XmlNode root = xmlDoc.SelectSingleNode("chat");
//创建一个根节点下的子节点元素
XmlElement xmlE = xmlDoc.CreateElement("message");
//设置该元素的两个相关属性
XmlE.SelAttribute("fId",strFromId);
XmlE.SelAttribute("sId",strFromId);
//创建一个子节点下的元素
XmlElement xmlEd = xmlDoc.CreateElement("datetime");
//设置文本节点
xmlEd.InnerText = strDate;
//追加至上一级节点中
xmlE.AppendChild(xmlEd);
//创建一个子节点下的元素
XmlElement xmlEc = xmlDoc.CreateElement("content");
//设置节点文本
xmlEc.InnerText = strContent;
//追加至上一级节点中
xmlE.AppendChild(xmlEc);
//将整个节点追加至根节点中
root.AppendChild(xmlE);
//保存创建好的XML文件
xmlDoc.Save(context.Server.MapPath("Xml/Chat.xml"));
//设置操作返回值
intSuccess = 1;
}
catch (Exception ex)
{
throw ex;
}
context.Response.Write(intSuccess);
}
public bool IsReusable {
get{
return false;
}
}
}
代码分析:
在本示例中,为了实现即时聊天的功能,有两次与服务端进行交互的操作,第一次是隔时调用聊天数据,另外一处是当用户单击发送按钮时。
第一次的隔时调用聊天数据,通过setTime()方法,每隔3秒调用showList自定义函数实现的。在该函数中,通过调用jQuery框架中的$.ajax()方法,以XML方式向服务端请求一个数据,将对返回的数据进行格式设置和内容过滤,用于区分是对方还是自己应该显示的数据,最后将获取的过滤后的数据显示在页面的相应元素中。
用户在聊天文本框中输入内容后,单击“发送”按钮时,触发了与服务端的第二次数据交互,此次数据交互,同样是通过调用jQuery框架中的$.ajax()方法将聊天时的内容发送至服务端,服务端在接受传回的内容后,向XML文件中追加相应的记录。追加成功后,向页面返回一个为1的值,页面根据返回的该值,再次调用自定义的showList()函数,用于重新获取并在页面中即时显示聊天数据。