今天是2011年的最后一天了,我想来想去还是应该在这样一个特殊的日子里写点什么,让历史记住这一天,我曾经在一天写过东西,也没什么好分享的,就分享下我最近egg pain的时候写的一个仿QQweb在线聊天一个页面。高手跳过啊,我是菜鸟呀!在此我只想说说思路和简单的代码,因为今天来就是为2012打气的,不谈毛技术。呵呵……OK,现在开始,最后再喊口号。
首先我的思路是通过Ajax+js来实现定时局部刷新聊天记录,用ajax调用后台代码来实现无刷新效果,具体方法我上一篇博客已经讲过了,不会的可以去看下哈,http://www.cnblogs.com/tandyshen/archive/2011/12/14/ajax.html 下面看下js代码和.cs后他代码
前台js代码
JS
<script type="text/javascript">
//定时更新聊天内容
function refresh_chatcontent()
{
var content = document.getElementById("palchat");
var strRec = AjaxChating.GetNewMessage(<%=hfuserid.Value %>, <%=hftouserid.Value %>).value;
//判断是否为空
if (strRec != "")
{
content.innerHTML =content.innerHTML + strRec;
saveScrollPosition();
}
//一秒钟更新一次
window.setTimeout(refresh_chatcontent, 1000);
}
//enter发送
function IsEnter()
{
if(window.event.keyCode ==13)
{
send();
return false;
}
}
//ctrl+enter发送
function IsEnterAndCtrl()
{
if(window.event.keyCode ==13 && window.event.ctrlKey)
{
send();
return false;
}
}
//关闭窗口
function closewin()
{
if(confirm("您确定要关闭正在聊天的窗口吗?"))
{
window.close();
}
}
</script>
后台cs代码
cs
/// <summary>
/// 定时更新
/// </summary>
/// <returns></returns>
[Ajax.AjaxMethod()]
public string GetNewMessage(int userid,int touserid)
{
JModels.Message message = manage.Receive(userid, touserid);
//现实开发中用属性获取信息 详情请看聊天记录
StringBuilder sb = new StringBuilder();
if (message != null)
{
//获取性别
GetSex(touserid);
//内容
sb.Append("<div class=\"top_all\"><div class=\"top_title1\"><span style=\"color:#000000;\">[<span style=\"color:#ff0000;\">" + sex + "</span>]</span> ");
sb.Append(message.TrueName.ToString());
sb.Append(" ");
sb.Append(Convert.ToDateTime(message.Chattime).ToString("yyyy-MM-dd HH:mm:ss"));
sb.Append("</div><div class=\"top_content1\">");
sb.Append(message.Content);
sb.Append("</div></div>");
//标记已读
manage.isRead(userid, touserid, message.Id);
}
return sb.ToString();
}
这只是最主要的思路,当然之前还要做很多事情,比如说:div+css、ps等啊,这些就不累赘了,当然在实现的过程中估计还会遇到一些小问题的,我想这些小问题都很简单啦,百度一下就OK啦,此处也不累赘了。看下效果图吧,呵呵……
好了,下面是喊口号时间啦:今天是2011年最后一天,无论怎样就这样混过去了,2012年自己一定要有所突破,有所作为,一定!
PS:Tandy Tang祝大家在新的一年(2012)里写代码写的愉快!