用JS代码解决一个聊天系统聊天消息是否刷屏
2013-12-25 15:29
155 查看
今天解决了一个小问题，关于怎么使用JS代码判断聊天系统中聊天消息是否刷屏的问题
解决代码如下：
aspx中的代码：
<%@ page language="C#" autoeventwireup="true" CodeFile="Chat.aspx.cs" Inherits="Chat" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<%-- <link rel="stylesheet" href="css/niftyCorners.css" />
<link rel="stylesheet" href="css/style.css" />--%>
<link rel="Stylesheet" href="css/base.css" />
<link rel="Stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/AjaxFunctions.js"></script>
<script type="text/javascript" src="js/niftycube.js"></script>
</head>
<body>
<div class="header">
<div class="top_nav">
<div class="top_inner">
<div class="top_wecome fl pr30 w200"><span>欢迎来到--<%= name %></span></div>
<div class="top_info fr w200"><a href="http://training.hnteacher.net/">返回首页</a><span>|</span><a href="#" onclick="javascript:window.close()">退出</a></div>
</div>
</div>
<!--顶部菜单结束-->
</div>
<form id="Form1" method="post" runat="server">
<div id="container">
<div class="top_banner"></div>
<div id="content">
<div class="con_outer">
<div class="con_inner">
<div class="con-center">
<div class="pt15 pb10 pr20 pl20">
<div class="chat_left fl" style=" width:633px;">
<div class="chat_pt fl" >
<div class="mt10 ml10 mb50 mr10">
<div id="chatDiv" style="overflow:scroll;height:360px;width:100%;border-color:blue;border-style:initial">
<ul id="chatbuffer"/>
<%--<li><span class="time grad">13:42</span> 欢迎 <span class="red">倾倾我</span> 进入聊天室</li>--%>
</div>
</div>
</div>
<div >
<%-- <asp:CheckBox ID="CheckBox1" runat="server" Text="停止聊天信息刷屏" onclick="Checked_Click"/>--%>
//添加一个checkbox让其根据自己要求来判断是否需要把聊天室的聊天消息刷屏
聊天信息是否刷屏：<input type="checkbox" id="ch_Refresh" checked="checked" onclick="CheckRefresh()"/>
</div>
<div class=" pt10 pl10 pub_note">
<label id="username">输入内容: </label>
<input type="text" id="mytext" onkeydown="captureReturn(event)" class="chat_input"/>
<a href="#" onclick="sendMsg()" class="btn_ico"></a>
<div style="clear:both"></div>
</div>
<div class="note_info grad lh150 pt10">
<p>按回车直接发送</p>
<p>请文明聊天，禁止发布违法等信息</p>
</div>
</div>
<div class="chat_list fr" >
<h1>聊天室成员</h1>
<div id="userpane">
<ul id="userlist" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<!--页脚-->
<p><span>湖南省中小学教师继续教育指导中心 版权所有</span> </p>
</div>
</div>
</div>
</form>
<script type="text/javascript">
//只要进入页面就执行如下方法
window.onload = function () {
sniffBrowserType();
showLoadScreen();
setTimers();
setFocus('mytext');
}
//如果checkbox被选中则执行刷新功能，否则不刷新聊天信息
function CheckRefresh() {
var chk = document.getElementById("ch_Refresh");
if (chk.checked) {
setTimers();
} else {
ClearSetTimers();
}
}
</script>
</body>
</html>
JS文件中的代码：
//Global variables
var timeID;
var refreshRate = 2000; // two seconds
var rnd = Math.random();
var id = 0;
var isFirefox;
var isIE;
//var XmlHttp;
var AjaxServerPageName;
AjaxServerPageName = "Server.aspx";
//Creating and setting the instance of appropriate XMLHTTP Request object to ajaxXmlHttp variable
function getAjax()
{
var XmlHttp;
//Creating object of XMLHTTP in IE
try
{
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
XmlHttp = null;
}
}
//Creating object of XMLHTTP in Mozilla and Safari
if(!XmlHttp && typeof XMLHttpRequest != "undefined")
{
XmlHttp = new XMLHttpRequest();
}
return XmlHttp;
}
// Get browser type
function sniffBrowserType() {
isFirefox = ( navigator.appName == "Netscape" );
isIE = (navigator.appName == "Microsoft Internet Explorer" );
}
// Capture the enter key on the input box and post message
function captureReturn( event )
{
if(event.which || event.keyCode)
{
if ((event.which == 13) || (event.keyCode == 13))
{
postText();
return false;
}
else {
return true;
}
}
}
//点击按扭发送消息
function sendMsg() {
postText();
}
//关闭窗口时调用后台退出用户的操作
function exitWind() {
if(confirm('你确定要退出当前聊天室吗？'))
{
id = location.search.substring(37, location.search.length);
userid = location.search.substring(1, 37);
rnd++;
url = 'ExitChat.aspx?chatId='+ id+'&userid='+ userid;
req = getAjax();
req.onreadystatechange = function(){
if( req.readyState == 4 && req.status == 200 ) {
updateAll();
}
}
req.open( 'GET', url, true );
req.send( null );
}
return;
}
// Start the update timer 刷新的时间
function setTimers()
{
//alert("cccc");
timeID = window.setTimeout("updateAll()", refreshRate);
//alert(timeID);
}
//清楚刷新时间及不刷新
function ClearSetTimers()
{
window.clearTimeout(timeID);
}
// Start to update and reset the update timer 开始更新和重置更新定时器
function updateAll()
{
//window.clearTimeout( timeID );
getUserList();
setTimers();
}
function getUserList()
{
id = location.search.substring(37, location.search.length);
rnd++;
url = 'Server.aspx?action=UserList&session='+ rnd+'&chatId='+ id;
req = getAjax();
req.onreadystatechange = function(){
if( req.readyState == 4 && req.status == 200 ) {
obj = getElement("userlist");
obj.innerHTML = req.responseText;
getBufferText();
}
}
req.open( 'GET', url, true );
req.send( null );
}
function getBufferText()
{
id = location.search.substring(37, location.search.length);
rnd++;
url = 'Server.aspx?action=GetMsg&session='+ rnd +'&chatId='+id;
req = getAjax();
req.onreadystatechange = function(){
if( req.readyState == 4 && req.status == 200 ) {
obj = getElement("chatbuffer");
obj.innerHTML = req.responseText;
//CalculateScrollTop(chatpane)
//obj.scrollTop = obj.scrollHeight;
scrollChatPane();
//FocusWindow();
}
}
req.open( 'GET', url , true );
req.send( null );
}
function CalculateScrollTop(ScrObj) {
var ObjID = eval(ScrObj);
var ScrollHeight = ObjID.scrollHeight;
var ClientHeight = ObjID.clientHeight;
var ScrollTop = ScrollHeight.scrollTop;
if (ScrollHeight > ClientHeight) {
ScrollTop = parseInt(ScrollHeight - ClientHeight);
}
ObjID.scrollTop = ScrollTop;
}
function postText()
{
rnd++;
chatbox = getElement( "mytext" );
chat = chatbox.value;
chatbox.value = "";
//alert(chat);
userid = location.search.substring(1, 37);
id = location.search.substring(37, location.search.length);
url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' + encodeURIComponent(chat) + '&session=' + rnd+'&chatId='+id;
req = getAjax();
req.onreadystatechange = function(){
if( req.readyState == 4 && req.status == 200 ) {
updateAll();
}
}
req.open( 'GET', url, true );
req.send( null );
}
function getElement( id )
{
if( isIE ) {
return document.all[ id ];
}
else {
return document.getElementById( id );
}
}
function showLoadScreen()
{
var loading = "<div style=\"text-align:center;color:red;\"><h5>loading...</h5></div>";
chat = getElement( "chatbuffer" );
chat.innerHTML = loading;
user = getElement( "userlist" );
user.innerHTML = loading;
}
function scrollChatPane()
{
var obj = document.getElementById("chatDiv");
obj.scrollTop = obj.scrollHeight;
}
function setFocus(ControlName)
{
var control = document.getElementById(ControlName);
if( control != null )
{
control.focus();
}
}
function FocusWindow()
{
//TODO: FireFox doesn't work?
window.focus();
}
最终效果如下：
解决代码如下：
aspx中的代码：
<%@ page language="C#" autoeventwireup="true" CodeFile="Chat.aspx.cs" Inherits="Chat" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<%-- <link rel="stylesheet" href="css/niftyCorners.css" />
<link rel="stylesheet" href="css/style.css" />--%>
<link rel="Stylesheet" href="css/base.css" />
<link rel="Stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/AjaxFunctions.js"></script>
<script type="text/javascript" src="js/niftycube.js"></script>
</head>
<body>
<div class="header">
<div class="top_nav">
<div class="top_inner">
<div class="top_wecome fl pr30 w200"><span>欢迎来到--<%= name %></span></div>
<div class="top_info fr w200"><a href="http://training.hnteacher.net/">返回首页</a><span>|</span><a href="#" onclick="javascript:window.close()">退出</a></div>
</div>
</div>
<!--顶部菜单结束-->
</div>
<form id="Form1" method="post" runat="server">
<div id="container">
<div class="top_banner"></div>
<div id="content">
<div class="con_outer">
<div class="con_inner">
<div class="con-center">
<div class="pt15 pb10 pr20 pl20">
<div class="chat_left fl" style=" width:633px;">
<div class="chat_pt fl" >
<div class="mt10 ml10 mb50 mr10">
<div id="chatDiv" style="overflow:scroll;height:360px;width:100%;border-color:blue;border-style:initial">
<ul id="chatbuffer"/>
<%--<li><span class="time grad">13:42</span> 欢迎 <span class="red">倾倾我</span> 进入聊天室</li>--%>
</div>
</div>
</div>
<div >
<%-- <asp:CheckBox ID="CheckBox1" runat="server" Text="停止聊天信息刷屏" onclick="Checked_Click"/>--%>
//添加一个checkbox让其根据自己要求来判断是否需要把聊天室的聊天消息刷屏
聊天信息是否刷屏：<input type="checkbox" id="ch_Refresh" checked="checked" onclick="CheckRefresh()"/>
</div>
<div class=" pt10 pl10 pub_note">
<label id="username">输入内容: </label>
<input type="text" id="mytext" onkeydown="captureReturn(event)" class="chat_input"/>
<a href="#" onclick="sendMsg()" class="btn_ico"></a>
<div style="clear:both"></div>
</div>
<div class="note_info grad lh150 pt10">
<p>按回车直接发送</p>
<p>请文明聊天，禁止发布违法等信息</p>
</div>
</div>
<div class="chat_list fr" >
<h1>聊天室成员</h1>
<div id="userpane">
<ul id="userlist" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<!--页脚-->
<p><span>湖南省中小学教师继续教育指导中心 版权所有</span> </p>
</div>
</div>
</div>
</form>
<script type="text/javascript">
//只要进入页面就执行如下方法
window.onload = function () {
sniffBrowserType();
showLoadScreen();
setTimers();
setFocus('mytext');
}
//如果checkbox被选中则执行刷新功能，否则不刷新聊天信息
function CheckRefresh() {
var chk = document.getElementById("ch_Refresh");
if (chk.checked) {
setTimers();
} else {
ClearSetTimers();
}
}
</script>
</body>
</html>
JS文件中的代码：
//Global variables
var timeID;
var refreshRate = 2000; // two seconds
var rnd = Math.random();
var id = 0;
var isFirefox;
var isIE;
//var XmlHttp;
var AjaxServerPageName;
AjaxServerPageName = "Server.aspx";
//Creating and setting the instance of appropriate XMLHTTP Request object to ajaxXmlHttp variable
function getAjax()
{
var XmlHttp;
//Creating object of XMLHTTP in IE
try
{
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
XmlHttp = null;
}
}
//Creating object of XMLHTTP in Mozilla and Safari
if(!XmlHttp && typeof XMLHttpRequest != "undefined")
{
XmlHttp = new XMLHttpRequest();
}
return XmlHttp;
}
// Get browser type
function sniffBrowserType() {
isFirefox = ( navigator.appName == "Netscape" );
isIE = (navigator.appName == "Microsoft Internet Explorer" );
}
// Capture the enter key on the input box and post message
function captureReturn( event )
{
if(event.which || event.keyCode)
{
if ((event.which == 13) || (event.keyCode == 13))
{
postText();
return false;
}
else {
return true;
}
}
}
//点击按扭发送消息
function sendMsg() {
postText();
}
//关闭窗口时调用后台退出用户的操作
function exitWind() {
if(confirm('你确定要退出当前聊天室吗？'))
{
id = location.search.substring(37, location.search.length);
userid = location.search.substring(1, 37);
rnd++;
url = 'ExitChat.aspx?chatId='+ id+'&userid='+ userid;
req = getAjax();
req.onreadystatechange = function(){
if( req.readyState == 4 && req.status == 200 ) {
updateAll();
}
}
req.open( 'GET', url, true );
req.send( null );
}
return;
}
// Start the update timer 刷新的时间
function setTimers()
{
//alert("cccc");
timeID = window.setTimeout("updateAll()", refreshRate);
//alert(timeID);
}
//清楚刷新时间及不刷新
function ClearSetTimers()
{
window.clearTimeout(timeID);
}
// Start to update and reset the update timer 开始更新和重置更新定时器
function updateAll()
{
//window.clearTimeout( timeID );
getUserList();
setTimers();
}
function getUserList()
{
id = location.search.substring(37, location.search.length);
rnd++;
url = 'Server.aspx?action=UserList&session='+ rnd+'&chatId='+ id;
req = getAjax();
req.onreadystatechange = function(){
if( req.readyState == 4 && req.status == 200 ) {
obj = getElement("userlist");
obj.innerHTML = req.responseText;
getBufferText();
}
}
req.open( 'GET', url, true );
req.send( null );
}
function getBufferText()
{
id = location.search.substring(37, location.search.length);
rnd++;
url = 'Server.aspx?action=GetMsg&session='+ rnd +'&chatId='+id;
req = getAjax();
req.onreadystatechange = function(){
if( req.readyState == 4 && req.status == 200 ) {
obj = getElement("chatbuffer");
obj.innerHTML = req.responseText;
//CalculateScrollTop(chatpane)
//obj.scrollTop = obj.scrollHeight;
scrollChatPane();
//FocusWindow();
}
}
req.open( 'GET', url , true );
req.send( null );
}
function CalculateScrollTop(ScrObj) {
var ObjID = eval(ScrObj);
var ScrollHeight = ObjID.scrollHeight;
var ClientHeight = ObjID.clientHeight;
var ScrollTop = ScrollHeight.scrollTop;
if (ScrollHeight > ClientHeight) {
ScrollTop = parseInt(ScrollHeight - ClientHeight);
}
ObjID.scrollTop = ScrollTop;
}
function postText()
{
rnd++;
chatbox = getElement( "mytext" );
chat = chatbox.value;
chatbox.value = "";
//alert(chat);
userid = location.search.substring(1, 37);
id = location.search.substring(37, location.search.length);
url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' + encodeURIComponent(chat) + '&session=' + rnd+'&chatId='+id;
req = getAjax();
req.onreadystatechange = function(){
if( req.readyState == 4 && req.status == 200 ) {
updateAll();
}
}
req.open( 'GET', url, true );
req.send( null );
}
function getElement( id )
{
if( isIE ) {
return document.all[ id ];
}
else {
return document.getElementById( id );
}
}
function showLoadScreen()
{
var loading = "<div style=\"text-align:center;color:red;\"><h5>loading...</h5></div>";
chat = getElement( "chatbuffer" );
chat.innerHTML = loading;
user = getElement( "userlist" );
user.innerHTML = loading;
}
function scrollChatPane()
{
var obj = document.getElementById("chatDiv");
obj.scrollTop = obj.scrollHeight;
}
function setFocus(ControlName)
{
var control = document.getElementById(ControlName);
if( control != null )
{
control.focus();
}
}
function FocusWindow()
{
//TODO: FireFox doesn't work?
window.focus();
}
最终效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web系统实时监控后台是否有新消息的解决办法
- 最近做的一个linux下的聊天系统，遇到的一些问题及解决办法
- 用RMI实现一个简单的实时聊天系统(java语言)
- 解决win2003在系统启动时至少有一个服务或驱动程序产生错误
- ORACLE里怎么能判断一个日期类型的字段是否为空,解决方法:is null
- 在系统启动时至少有一个服务或驱动程序产生错误--解决方法
- 服务端技术进阶(五)分布式系统解决之道：目录、消息队列、事务系统及其他
- 用socket来写一个聊天软件吧（三）实现发送不同的消息
- 发现 一个业务管理系统 解决了 orm 和 前端框架 剩下的 是 业务逻辑 了 。 哈
- 【Android studio】解决 Error:CreateProcess error=216, 该版本的 %1 与您运行的 Windows 版本不兼容。请查看计算机的系统信息，了解是否需要 x86
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
- 解决xp 系统搜索不能用，无法找到运行搜索助理需要的一个文件。您可能需要运行安装?
- Sys.SysProcesses 系统表是一个很重要的系统视图，主要用来定位与解决Sql Server的阻塞和死锁
- 启动 SQL Server 管理 Studio 在 SQL Server 2008R2 中的错误消息:"无法读取此系统上以前注册的服务器的列表" 解决方法
- 请教一个问题，Android应用运行时在调用某个API（比如相机）时，系统如何判断这个应用是否具备相应的权限？
- 纯属巧合，解决了一个困扰许久的问题，关于网卡设置时提示“系统找不到指定文件”。
- 判断本地系统目录下是否存在XML文件，如果不存在就创建一个XMl文件，若存在就在里面执行添加数据
- 解决:未能加载文件或程序集“AjaxControlToolkit”或它的某一个依赖项。系统找不到指定的文件。
- 完成了一个问题的解决 AJAX加入到分子项目的系统中
- android下判断一个应用app是否是系统rom集成的方法