新信息到来提醒的解决方案

大家都知道要在一个Asp.net应用程序中，实现即时信息提醒比较麻烦，在Asp.net不能使用Timer的方式来完成帮每个用户的定时访问数据库的操作，只能利用javascript来的SetInterval方法来完成用户的定时刷新页面操作，但存在的问题是页面一直在不断的刷新。在CSDN上的一篇文章（http://dev.csdn.net/article/63/63930.shtm）给了一个很好的解决方案。利用javascript + WebService ，利用javascript去访问WebService。唯的麻烦之处在于要自己写SOAP消息完成访问访问WebService。下面就来看看具体的实现过程。

一、创建一个WebService，在我的WebService中有这样(HasNewMessage,原型是public string HasNewMessage(string userID,out int mailCount,out int pendingCount))一个方法，用IE访问WebService调用这个方法会有下面的一串SOAP请求消息格式.

POST /WebService/NewsService.asmx HTTP/1.1

Host: 192.168.7.108

Content-Type: text/xml; charset=utf-8

Content-Length: length

SOAPAction: 'http://tempuri.org/HasNewMessage'

<?xml version='1.0' encoding='utf-8'?>

<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>

<soap:Body>

<userID>string</userID>

</HasNewMessage>

</soap:Body>

</soap:Envelope>

我们就可以根据它来编写我们的SOAP消息了。WebService将会以下面的格式返回我们的请求。

HTTP/1.1 200 OK

Content-Type: text/xml; charset=utf-8

Content-Length: length

<?xml version='1.0' encoding='utf-8'?>

<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>

<soap:Body>

<HasNewMessageResult>string</HasNewMessageResult>

</HasNewMessageResponse>

</soap:Body>

</soap:Envelope>

在这个函数中，我有三个输出，其实mailCount,pendingCount是输出参数.在程序中我可以根据这个格式来分解出我们所获得的输出。

二、用javascript访问WebService

function HasNewMail()

{

var userID = '3011';

var myService = 'http://192.168.7.108/WebService/NewsService.asmx' ;

var myMethod = 'http://tempuri.org/HasNewMessage';

var requestHttp = new ActiveXObject('Microsoft.XMLHTTP');

var requestBody = '';

requestBody = requestBody + '<?xml version=\'1.0\' encoding=\'utf-8\'?>\n' ;

requestBody = requestBody + '<soap:Envelope ';

requestBody = requestBody + 'xmlns:xsi=\'http://www.w3.org/2001/XMLSchema-instance\' ';

requestBody = requestBody + 'xmlns:xsd=\'http://www.w3.org/2001/XMLSchema\' ' ;

requestBody = requestBody + 'xmlns:soap=\'http://schemas.xmlsoap.org/soap/envelope/\'>\n' ;

requestBody = requestBody + ' <soap:Body>\n' ;

requestBody = requestBody + ' <HasNewMessage xmlns=\'http://tempuri.org/\'>\n' ;

requestBody = requestBody + ' <userID>' + userID + '</userID>\n';

requestBody = requestBody + ' </HasNewMessage>\n';

requestBody = requestBody + ' </soap:Body>\n';

requestBody = requestBody + '</soap:Envelope>';

requestHttp.Open('POST',myService,false);

requestHttp.SetRequestHeader('Content-Type','text/xml;charset=gb2312');

requestHttp.SetRequestHeader('SOAPAction',myMethod);

requestHttp.Send(requestBody);

var result = requestHttp.ResponseXML;

var pos1 = result .xml.indexOf('<HasNewMessageResult>');

var pos2 = result .xml.indexOf('</HasNewMessageResult>');

var len = pos2 - pos1 - ('<HasNewMessageResult>').length;

var userName = result.xml.substr(pos1 + ('<HasNewMessageResult>').length , len);

pos1 = result.xml.indexOf('<mailCount>');

pos2 = result.xml.indexOf('</mailCount>');

len = pos2 - pos1 - ('<mailCount>').length;

var mailCount = result.xml.substr(pos1 + ('<mailCount>').length , len);

pos1 = result.xml.indexOf('<pendingCount>');

pos2 = result.xml.indexOf('</pendingCount>');

len = pos2 - pos1 - ('<pendingCount>').length;

var pendingCount= result.xml.substr(pos1 + ('<pendingCount>').length , len);

var allCount = parseInt(mailCount) + parseInt(pendingCount);

//弹出显示

if(allCount > 0)

PopUpNotify(userName,allCount,mailCount,pendingCount)

}

这个函数首先创建一个ActiveXObj利用它来完成对WebService的访问。然后根据上面介绍的格式创建SOAP消息体，与WebService交互。最后对所得到的WebService返回消息进行分解，得出所需的数据。

