无刷新聊天室的技术实现

先简单说明下

服务端

用程序生成需要的 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" onreadystatechange="Chat.CheckState()"></xml>
<ul id="ChatList" style="list-style: none;margin: 0px;">
<li>欢迎访问 SLIGHTBOY XML ChatRoom...<small>(SLIGHTBOY)</small></li>
</ul>
</body>
</html>