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

大家都知道要在一个 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"

 1<soap:envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 2    
 3    
 4      <soap:body>
 5    
 6    
 7        <hasnewmessage xmlns="http://tempuri.org/">
 8    
 9    
10          <userid> **string** </userid>
11    
12    
13        </hasnewmessage>
14    
15    
16      </soap:body>
17</soap:envelope>

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

HTTP/1.1 200 OK


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


Content-Length: **length**

 1<soap:envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 2    
 3    
 4      <soap:body>
 5    
 6    
 7        <hasnewmessageresponse xmlns="http://tempuri.org/">
 8    
 9    
10          <hasnewmessageresult> **string** </hasnewmessageresult>
11    
12    
13          <mailcount> **int** </mailcount>
14    
15    
16          <pendingcount> **int** </pendingcount>
17    
18    
19        </hasnewmessageresponse>
20    
21    
22      </soap:body>
23</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 + "

\n" ;

requestBody = requestBody + "

 1<soap:envelope "="" ";="" "xmlns:soap='\"http://schemas.xmlsoap.org/soap/envelope/\"' "xmlns:xsd='\"http://www.w3.org/2001/XMLSchema\"' "xmlns:xsi='\"http://www.w3.org/2001/XMLSchema-instance\"' +="" ;="" requestbody="requestBody">\n" ; 
 2
 3requestBody  = requestBody + " <soap:body>\n" ; 
 4
 5requestBody  = requestBody + "  <hasnewmessage xmlns='\"http://tempuri.org/\"'>\n" ; 
 6
 7requestBody  = requestBody + "  <userid>" + userID + "</userid>\n"; 
 8
 9requestBody  = requestBody + "  </hasnewmessage>\n"; 
