无刷新的聊天室的制作兼谈组件制作和ClientSide Script

我们在传统的web程序当中比较头疼的一件事是屏幕的刷新感。虽然有server push的技术，但在IE中较难实现。现在webservice给了我们这样一个机会，大家都知道webservice是基于soap的，而soap是xml的应用，如果你曾经用过ms xml sdk3.0的话就会知道里面有个xmlhttp方法，其实在那时我们就已经可以用xmlhttp的方式替代Form了，也是无刷新的，其实准确地说是局部刷新，下面我们来看一下怎样做，先做一个chat webservice, 首先来分析一下，一个聊天室应具备的两个要素人和消息，这样我们可以建立一个类型（记得我在以前说过类也是类型），它包含这样两个要素。
///ChatMessage.cs
using System;

namespace chat
{
/// <summary>
/// ChatMessage类封装了两个string变量:UserLists--用户列表，Messages--要传递的信息
/// </summary>
public class ChatMessage
{
public string UserList, Messages;
}
}
第二个我们要建立的是什么呢？一个聊天室应能存储在线成员的名字及访问时间
///Member.cs
using System;

namespace chat
{
/// <summary>
/// Member类为每个聊天者封装了Server端的变量
/// </summary>
public class Member
{
// 存储消息的队列
public string UserName, MsgQueue;
// 判断滞留事件以便踢人
public System.DateTime LastAccessTime;
// The constructor
public Member(string NickName)
{
this.UserName=NickName;
this.LastAccessTime=DateTime.Now;
}
}
}

接下来我们就应该做这个asmx了
///ChatWebService.asmx
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Web;
using System.Web.Services;

namespace chat
{
/// <summary>
/// Summary description for ChatWebService.
/// </summary>
[WebService (Namespace = "http://localhost/chat/", Description = "This service provides an chat service")]
public class ChatWebService : System.Web.Services.WebService
{
public ChatWebService()
{
//CODEGEN: This call is required by the ASP.NET Web Services Designer
InitializeComponent();
}

#region Component Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
}
#endregion

/// <summary>
/// Clean up any resources being used.
/// </summary>
protected override void Dispose( bool disposing )
{
}

[WebMethod(Description="接收用户名作为参数存储到Application对象中")]
public string Login(string username)
{
// Ascertain that all the registered chat participants are active
CheckMembersList();
// Synchronization Lock
Application.Lock();
// Get the collection of keys for the Application Variables
String[] Members = Application.AllKeys;
// Are there any registered chat members? & the present request is for a unique nick name?
if ((Members.Length>0)&&(Array.IndexOf(Members,username)>-1))
{
throw new Exception("该用户已存在！");
}
// Create a new Member object for this participant
Member NewMember = new Member(username);
// Add this new member to the collectionof Application Level Variables
Application.Add(username, NewMember);
// Synchronization unlock
Application.UnLock();
// Go and get the list of current chat participants and retrun the list
return GetMembersList();
}

[WebMethod(Description="GetMsg方法用用户名和消息为参数返回一个ChatMessage对象，包括要传递的消息和用户列表")]
public ChatMessage XchangeMsgs(string username, string Msg)
{
// Ascertain that all the registered chat participants are active
CheckMembersList();
// Synchronization Lock
Application.Lock();
// Get the collection of keys for the Application Variables
String[] Members = Application.AllKeys;
if ((Members.Length==0)||(Array.IndexOf(Members,username)==-1))
// Are there any registered chat members? & the present request is for a unique nick name?
{
throw new Exception("你当前可能没有登陆或登陆超时，请重新登陆！");
}
ChatMessage RetMsg = new ChatMessage();

RetMsg.UserList = GetMembersList();
// Loop through all the Chat Participant's serverside Member Objects and
// add the message just received in their waiting message queue
for (int x=0;x<Members.Length;x++)
{
Member temp = (Member)Application[Members[x]];
temp.MsgQueue+=("<BR><Font color = Red>" + username + " 说:<BR></FONT><Font color = Blue>" + Msg);
if (temp.UserName == username)
{
RetMsg.Messages = temp.MsgQueue;
temp.MsgQueue="";
temp.LastAccessTime=DateTime.Now;
}
}
// Synchronization unlock
Application.UnLock();
return RetMsg;
}

[WebMethod(Description="GetMsg方法用username为参数返回一个ChatMessage对象，包括要传递的消息和用户列表")]
public ChatMessage GetMsgs(string username)
{
Application.Lock();
CheckMembersList();
Application.Lock();
String[] Members = Application.AllKeys;
if ((Members.Length==0)||(Array.IndexOf(Members,username)==-1))
{
throw new Exception("Unknown User. Please Login with a UserName");
}
ChatMessage RetMsg = new ChatMessage();
RetMsg.UserList = GetMembersList();
Member temp = (Member)Application[username];
RetMsg.Messages = temp.MsgQueue;
temp.MsgQueue="";
temp.LastAccessTime=DateTime.Now;
Application.UnLock();
return RetMsg;
}

public string GetMembersList()
{
Application.Lock();
String UserList = "";
String[] Members = Application.AllKeys;
Application.UnLock();
for (int x=0;x<Members.Length;x++)
{
Member temp = (Member)Application[Members[x]];
UserList += (temp.UserName+"/n");
}
return UserList;
}

private void CheckMembersList()
{
String[] Members = Application.AllKeys;
ArrayList RemoveList = new ArrayList();
for (int x=0;x<Members.Length;x++)
{
Member temp = (Member) Application[Members[x]];
int test = (DateTime.Now.Subtract(temp.LastAccessTime)).Minutes;
if (test > 2)
{
RemoveList.Add(Members[x]);
}
}
// Users = null;
for (int count = 0;count<RemoveList.Count;count++)
{
Application.Remove((String)RemoveList[count]);
}
return;
}


}
}

