Javascript Chat

[stephenalistoun]

Hi all,

I can not see the messages when other people enter in text but when I enter the text i eventually see the messages. What could I be doing wrong in my Javascript Code:

<script type="text/javascript">

function ajaxRequest()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


function init()
{
loadURL("checkUpdate.php");

clearInterval(mTimer);

mTimer = setTimeout("init()",1000);
}


function loadURL(url)
{
mygetrequest=new this.ajaxRequest()
mygetrequest.onreadystatechange=function()
{
if (mygetrequest.readyState==4 || mygetrequest.readyState=="complete")
{
processData(mygetrequest.responseText); //download successful
}
}

mygetrequest.open("GET", url, true);
mygetrequest.send(null);
}

function processData(responseText)
{
var countValue = responseText;

if(countValue > 0)
{
showChatData("getcd.php");
}
}




function showChatData(url)
{
var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();

mygetrequest=new this.ajaxRequest()
mygetrequest.onreadystatechange=function()
{
if (mygetrequest.readyState==4 || mygetrequest.readyState=="complete")
{
showData(mygetrequest.responseText); //download successful
}
}

mygetrequest.open("GET", url, true);
mygetrequest.send(null);
}



function showData(responseText)
{
document.getElementById("txtHint").innerHTML = responseText; /*mygetrequest.responseText;*/

var objDiv = document.getElementById("leftHand");

objDiv.scrollTop = objDiv.scrollHeight;

}

function checkEnter(e)
{
var keynum;
var keychar;
var numcheck;

if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}

if(keynum == 13)
{
insertData();
}

}


function insertData()
{
str = document.getElementById("chatText").value;

if(str == "")
{
alert("Please enter in Text");
}

else
{
font = document.getElementById("fontStyle").value;

var url = "insertRow.php?value=" + str +"&font=" + font;

var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();

mygetrequest=new this.ajaxRequest()

mygetrequest.onreadystatechange=function()
{
if (mygetrequest.readyState==4)
{
if (mygetrequest.status == 200)
{
init();
}
else
{
alert("status is " + mygetrequest.status);
}
}
}
mygetrequest.open("GET", url + bustcacheparameter, true);
mygetrequest.send(null);

document.getElementById("chatText").value = "";

clearInterval(mTimer);

init();
}
}
</script>

Thanks Stephen

[sillyboy]

You need to use code tags, and you know it isn't possible to use JavaScript alone to "chat" with somebody else. How is your php implemented?

[stephenalistoun]

Hey thanks for your help but i found out that there something wrong with my timers in Javascript because when I use methods instead the chat works perfectly.

Thanks,

Stephen

<script type="text/javascript">

function ajaxRequest()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


function init()
{
loadURL("checkUpdate.php");

clearInterval(mTimer);

mTimer = setTimeout("init()",1000);
}


function loadURL(url)
{
mygetrequest=new this.ajaxRequest()
mygetrequest.onreadystatechange=function()
{
if (mygetrequest.readyState==4 || mygetrequest.readyState=="complete")
{
processData(mygetrequest.responseText); //download successful
}
}

mygetrequest.open("GET", url, true);
mygetrequest.send(null);
}

function processData(responseText)
{
var countValue = responseText;

if(countValue > 0)
{
showChatData("getcd.php");
}
}




function showChatData(url)
{
var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();

mygetrequest=new this.ajaxRequest()
mygetrequest.onreadystatechange=function()
{
if (mygetrequest.readyState==4 || mygetrequest.readyState=="complete")
{
showData(mygetrequest.responseText); //download successful
}
}

mygetrequest.open("GET", url, true);
mygetrequest.send(null);
}



function showData(responseText)
{
document.getElementById("txtHint").innerHTML = responseText; /*mygetrequest.responseText;*/

var objDiv = document.getElementById("leftHand");

objDiv.scrollTop = objDiv.scrollHeight;

}

function checkEnter(e)
{
var keynum;
var keychar;
var numcheck;

if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}

if(keynum == 13)
{
insertData();
}

}


function insertData()
{
str = document.getElementById("chatText").value;

if(str == "")
{
alert("Please enter in Text");
}

else
{
font = document.getElementById("fontStyle").value;

var url = "insertRow.php?value=" + str +"&font=" + font;

var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();

mygetrequest=new this.ajaxRequest()

mygetrequest.onreadystatechange=function()
{
if (mygetrequest.readyState==4)
{
if (mygetrequest.status == 200)
{
init();
}
else
{
alert("status is " + mygetrequest.status);
}
}
}
mygetrequest.open("GET", url + bustcacheparameter, true);
mygetrequest.send(null);

document.getElementById("chatText").value = "";

clearInterval(mTimer);

init();
}
}
</script>

<?php
session_start();
include("../../config.php");

/*$sql = "SELECT COUNT(*) AS CON FROM chat 
											WHERE timer BETWEEN '".date("Y-m-d G:i:s")."' - INTERVAL '10' SECOND
											  AND '".date("Y-m-d G:i:s")."' + INTERVAL '10' SECOND 
											 ";*/

/*******checkUpdate.php***********/

$sql = "SELECT COUNT(*) AS CON FROM chat";								 
	   
