无刷新聊天室的技术实现

火之雄狮

无刷新聊天室的技术实现

先简单说明下
服务端
用程序生成需要的 XML 文件
客户端
利用 XMLHTTP 或者 DSO(注意状态)  定时刷新需要的数据
相对来说 DSO 可以映射成 recordset 操作比较简单
以下是我简单写着玩的东西 不是完整部分 而且十分简陋
只是代码片段 但作为技术参考已经足够
需要 MSXML 4.0
服务端 我写了两个构造函数 分别是 聊天内容 聊天用户


<script language="JScript" runat="server">
function SLIGHTBOYChat()
{
this.ID;
this.XMLDOMElement = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.4.0")
this.Add = function(Name, Content, Append)
{
  var root = this.XMLDOMElement.documentElement;
  var newItem = this.XMLDOMElement.createElement("Item");
  var newItemName = this.XMLDOMElement.createElement("Name");
  var newItemNameValue = this.XMLDOMElement.createCDATASection(Name);
  newItemName.appendChild(newItemNameValue)
  var newItemContent = this.XMLDOMElement.createElement("Content");
  var newItemContentValue = this.XMLDOMElement.createCDATASection(Content);
  newItemContent.appendChild(newItemContentValue)
  var newItemAppend = this.XMLDOMElement.createElement("Append");
  newItemAppend.text = Append;
  newItem.appendChild(newItemName);
  newItem.appendChild(newItemContent);
  newItem.appendChild(newItemAppend);
  if ( root.childNodes.length > 10 )
  {
   root.removeChild(root.firstChild)
  }
  root.appendChild(newItem)
}
this.Save = function()
{
  Application("ChatContent") = this.XMLDOMElement.xml;
}
this.GUID = function(PushGUID)
{
  if ( PushGUID.Count > 0 )
  {
   this.ID = PushGUID;
  }
  else
  {
   this.ID = "";
  }
}
this.Xml = function()
{
  if ( this.ID != "" )
  {
   var XMLDOMElementString = "<?xml version=\"1.0\" encoding=\"gb2312\"?><Chat>";
   var items = Chat.XMLDOMElement.selectNodes("//Item[Append > "+ this.ID +"]")
   for (var item = items.nextNode(); item; item = items.nextNode())
   {
    XMLDOMElementString += item.xml;
   }
   XMLDOMElementString += "</Chat>";
   if ( items.length > 0 )
   {
    return XMLDOMElementString;
   }
   else
   {
    return;
   }
  }
  else
  {
   return this.XMLDOMElement.xml.replace("<?xml version=\"1.0\"?>","<?xml version=\"1.0\" encoding=\"gb2312\"?>");
  }
  
}
this.Load = function()
{
  if ( Application("ChatContent") == "" | typeof(Application("ChatContent")) == "undefined" )
  {
   Application("ChatContent") = "<?xml version=\"1.0\" encoding=\"GB2312\"?><Chat><Item><Name>slightboy</Name><Content>欢迎 ^^</Content><Append>"+ new Date().getTime() +"</Append></Item></Chat>";
  }
  this.XMLDOMElement.loadXML(Application("ChatContent"));
}
this.Empty = function()

{
  Application("ChatContent") = "<?xml version=\"1.0\" encoding=\"GB2312\"?><Chat><Item><Name>slightboy</Name><Content>欢迎 ^^</Content><Append>"+ new Date().getTime() +"</Append></Item></Chat>";
}
this.Load();
}

function SLIGHTBOYChatList()
{
this.XMLDOMElement = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.4.0")
this.Add = function(Name, Level)
{
  var root = this.XMLDOMElement.documentElement;
  var newItem = this.XMLDOMElement.createElement("Item");
  var newItemName = this.XMLDOMElement.createElement("Name");
  var newItemNameValue = this.XMLDOMElement.createCDATASection(Name);
  newItemName.appendChild(newItemNameValue)
  var newItemLevel = this.XMLDOMElement.createElement("Level");
  var newItemLevelValue = this.XMLDOMElement.createCDATASection(Level);
  newItemLevel.appendChild(newItemLevelValue)
  var newItemAppend = this.XMLDOMElement.createElement("Append");
  newItemAppend.text = Append;
  newItem.appendChild(newItemName);
  newItem.appendChild(newItemLevel);
  root.appendChild(newItem)
}
this.Save = function()
{
  Application("ChatUser") = this.XMLDOMElement.xml;
}
this.Xml = function()
{
  return this.XMLDOMElement.xml.replace("<?xml version=\"1.0\"?>","<?xml version=\"1.0\" encoding=\"gb2312\"?>");
}
this.Load = function()
{
  if ( Application("ChatUser") == "" | typeof(Application("ChatUser")) == "undefined" )
  {
   Application("ChatContent") = "<?xml version=\"1.0\" encoding=\"GB2312\"?><Chat></Chat>";
  }
  this.XMLDOMElement.loadXML(Application("ChatUser"));
}
this.Remove = function()
{
  var RemoveTimer = new Date().getTime();
  RemoveTimer -= 300000;
  var root = this.XMLDOMElement.documentElement;
  var RemoveNodes = root.selectNodes("//Item[Append < "+ RemoveTimer +"]");
  while (RemoveNodes.peekNode() != null)
  {
   RemoveNodes.removeNext();
  }
}
this.Load();
}
</script>


客户端聊天内容显示页面


<html>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<script language="JavaScript">
function SLIGHTBOYChat()
{
this.GUID = "";
this.recordset;
var Timer = new Date();
this.CheckState = function()
{
  if ( xmlChat.readyState == "complete" )
  {
   this.recordset = xmlChat.recordset;
   this.Item();
  }
}
this.Item = function()
{
  try
  {
   var PushString;
   this.recordset.MoveLast();
   if ( this.recordset("Append").value !=  this.GUID)
   {
    this.GUID = this.recordset("Append").value;
   }
   else
   {
    this.recordset = null;
    return;
   }
   this.recordset.MoveFirst();
   while (!this.recordset.EOF)
   {
    Timer.setTime(this.recordset("Append").value)
    PushString = this.recordset("Name").value +" 说: "+ this.recordset("Content").value +" <small>"+ Timer.toLocaleString() +"</small>";
    this.Push(PushString);
    this.recordset.moveNext();
   }
   this.recordset = null;
  }
  catch(e)
  {
   return;
  }

}
this.Push = function(PushString)
{
  var ChatItem = document.createElement("li");
  ChatItem.innerHTML = PushString;
  ChatList.insertAdjacentElement("afterBegin",ChatItem);
}
this.Load = function()
{
  xmlChat.src = "background.asp?GUID="+ this.GUID;
}
this.Remove = function()
{
  try
  {
   var Removelength = ChatList.children.length;
   for (var i = 0; i < Removelength; i++)
   {
    ChatList.removeChild(ChatList.children(0));
   }
  }
  catch(e)
  {
  }
}
}

var Chat = new SLIGHTBOYChat();
window.setInterval("Chat.Load()", 5000);
</script>
</head>
<body>
<xml id="xmlChat" src="background.asp" ></xml>
<ul id="ChatList" style="list-style: none;margin: 0px;">
<li>欢迎访问 SLIGHTBOY XML ChatRoom...<small>(SLIGHTBOY)</small></li>
</ul>
</body>
</html>




聊天市的一些代码    分享一下啊