好了，至此，我们的webservice就完成了，大家可能不满了，还是没实现无刷新嘛，别急，这是客户端的事。下面我们就来做这项工作。
一般来说我们完全可以做一个html页面，而不用server page，但为了顺便说明怎样做组件，我决定作一个server control,先来看一下代码
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.ComponentModel;

namespace Michael.Web.UI.Controls
{
/// <summary>
/// Summary description for chat.
/// </summary>
[DefaultProperty("Text"),
ToolboxData("<{0}:chat runat=server></{0}:chat>")]
public class chat : System.Web.UI.WebControls.Table
{
private string doc;
private string text;
[Bindable(true),
Category("Appearance"),
Defaultvalue("")]
public string Text
{
get
{
return text;
}

set
{
text = value;
}
}

/// <summary>
/// Render this control to the output parameter specified.
/// </summary>
/// <param name="output"> The HTML writer to write out to </param>
protected override void Render(HtmlTextWriter output)
{
// The script block is written to the client
output.Write(doc);

base.Render(output);
}

private string Serviceurl = "http://localhost/chat/ChatWebService.asmx?WSDL";
[Bindable(true),
Category("WebServiceProperty"),
Defaultvalue("http://localhost/chat/ChatWebService.asmx?WSDL")]
public string ServiceURL
{
get
{
return Serviceurl;
}
set
{
Serviceurl = value;
}
}
private string Behaviorurl = "http://localhost/chat/webservice.htc";
[Bindable(true),
Category("WebServiceProperty"),
Defaultvalue("")]
public string BehaviorURL
{
get
{
return Behaviorurl;
}
set
{
Behaviorurl = value;
}
}

private string tablecssclass;
[Bindable(true),
Category("LayoutProperty"),
Defaultvalue("")]
public string TableCssClass
{
get
{
return tablecssclass;
}
set
{
tablecssclass = value;
}
}

private string titlecssclass;
[Bindable(true),
Category("LayoutProperty"),
Defaultvalue("")]
public string TitleCssClass
{
get
{
return titlecssclass;
}
set
{
titlecssclass = value;
}
}

private string onlinecssclass;
[Bindable(true),
Category("LayoutProperty"),
Defaultvalue("")]
public string OnlineCssClass
{
get
{
return onlinecssclass;
}
set
{
onlinecssclass = value;
}
}

private string msgcssclass;
[Bindable(true),
Category("LayoutProperty"),
Defaultvalue("")]
public string MSGCssClass
{
get
{
return msgcssclass;
}
set
{
msgcssclass = value;
}
}

private string selusercssclass;
[Bindable(true),
Category("LayoutProperty"),
Defaultvalue("")]
public string SelUserCssClass
{
get
{
return selusercssclass;
}
set
{
selusercssclass = value;
}
}
protected override void OnInit(EventArgs e)
{
this.ID = "service";

this.Style["Behavior"] = "url('" + Behaviorurl + "')";

this.Style["Table-Layout"] = "Fixed";

if( this.Attributes["class"] == null) this.Attributes["class"] = tablecssclass;

this.Attributes["onresult"] = UniqueID + "_onmyresult();";

TableRow tr;
// And also create 7 Table Cell elements one by one
TableCell cell = new TableCell();

cell.Attributes["class"] = titlecssclass;
cell.Attributes["Align"] = "Left";

// Set the caption of the control
cell.Text = "Portal 聊天室";
// Instantiate a Table Roa and attach the First Cell to it
tr = new TableRow();
tr.Cells.Add(cell);
// Add the Table Row to our Control
this.Rows.Add(tr);

// Row No 2 starts here

cell = new TableCell();

cell.Attributes["class"] = onlinecssclass;
cell.Text = "在线人员";
tr = new TableRow();
tr.Cells.Add(cell);
this.Rows.Add(tr);

// Row No 3 Starts here

cell = new TableCell();
cell.Style["Height"] = "25%";
// We create a DIV element using HtmlGenericControl object
// We can also do this using the Panel object
HtmlGenericControl d = new HtmlGenericControl("Div");
d.ID = UniqueID + "_ChatMsgs";
d.Style["Height"] = "100%";
d.Style["Width"] = "100%";
d.Style["Overflow"] = "Auto";
d.Style["Padding-Left"] = "15%";
d.ID = UniqueID + "_ChatList";
// Adding the DIV element to the Table Cell
cell.Controls.Add(d);
tr = new TableRow();
tr.Cells.Add(cell);
this.Rows.Add(tr);

// Row No 4 Starts here

cell = new TableCell();

cell.Attributes["class"] = msgcssclass;
cell.Text = "消息:";
tr = new TableRow();
tr.Cells.Add(cell);
this.Rows.Add(tr);

// Row No 5 starts here

cell = new TableCell();
cell.Style["Height"] = "35%";
d = new HtmlGenericControl("Div");
d.ID = UniqueID + "_ChatMsgs";
d.Style["Height"] = "100%";
d.Style["Width"] = "100%";
d.Style["Overflow"] = "Auto";
cell.Controls.Add(d);
tr = new TableRow();
tr.Cells.Add(cell);
this.Rows.Add(tr);

// Row No 6 Starts here

cell = new TableCell();

cell.Attributes["class"] = selusercssclass;
cell.ID = UniqueID + "_Prompt";
cell.Text = "选择一个用户:";
tr = new TableRow();
tr.Cells.Add(cell);
this.Rows.Add(tr);

// Row No 7 starts here

cell = new TableCell();
cell.Text = "<INPUT Type=/"Text/" id= '" + UniqueID + "_UserInput'> /r/n";
cell.Text += "<BR>/r/n";
cell.Text += "<Button id = '" + UniqueID + "_bnSendMsg' onclick = /"return SendMsg();/" class = " + UniqueID + "_TitleLabel style = /"display:none/"> 发送 </Button>/r/n";
cell.Text += "<Button id = '" + UniqueID + "_bnSelectName' onclick = /"return " + UniqueID + "_SelectName();/" class = " + UniqueID + "_TitleLabel style = /"display:block/"> 登陆 </Button> /r/n";
cell.Style["Color"] = "Black";
cell.Style["Background-Color"] = "Gainsboro";
tr = new TableRow();
tr.Cells.Add(cell);
this.Rows.Add(tr);

// First script Block is written into 'doc' variable

doc = "/r/n<SCRIPT FOR = 'window' EVENT = 'onload()'>";
doc += "//alert(/"done/"); /r/n";
doc += "service.use(/"";
doc += Serviceurl + "/",/"ChatWebService/"); /r/n";
doc += "" + UniqueID + "_UserInput.focus();/r/n";
doc += "</SCRIPT> /r/n";

// Then the second script block follows

doc += "<script language=/"javascript/">/r/n";
doc += "var " + UniqueID + "_iCallID1, " + UniqueID + "_iCallID2, " + UniqueID + "_iCallID3; /r/n";
doc += "var " + UniqueID + "_NickName; /r/n";
doc += "var " + UniqueID + "_MsgXML = new ActiveXObject(/"MSXML.DOMdocument．");/r/n";
doc += "function " + UniqueID + "_SelectName() /r/n";
doc += "{ /r/n";
doc += "if (" + UniqueID + "_UserInput.value == /"/") return false;/r/n";
doc += "" + UniqueID + "_NickName = " + UniqueID + "_UserInput.value; /r/n";
doc += "" + UniqueID + "_bnSelectName.disabled = 'true'; /r/n";
doc += "" + UniqueID + "_UserInput.disabled = 'true';/r/n";
doc += "" + UniqueID + "_iCallID1 = service.ChatWebService.call(/"Login/"," + UniqueID + "_NickName); /r/n";
doc += "} /r/n";
doc += "function " + UniqueID + "_onmyresult() /r/n";
doc += "{ /r/n";
doc += "if((event.result.error)&&(" + UniqueID + "_iCallID1==event.result.id)) /r/n";
doc += "{ /r/n";
doc += "var xfaultcode = event.result.errorDetail.code; /r/n";
doc += "var xfaultstring = event.result.errorDetail.string; /r/n";
doc += "var xfaultsoap = event.result.errorDetail.raw;/r/n";
doc += "/r/n";
doc += "// Add code to output error information here/r/n";
doc += "alert(xfaultstring);/r/n";
doc += "" + UniqueID + "_bnSelectName.disabled = false;/r/n";
doc += "" + UniqueID + "_UserInput.disabled = false; /r/n";
doc += "" + UniqueID + "_UserInput.focus();/r/n";
doc += "/r/n";
doc += "} /r/n";
doc += "else if((!event.result.error)&&(" + UniqueID + "_iCallID1==event.result.id)) /r/n";
doc += "{ /r/n";
doc += "" + UniqueID + "_ChatList.innerText= event.result.value; /r/n";
doc += "" + UniqueID + "_ChatList.scrollTop = 2000; /r/n";
doc += "" + UniqueID + "_bnSelectName.style.display = 'none';/r/n";
doc += "" + UniqueID + "_bnSendMsg.style.display = 'block';/r/n";
doc += "" + UniqueID + "_UserInput.value = /"/"; /r/n";
doc += "" + UniqueID + "_UserInput.disabled = false; /r/n";
doc += "" + UniqueID + "_UserInput.focus();/r/n";
doc += "" + UniqueID + "_Prompt.innerText = " + UniqueID + "_NickName + /" 说:/"; /r/n";
doc += "window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(/"GetMsgs/"," + UniqueID + "_NickName);',3000); /r/n";
doc += "} /r/n";
doc += "else if((event.result.error)&&(" + UniqueID + "_iCallID2==event.result.id))/r/n";
doc += " {/r/n";
doc += "var xfaultcode = event.result.errorDetail.code; /r/n";
doc += "var xfaultstring = event.result.errorDetail.string; /r/n";
doc += "var xfaultsoap = event.result.errorDetail.raw;/r/n";
doc += "// Add code to output error information here/r/n";
doc += "alert(/"xfaultstring/");/r/n";
doc += " }/r/n";
doc += " else if((!event.result.error)&&(" + UniqueID + "_iCallID2==event.result.id))/r/n";
doc += " {/r/n";
doc += "var xmlResult = event.result.raw.xml; /r/n";
doc += " if (xmlResult != /"/" && xmlResult != null)/r/n";
doc += " {/r/n";
doc += "/r/n";
doc += "" + UniqueID + "_MsgXML.loadXML(xmlResult);/r/n";
doc += " " + UniqueID + "_ChatList.innerText = " + UniqueID + "_MsgXML.selectSingleNode(/"//UserList/").text; /r/n";
doc += "" + UniqueID + "_ChatList.scrollTop = 2000; /r/n";
doc += " " + UniqueID + "_ChatMsgs.innerHTML += " + UniqueID + "_MsgXML.selectSingleNode(/"//Messages/").text;/r/n";
doc += "" + UniqueID + "_ChatMsgs.scrollTop = 2000; /r/n";
doc += " }/r/n";
doc += " window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(/"GetMsgs/"," + UniqueID + "_NickName);',3000);/r/n";
doc += " }/r/n";
doc += "else if((event.result.error)&&(" + UniqueID + "_iCallID3==event.result.id))/r/n";
doc += " {/r/n";
doc += "var xfaultcode = event.result.errorDetail.code; /r/n";
doc += "var xfaultstring = event.result.errorDetail.string; /r/n";
doc += "var xfaultsoap = event.result.errorDetail.raw;/r/n";
doc += "// Add code to output error information here/r/n";
doc += "alert(/"xfaultstring/");/r/n";
doc += " }/r/n";
doc += " else if((!event.result.error)&&(" + UniqueID + "_iCallID3==event.result.id))/r/n";
doc += " {/r/n";
doc += "var xmlResult = event.result.raw.xml; /r/n";
doc += " if (xmlResult != /"/" && xmlResult != null)/r/n";
doc += " {/r/n";
doc += "/r/n";
doc += "" + UniqueID + "_MsgXML.loadXML(xmlResult);/r/n";
doc += " " + UniqueID + "_ChatList.innerText = " + UniqueID + "_MsgXML.selectSingleNode(/"//UserList/").text; /r/n";
doc += " " + UniqueID + "_ChatMsgs.innerHTML += " + UniqueID + "_MsgXML.selectSingleNode(/"//Messages/").text;/r/n";
doc += " " + UniqueID + "_ChatList.scrollTop = 2000; /r/n";
doc += " " + UniqueID + "_bnSendMsg.disabled = false;/r/n";
doc += " " + UniqueID + "_ChatMsgs.scrollTop = 2000; /r/n";
doc += " " + UniqueID + "_UserInput.value = /"/";/r/n";
doc += " " + UniqueID + "_UserInput.disabled = false;/r/n";
doc += " " + UniqueID + "_UserInput.focus();/r/n";
doc += " }/r/n";
doc += " window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(/"GetMsgs/"," + UniqueID + "_NickName);',3000);/r/n";
doc += " }/r/n";
doc += "} /r/n";
doc += "function SendMsg()/r/n";
doc += "{ /r/n";
doc += "if (" + UniqueID + "_UserInput.value == /"/") return false;/r/n";
doc += "" + UniqueID + "_bnSendMsg.disabled = 'true';/r/n";
doc += "" + UniqueID + "_UserInput.disabled = 'true';/r/n";
doc += "" + UniqueID + "_iCallID3 = service.ChatWebService.call(/"XchangeMsgs/"," + UniqueID + "_NickName," + UniqueID + "_UserInput.value);/r/n";
doc += "} /r/n";
doc += "</script> /r/n";

}
}
}
这里有几个问题，
1。我们继承的是Table，记住table等server端控件本身就继承了control类，我们做控件不一定要直接继承control
2。[“。。。”]是metadata他是用来做可视化控件的具体含义看msdn
3。我们这里采用client script的方法，可以看出实现方式与asp中大体一致，即Server端“写”script
4。Dhtml Behavior的应用，Behavior是MS扩展的css元素，大家可去msdn查