$result = mysql_query($sql);

$row = mysql_fetch_array($result);

echo $row['CON'];


?>

/***************getcd.php(Shows Chat Data)**********/

<?php
	session_start();
	
	include("../../config.php");
	
	
	/****************************************Show Members*******************************************/
	
	
	$onlineMembersSql = "SELECT * FROM users WHERE chatOnline BETWEEN '".date("Y-m-d G:i:s")."' - INTERVAL '3' MINUTE
       AND '".date("Y-m-d G:i:s")."' + INTERVAL '3' MINUTE";
	    
	$resultChatUsers = mysql_query($onlineMembersSql);
	
	
	/*****************************************Get Chat Login ****************************************/
	
	$sql = "SELECT * FROM users WHERE username = '".$_SESSION['username']."'";
	
	$getTime = mysql_query($sql);
	
	$getTimeRow = mysql_fetch_array($getTime);
	
	
	//$sql = "SELECT * FROM chat WHERE timer >= '".$getTimeRow['chatLogin']."'";
	
	
	$sql = "SELECT * FROM chat";
	
	
	
	$result = mysql_query($sql);
	
	$smileys = array("-)" , "0)" , ".)" , "*)" , "<>" , "=)" , "0()0" , 
					 "(:)" , "):(" , "x=x" , "(?)" , ":(" , "0(" , ";(" , "::)" , 
					 "s=s" , "t=t" , "(L)" , ";-" , "(->)" , "(;;)" , "m=m" , "8=8" , "(**)",
					 "(!)" , ".(" ,  ")00(" , "(^^)"  , "(00)" , "([0])" );
	
	
	/************************Updating Date for Chat Site(To Check who is online)**************************/
	
	$sql = "UPDATE users SET chatOnline = '". date("Y-m-d G:i:s") ."' WHERE username = '".$_SESSION['username']."'";
	
	mysql_query($sql);
	
	/**********************************ChatOnlineData***********************************************/
	
	$sql = "SELECT * FROM users WHERE chatOnline BETWEEN '".date("Y-m-d G:i:s")."' 
       AND '".date("Y-m-d G:i:s")."' + INTERVAL '5' MINUTE";
	   
	$resultChatUsers = mysql_query($sql);
	
	/******************************Show the Chat Data************************************/

		
?>
<script type="text/javascript">
	var objDiv = document.getElementById("leftHand");
			
	objDiv.scrollTop = objDiv.scrollHeight;
	
</script>

	<style>
	.leftHand
	{
		height:300px;
		overflow-y:scroll;
		position:relative;
		width:550px;
		background-color:#F2F2F2;
	}
	
	.rightHand
	{
		height:300px;
		overflow-y:scroll;
		position:absolute;
		caption-side:right;
		background-color:#666666;
		width:155px;
		left:550px;
		top:0px;
	}
	.main
	{
		height:300px;
		position:relative;
	}
	
	</style>
<div class="main">

	<div class="leftHand" id="leftHand">
		<table border="0">
			<?php
			while($row = mysql_fetch_array($result))
			{
				$commentColumn = $row['chatComment'];
				
				for($i = 0 ; $i < count($smileys); $i++)
				{
					$image = $i + 1;
					$commentColumn = str_replace($smileys[$i], "<img src='smileys/".$image.".gif' class='imageLower'>" , $commentColumn);
				}
				
				
				
				?>
				<tr>
					<td valign="middle">
						
						<span class="chatFontSize"><?php echo $row['chatUser']; ?></span>
					</td>
					<td valign="middle" height="25">
							<font class="chatFontSize2" face="<?php echo $row['fontType'] ?>"><?php echo $commentColumn ?></font>
						
					</td>
				</tr>
			<?php
			}
			?>	
		</table>
	
	</div>

	<div class="rightHand">
		<table>
			<tr>
				<td>
					
				</td>
			</tr>
		<?php
		while($row = mysql_fetch_array($resultChatUsers))
		{ 
		?>
			<tr>
				<td>
					<img src="../../include/images/user.gif">
				</td>
				<td valign="middle">
					<span class="memberOnlineText"><?php echo $row['username']; ?></span>
				</td>
			</tr>
		<?php
		}
		?>	
	</table>
		
	</div>
</div>

[hielo]

try:

...
function loadURL(url)
{
mygetrequest=new ajaxRequest();
...
}

[stephenalistoun]

hey hielo,

Thanks for your reply but i tried that but it still doesn't work i just found this crazy.

regards

stephen

[hielo]

did you change:

...=new this.ajaxRequest();

to

...=new ajaxRequest();

everywhere?

Do you have URL? Most likely you are having a synchronization problem since you are submitting ajax request using the same variable without making sure that any previous request has completed.

[praveenvarghese]

HI Friend,
Do not go for an XML http Request and that hurts too much. So go fot this one. Make an Ajax Request and link it with a PHP page which writes the content typed by the user automatically into an XML file and then when the user wanna see the chat room direct in to the new page created. Do you get me yaar? If you have learned it from Head First Javascript then the code to do that is given there too. So try that out! Use Ajax Request which links the client to the server and provides good info.
Did you find this piece of info useful?