三、Pop窗口的弹出。Pop窗口的弹出有几种方法，好像也有这方面的专门控件，由于用javascript来完成，选用层的移动应用或PopupObject来实现，它可以让显示信息自下而上移动，但在测试过程中发现直接用层会被框架遮住。所以选用PopupObject，但存在一个问题就是用户不能控制这个PopupObject的关闭，它的关闭方式是在父窗体获得焦点以后就会自动关闭，在层实体的”self.close()”，不能很好的工作，它会弹出确认关闭窗口，随后自己就关闭了。以下是弹出函数和层实体(复制别人用层写出的弹出消息的一个层实体，把它作为PopupObject的innerHTML也能很的显示，真好！)。

var oPopup = window.createPopup();

function PopUpNotify(userName,allCount,mailCount,pendigCount)

{

var oPopupBody = oPopup.document.body;

var HTMLBody = eMeng.innerHTML;

HTMLBody = HTMLBody.replace(/userName/g,userName);

HTMLBody = HTMLBody.replace(/allCount/g,allCount);

HTMLBody = HTMLBody.replace(/mailCount/g,mailCount);

HTMLBody = HTMLBody.replace(/pendingCount/g,pendigCount);

oPopupBody.innerHTML = HTMLBody;

oPopup.show(screen.availWidth ,screen.Height - 145,180,116);

var realHeight = oPopupBody.scrollHeight;

oPopup.hide();

// Shows the actual popup object with correct height.

oPopup.show(screen.availWidth,screen.Height - 145,180,116);

window.setTimeout('oPopup.hide()',5000);

}

层实体如下:

<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing='0'

cellPadding='0' width='100%' bgColor='#cfdef4' border='0' ID='Table8'>

<TBODY>

<TR>

<TD style='FONT-WEIGHT: normal; FONT-SIZE: 9pt; BACKGROUND-IMAGE: url(msgboximages/top.gif); COLOR: #1f336b; PADDING-TOP: 4px'

vAlign=center width='100%'>系统提示：</TD>

</TR>

<TR>

<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'> <b>userName</b>

您共有<B><FONT color='red'>allCount</FONT></B>条新消息</FONT><BR>

其中：<BR>

新邮件有 <FONT color='red'><B>mailCount</B></FONT> 封。</a><BR>

新事件有 <FONT color='red'><B>pendingCount </B></FONT>条.</a><BR>

</DIV>

</TD>

</TR>

</TBODY></TABLE>

</DIV>

这样就可以实现访问WebService和显示相关信息了。当然了，定时访问还要设置一个函数setInterval

function VisitService()

{

HasNewMail();

window.setInterval('HasNewMail()',60000);

}

在页面加载事件中运行这个函数就能实现定时访问了。

直接用层来实现Popup效果也是一种不错的方法，这里给别人写的代码。上面的层实体也从这个例子中得到的。

var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;

var divBody = '';

function SaveDIVInnerHTML()

{

divBody = document.getElementById('eMeng').innerHTML;

}

function getMsg(allCount,mailCount,pendingCount)

{

try{

divTop = parseInt(document.getElementById('eMeng').style.top,10)

divLeft = parseInt(document.getElementById('eMeng').style.left,10)

divHeight = parseInt(document.getElementById('eMeng').offsetHeight,10)

divWidth = parseInt(document.getElementById('eMeng').offsetWidth,10)

docWidth = document.body.clientWidth;

docHeight = document.body.clientHeight;

document.getElementById('eMeng').style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight

document.getElementById('eMeng').style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth

document.getElementById('eMeng').style.visibility='visible';

alert(divBody);

document.getElementById('eMeng').innerHTML = document.getElementById('eMeng').innerHTML.replace(/allCount/g,allCount);

document.getElementById('eMeng').innerHTML = document.getElementById('eMeng').innerHTML.replace(/mailCount/g,mailCount);

document.getElementById('eMeng').innerHTML = document.getElementById('eMeng').innerHTML.replace(/pendingCount/g,pendingCount);

objTimer = window.setInterval('moveDiv()',10)

}

catch(e){}

}

function moveDiv()

{

try

{

if(parseInt(document.getElementById('eMeng').style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))

{

window.clearInterval(objTimer)

objTimer = window.setInterval('resizeDiv()',1)

}

divTop = parseInt(document.getElementById('eMeng').style.top,10)

document.getElementById('eMeng').style.top = divTop - 1

}

catch(e){}

}

function resizeDiv()

{

i+=1

if(i>500) closeDiv()

try{

divHeight = parseInt(document.getElementById('eMeng').offsetHeight,10)

divWidth = parseInt(document.getElementById('eMeng').offsetWidth,10)

docWidth = document.body.clientWidth;

docHeight = document.body.clientHeight;

document.getElementById('eMeng').style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)

document.getElementById('eMeng').style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)

}

catch(e){}

}

function closeDiv()

{

document.getElementById('eMeng').style.visibility='hidden';

if(objTimer) window.clearInterval(objTimer)

document.getElementById('eMeng').innerHTML = divBody;

}