18.6 登录
掌握了Web QQ的底层架构和Web服务层的程序实现后，实现其具体功能就相对容易了。本节将主要介绍登录操作的具体实现。
18.6.1 登录页面login.aspx
本节的登录界面和一般项目中的登录界面区别不大，主要包括账号、密码输入框和一个登录按钮。登录的设计时效果图如图18.14所示。
聊天者输入账号、密码后单击“登录”按钮，这时调用Web服务层的Login()方法，然后根据返回的结果显示相应的信息。若成功登录后页面将转到Default.aspx页面上。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
MyChat.improve im = new MyChat.improve();
int b = im.Login(TextBox1.Text, TextBox2.Text); //调用web服务登录
if(b== 1) //登录成功
{
Response.Redirect("default.aspx", true);
}
else if (b == 2) //密码错误
{
ClientScript.RegisterStartupScript(this.GetType(), "erro", "alert
('密码错误，请重新输入密码，或者用别的用户名登录！')", true);
}
else //出现系统错误
ClientScript.RegisterStartupScript(this.GetType(), "fal", "alert('
登录过程中，出现错误，请重试！')", true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web QQ 登录</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<span style="font-size: 20pt"><strong>登录：</strong></span><br />
<br />
账号:<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
密码:
<br />
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password" Width=
"148px"></asp:TextBox><br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click"
Text="登录" />
</div>
</form>
</body>
</html>
18.6.2 演示页面Default.aspx和加载脚本loadchat.js
登录成功后转到的Default.aspx页面是一个普通的页面，它之所以显示Web QQ是因为调用了下面一行代码：
<script src="js/loadchat.js"> </script>
Loadchat.js文件封装了Web QQ的调用接口，任何页面如果要实现即时聊天功能，只需要包含这个脚本文件即可。Loadchat.js文件的具体实现代码如下：
// 加载聊天界面
dd='document.documentElement';
dd=eval(dd+'.clientWidth')>0?dd:'document.body';
ddw=dd+'.clientWidth'; //宽
ddl=dd+'.scrollLeft'; //滚动条的x坐标
ddt=dd+'.scrollTop'; //滚动条的y坐标
ddh=dd+'.clientHeight';
style='POSITION: absolute;LEFT: expression(eval('+ddl+')+eval('+ddw+')-this.width-5); TOP: expression(eval('+ddt+')+eval('+ddh+')-this.height)'; //style
document.write('<div id="chatqqcont" style="'+style+'" height="585" width="160"> <iframe id ="chatqq" src="frame.aspx" marginheight=0 marginwidth=0 frameborder=0 scrolling=no height="585" width="155" ></iframe></div>');
上面这段代码就是把Web QQ的框架页面作为一个iframe显示在主页面的右下角，用以显示聊天界面。这里表示几个页面调用关系，如图18.15所示。
图18.15 页面调用图
18.6.3 主界面Frame.aspx
Frame.aspx是Web QQ的主界面，其中的Page_Load事件用以获得并显示登录者的ip、账号、头像等。并把自己的账号和id作为客户端变量注册到页面中。这个页面的最主要作用是控制页面显示效果，所以它用一个图片做背景，页面中的所有元素位置都设为绝对位置。页面中元素的主体是一个iframe，把Right.aspx做为一个嵌套页面显示出来。Frame.aspx的页面代码如下：
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string temp = ""; //在线还是隐身的字符串
myip.InnerText = Request.ServerVariables["HTTP_X_FORWARDED_FOR"];
//获得客户端ip
if(myip.InnerText == "")
myip.InnerText = Request.ServerVariables["REMOTE_ADDR"];
//如果已经登录，做一些聊天初始化的工作
if(User.Identity.IsAuthenticated)
{
Label2.InnerText = MyChat.tools.GetSysMsgNum().ToString();
//显示系统消息数目
loginname.InnerText = User.Identity.Name; //显示用户账号
MyChat.Sql s = new MyChat.Sql();
string str = "select * from userinfo where username = '" + User.Identity.
Name + "'";
System.Data.SqlClient.SqlDataReader r = s.GetReader(str);
if(r.Read() && r["head"] != DBNull.Value) //得到用户头像
loginhead.Src = "face/" + r["head"].ToString();
temp = (r["ifshowonline"].ToString() == "1" ? "在线" : "隐身");
//是否隐身
r.Close();
//定义客户端变量
string sw = "var myid = " + MyChat.tools.GetUserId(User.Identity.Name).
ToString() + "; var myname = '" + User.Identity.Name + "';";
sw += "document.getElementById('Label3').innerText='" + temp + "'";
ClientScript.RegisterStartupScript(this.GetType(), "sadfdw", sw, true);
//把客户端脚本注册到页面
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web QQ</title>
<script src="js/tools.js" type="text/javascript"></script>
<script src="js/chat.js" type="text/javascript"></script>
<script src="js/wnd.js" type="text/javascript"></script>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<link href="face/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/alert.js"></script>
</head>
<body>
<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0" style="width: 151px;
height: 584px;
vertical-align: top; background-image: url('images/bg.gif')">
<tr style="width: 151px; height: 520px; background-image: url
('images/bg.gif')">
<td style="text-align: right; vertical-align: top; width: 85px;">
<div id="closeme" title="关闭" onclick="oa_tool();" style=
"cursor: pointer; width: 18px;
height: 12px; position: absolute; top: 6px; left: 132px;">
</div>
<div style="width: 77px; height: 12px; position: absolute;
top: 6px; left: 10px;">
Web QQ</div>
<br />
<br />
<table border="0" cellpadding="0" style="width: 151px;"
cellspacing="0" id="chathead">
<tr style="width: 151px">
<td style="text-align: center; width: 30%" rowspan="2">
<img id="loginhead" height="32" width="32" runat=
"server" /></td>
<td style="text-align: left; color: #044b9a;">
<span id="loginname" runat="server" style="overflow:
hidden; width: 22px">未登录</span>
<span id="Label3">在线</span></td>
<td>
</td>
</tr>
<tr>
<td style="color: #044b9a; text-align: left; cursor:
pointer" onclick="getsys();">
<img src="images/mail.gif" />(<span id="Label2"
runat="server"></span>)</td>
<td>
</td>
</tr>
</table>
<div id="ifonline" title="设置" onclick="showOnlineConfig();"
style="cursor: pointer;
width: 21px; height: 12px; position: absolute; top: 34px;
left: 126px;">
</div>
<div id="showip" style="width: 120px; height: 23px; position:
absolute; top: 534px;
text-align: left; left: 25px;">
您的ip是：<span id="myip" runat="server"></span></div>
<div id="config" title="个人设置" onclick="getdetail();"
style="cursor: pointer; width: 67px;
height: 18px; position: absolute; top: 565px; left: 8px;">
</div>
<div id="search" title="查找好友" onclick="find1();" style=
"cursor: pointer; width: 63px;
height: 17px; position: absolute; top: 568px; left: 85px;">
</div>
<iframe id="chatmain" src="right.aspx" frameborder="0" marginheight=
"0" marginwidth="0"
width="134" scrolling="no" style="position: absolute;
margin: 0; top: 68px; height: 454px;
left: 7px;"></iframe>
</td>
</tr>
</table>
</form>
</body>
</html>
18.6.4 QQ菜单页Right.aspx
几乎Web QQ的所有主要操作都通过Right.aspx页面文件实现。这个页面的主体是一个QQ菜单，页面中有好友、陌生人、黑名单、我的群等几个菜单项。结合前面对qq.js文件的讲解，应该不难理解。关于Right.aspx.cs代码文件的解释将在“消息管理”小节中讲解。Right.aspx页面的HTML代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Right.aspx.cs" Inherits= "frame_chat" %>
<html>
<head>
<title>主界面</title>
<style>
.Hand_Off {
BACKGROUND-COLOR: #FFFFFFF;
Text-align: left;
}
.Hand_On {
background-color : #C6D3EF;
Text-align: left;
cursor: pointer;
}
</style>
<script type="text/javascript" src="js/qq.js" />
<script src="js/tools.js" type="text/javascript"></script>
<style type='text/css'>
.headtd1 { background-image : url('images/1.gif');color: #044b9a; border: 0px outset; cursor: hand; font-size: 9pt;background-repeat:no-repeat}
.headtd2 { background-image : url('images/1.gif');color: #044b9a; border: 0px outset; cursor: hand; font-size: 9pt;background-repeat:no-repeat}
.bodytd { background: white; border: 0px outset; font-size: 9pt;background- repeat:no-repeat}
td{font-size:9pt}
body{font-size:9pt}
a { font-size: 9pt; color: #0066CC; text-decoration: none}
a:hover { font-size: 9pt; color: #990000}
</style>
<link href="face/style.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color: #daebf7; margin: 0">
<dir id="bglist">
</dir>
<form id="form1" runat="server">
<div id="temp1" style="display: none">
</div>
<div id="temp2" style="display: none">
</div>
<div id="temp3" style="display: none">
</div>
<div id="temp4" style="display: none">
</div>
<div>
<div id="mainboard" style="z-index: 1; background: #99ccff; left: 2px;
overflow: hidden;
width: 134px; position: absolute; top: 0px; height: 501px">
<div id="item1body" style="z-index: 2; left: 0px; width: 134px;
position: absolute;
top: 0px; height: 400px">
<table border="0" cellpadding="2" cellspacing="0" height=
"100%" width="100%">
<tr style="height: 22">
<td id="item1head" align="center" class="headtd2"
onclick="showme(item1body,this)"
style="height: 20px">
我的好友<img src="images/news.gif" style="display: none" id="flag1" /></td>
</tr>
<tr>
<td align="center" class="bodytd" style="height: 374">
<img src="images/addfriend.gif" style="cursor: pointer" onclick="top.frames('chatqq').find1();" />
<div id="myfriend" style="text-align: left; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA;
scrollbar-highlight-color: #FFFFFF; scrollbar- 3dlight-color: #DBEBFE; scrollbar-darkshadow-color: #458CE4;
scrollbar-track-color: #FFFFFF; scrollbar-arrow- color:#458CE4; vertical-align: top;
visible; overflow-y: auto; height: 374">
</div>
</td>
</tr>
</table>
</div>
<div id="item2body" style="z-index: 3; left: 0px; overflow: hidden; width: 134px;
position: absolute; top: 397px; height: 405px">
<table border="0" cellpadding="2" cellspacing="0" height="100%" width="100%">
<tr>
<td id="item2head" align="center" class="headtd1" onclick= "showme(item2body,this)"
style="height: 20">
陌生人<img src="images/news.gif" style="display: none" id="flag2" /></td>
</tr>
<tr>
<td align="center" class="bodytd" style="height: 374">
<div id="mystranger" style="text-align: left; scrollbar- face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA;
scrollbar-highlight-color: #FFFFFF; scrollbar- 3dlight-color: #DBEBFE; scrollbar-darkshadow-color: #458CE4;
scrollbar-track-color: #FFFFFF; scrollbar-arrow- color: #458CE4; vertical-align: top;
overflow-x: visible; overflow-y: auto; height: 374">
</div>
</td>
</tr>
</table>
</div>
<div id="item3body" style="z-index: 4; left: 0px; overflow: hidden; width: 134px;
color: #0066cc; position: absolute; top: 417px; height: 405px; text-decoration: underline">
<table border="0" cellpadding="2" cellspacing="0" height="100%" width="100%">
<tr>
<td id="item3head" align="center" class="headtd1" height= "22" onclick="showme(item3body,this)">
黑名单</td>
</tr>
<tr>
<td align="center" class="bodytd" style="height: 374">
<div id="myblack" style="text-align: left; scrollbar- face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA;
scrollbar-highlight-color: #FFFFFF; scrollbar- 3dlight-color: #DBEBFE; scrollbar-darkshadow-color: #458CE4;
scrollbar-track-color: #FFFFFF; scrollbar-arrow- color: #458CE4; vertical-align: top;
overflow-x: visible; overflow-y: auto; height: 374">
</div>
</td>
</tr>
</table>
</div>
<div id="item4body" style="z-index: 5; left: 0px; overflow: hidden; width: 134px;
position: absolute; top: 437px; height: 405px">
<table border="0" cellpadding="2" cellspacing="0" height="100%" width="100%">
<tr>
<td id="item4head" align="center" class="headtd1" height= "22" onclick="showme(item4body,this)">
我的群</td>
</tr>
<tr>
<td align="center" class="bodytd" style="height: 374">
<img src="images/addg.gif" style="cursor: pointer" onclick="top.frames('chatqq').createGroupWnd();" />
<div id="mygroup" style="text-align: left; scrollbar- face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA;
scrollbar-highlight-color: #FFFFFF; scrollbar- 3dlight-color: #DBEBFE; scrollbar-darkshadow-color: #458CE4;
scrollbar-track-color: #FFFFFF; scrollbar-arrow- color: #458CE4; vertical-align: top;
overflow-x: visible; overflow-y: auto; height: 374">
</div>
</td>
</tr>
</table>
</div>
<div id="item5body" style="z-index: 6; left: 0px; overflow: hidden; width: 134px;
position: absolute; top: 457px; height: 405px">
<table border="0" cellpadding="2" cellspacing="0" height="100%" width="100%">
<tr>
<td id="item5head" align="center" valign="top" class= "headtd1" style="text-align: center;
width: 134px; height: 20px;">
</tr>
<tr>
<td align="center" class="bodytd" style="height: 374px">
</td>
</tr>
</table>
</div>
</div>
</div>
<script language="JavaScript">
function getmsg() //查看是否有新消息
{
CallServer('getmsg;','');
}
setInterval('getmsg()',3000); //定时查看
</script>
</form>
</body>
</html>