10
11requestBody  = requestBody + " </soap:body>\n"; 
12
13requestBody  = 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("

1<hasnewmessageresult>"); 
2
3var pos2 = result .xml.indexOf("</hasnewmessageresult>

");

var len = pos2 - pos1 - ("

  1<hasnewmessageresult>").length; 
  2
  3var userName = result.xml.substr(pos1 + ("<hasnewmessageresult>").length , len); 
  4
  5pos1  = result.xml.indexOf("<mailcount>"); 
  6
  7pos2  = result.xml.indexOf("</mailcount>"); 
  8
  9len  = pos2 - pos1 - ("<mailcount>").length; 
 10
 11var mailCount = result.xml.substr(pos1 + ("<mailcount>").length , len); 
 12
 13pos1  = result.xml.indexOf("<pendingcount>"); 
 14
 15pos2  = result.xml.indexOf("</pendingcount>"); 
 16
 17len  = pos2 - pos1 - ("<pendingcount>").length; 
 18
 19var pendingCount= result.xml.substr(pos1 + ("<pendingcount>").length , len); 
 20
 21var allCount  = parseInt(mailCount) + parseInt(pendingCount); 
 22
 23//  弹出显示 
 24
 25if(allCount &gt; 0) 
 26
 27PopUpNotify(userName,allCount,mailCount,pendingCount) 
 28
 29} 
 30
 31这个函数首先创建一个  ActiveXObj  利用它来完成对  WebService  的访问。然后根据上面介绍的格式创建  SOAP  消息体，与  WebService  交互。最后对所得到的  WebService  返回消息进行分解，得出所需的数据。 
 32
 33三、  Pop  窗口的弹出。  Pop  窗口的弹出有几种方法，好像也有这方面的专门控件，由于用  javascript  来完成，选用层的移动应用或  PopupObject  来实现，它可以让显示信息自下而上移动，但在测试过程中发现直接用层会被框架遮住。所以选用  PopupObject  ，但存在一个问题就是用户不能控制这个  PopupObject  的关闭，它的关闭方式是在父窗体获得焦点以后就会自动关闭，在层实体的  ”self.close()”  ，不能很好的工作，它会弹出确认关闭窗口，随后自己就关闭了。以下是弹出函数和层实体  (  复制别人用层写出的弹出消息的一个层实体，把它作为  PopupObject  的  innerHTML  也能很的显示，真好！  )  。 
 34
 35var oPopup  = window.createPopup(); 
 36
 37function PopUpNotify(userName,allCount,mailCount,pendigCount) 
 38
 39{ 
 40
 41var oPopupBody  = oPopup.document.body; 
 42
 43var HTMLBody  = eMeng.innerHTML; 
 44
 45HTMLBody  = HTMLBody.replace(/userName/g,userName); 
 46
 47HTMLBody  = HTMLBody.replace(/allCount/g,allCount); 
 48
 49HTMLBody  = HTMLBody.replace(/mailCount/g,mailCount); 
 50
 51HTMLBody  = HTMLBody.replace(/pendingCount/g,pendigCount); 
 52
 53oPopupBody.innerHTML  = HTMLBody; 
 54
 55oPopup.show(screen.availWidth ,screen.Height - 145,180,116); 
 56
 57var realHeight = oPopupBody.scrollHeight; 
 58
 59oPopup.hide(); 
 60
 61// Shows the actual popup object with correct height. 
 62
 63oPopup.show(screen.availWidth,screen.Height - 145,180,116); 
 64
 65window.setTimeout("oPopup.hide()",5000); 
 66
 67} 
 68
 69层实体如下  : 
 70
 71<div id="eMeng" style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: -1000; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d  3f  3">
 72<table bgcolor="#cfdef4" border="0" cellpadding="0" cellspacing="0" id="Table8" style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" width="100%">
 73<tbody>
 74<tr>
 75<td height="24" valign="middle" width="30"><img src="../Images/Poppms.gif"/></td>
 76<td style="FONT-WEIGHT: normal; FONT-SIZE:  9pt  ; BACKGROUND-IMAGE: url(msgboximages/top.gif); COLOR: #  1f  336b; PADDING-TOP: 4px" valign="center" width="100%"> 系统提示：  </td>
 77<td align="right" valign="middle" width="19"><img hspace="3" onclick="self.close()" src="../Images/PopClose.gif" style="CURSOR: hand" title="  关闭  "/></td>
 78</tr>
 79<tr>
 80<td colspan="3" height="90">
 81<div style="BORDER-RIGHT: #b  9c  9ef 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: #  1f  336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b  9c  9ef 1px solid; HEIGHT: 100%"> <b>userName</b>
 82
 83您共有  <b><font color="red">allCount</font></b> 条新消息  <br/>
 84
 85其中：  <br/>
 86<a href="#" onclick="parent.window.parent.document.frames['CenterFrame'].location.href='/Affairs/mail/ReceiveBox.aspx?Refresh=1'">
 87
 88新邮件有  <font color="red"><b>mailCount</b></font> 封。  </a><br/>
 89<a href="#" onclick="parent.window.parent.document.frames['CenterFrame'].location.href = '/Affairs/Pending/Pending.aspx'">
 90
 91新事件有  <font color="red"><b>pendingCount </b></font> 条  .</a><br/>
 92</div>
 93</td>
 94</tr>
 95</tbody></table>
 96</div>
 97
 98这样就可以实现访问  WebService  和显示相关信息了。当然了，定时访问还要设置  一个函数  setInterval 
 99
100function VisitService() 
101
102{ 
103
104HasNewMail(); 
105
106window.setInterval("HasNewMail()",60000); 
107
108} 
109
110在页面加载事件中运行这个函数就能实现定时访问了。 
111
112直接用层来实现  Popup  效果也是一种不错的方法，这里给别人写的代码。上面的层实体也从这个例子中得到的。 
113
114var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0; 
115
116var  divBody  = ""; 
117
118function SaveDIVInnerHTML() 
119
120{ 
121
122divBody =  document.getElementById("eMeng").innerHTML; 
123
124} 
125
126function getMsg(allCount,mailCount,pendingCount) 
127
128{ 
129
130try{ 
131
132divTop = parseInt(document.getElementById("eMeng").style.top,10) 
133
134divLeft = parseInt(document.getElementById("eMeng").style.left,10) 
135
136divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10) 
137
138divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10) 
139
140docWidth = document.body.clientWidth; 
141
142docHeight = document.body.clientHeight; 
143
144document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;//  divHeight 
145
146document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth 
147
148document.getElementById("eMeng").style.visibility="visible"; 
149
150alert(divBody); 
151
152document.getElementById("eMeng").innerHTML  = document.getElementById("eMeng").innerHTML.replace(/allCount/g,allCount); 
153
154document.getElementById("eMeng").innerHTML  = document.getElementById("eMeng").innerHTML.replace(/mailCount/g,mailCount); 
155
156document.getElementById("eMeng").innerHTML  = document.getElementById("eMeng").innerHTML.replace(/pendingCount/g,pendingCount); 
157
158objTimer = window.setInterval("moveDiv()",10) 
159
160} 
161
162catch(e){} 
163
164} 
165
166function moveDiv() 
167
168{ 
169
170try 
171
172{ 
173
174if(parseInt(document.getElementById("eMeng").style.top,10) &lt;= (docHeight - divHeight + parseInt(document.body.scrollTop,10))) 
175
176{ 
177
178window.clearInterval(objTimer) 
179
180objTimer = window.setInterval("resizeDiv()",1) 
181
182} 
183
184divTop = parseInt(document.getElementById("eMeng").style.top,10) 
185
186document.getElementById("eMeng").style.top = divTop - 1 
187
188} 
189
190catch(e){} 
191
192} 
193
194function resizeDiv() 
195
196{ 
197
198i+=1 
199
200if(i&gt;500) closeDiv() 
201
202try{ 
203
204divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10) 
205
206divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10) 
207
208docWidth = document.body.clientWidth; 
209
210docHeight = document.body.clientHeight; 
211
212document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10) 
213
214document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10) 
215
216} 
217
218catch(e){} 
219
220} 
221
222function closeDiv() 
223
224{ 
225
226document.getElementById('eMeng').style.visibility='hidden'; 
227
228if(objTimer) window.clearInterval(objTimer) 
229
230document.getElementById("eMeng").innerHTML  = divBody; 
231
232}</pendingcount></pendingcount></mailcount></mailcount></hasnewmessageresult></hasnewmessageresult>