最近做一个项目,需要一个聊天室所以就做了,因为是第一次做,而且也不清楚别人聊天室是怎么做的,只能闭门造车了,憋了一周多才做出来,而且还有很多地方不太完美。在此贴出来,希望大家多多指点。聊天室的基本效果如下:
1、资源文件:
有主页面OnlineCommunication.aspx,显示聊天信息的页面ShowMessage.aspx。又用到FCKeditors编辑器
2、主要变量:
Application["Message"]用来存储聊天信息
Session["LogonName"]用来存储在线用户名
Application["OnLine"]用来存储各个在线用户名和该用户的状态。组成形式例如:板凳,0|可可儿,1|网虫,0|(第一部分为用户名,后面为状态码-1离线,0可发言,1禁止发言)
Session["MsgSubLength"]记录要截取字符串的长度,因为每个人刚刚进来时看不到别人的发言,所以用户进来首先要判断当前聊天内容的长度,然后截取掉。
3、不爽之处:
(1)、用到了微软自带的AJAX局部更新UpdatePanel控件和Timer1控件,感觉不是很爽,能够看到闪烁
(2)、显示聊天信息页面ShowMessage.aspx里,增加了定时刷新来显示聊天内容,如下所示。虽然我把他放到一个框架里了,但框架里子页面的刷新,父页面也跟着定时刷新,很是不爽
如果有时间重新写下这个聊天室,不用微软自带的AJAX控件估计会好些。
4、如何让滚动条自动移动到最下面
如果聊天内容太多会出现垂直滚动条,默认滚动条始终是在上面,那如何让滚动条自动移动到最下面呢,我试验了很多办法,都不太好使,最终用了以下办法。在body里,增加代码οnlοad="var t = document.getElementById('chatMessage'); t.scrollTop = t.scrollHeight;"来控制一个DIV。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<!--每秒钟刷新display.aspx页面-->
<meta http-equiv="REFRESH" content="12,ShowMessage.aspx"/>
<style type="text/css">
.chatMsg{
width:690px;
height:280px;
border:#eee solid 1px;
overflow:scroll;
}
</style>
<link href="../Style/Style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="var t = document.getElementById('chatMessage'); t.scrollTop = t.scrollHeight;">
<form id="form1" runat="server">
<div id="chatMessage" runat="server" class="chatMsg"></div><br />
</form>
</body>
</html>
奇怪的是这个办法,如果配合微软的Ajax局部更新UpdatePanel控件却不好使,只能在Head区里加代码来刷新整个页面才可以<meta http-equiv="REFRESH" content="12,ShowMessage.aspx"/>。实在郁闷。
下面贴下我的垃圾代码吧:
OnlineCommunication.aspx代码:
OnlineCommunication.aspx.cs代码:
ShowMessage.aspx代码:
ShowMessage.aspx.cs代码: