Search code examples
javascriptphpgoogle-chromewampserverportforwarding

php chat causes browser to freeze when tested on wamp 32 bit


This seems to be a recurring problem across browsers (IE, Firefox, Opera, Chrome, Safari, etc.) I thought about opening developer tools in chrome (for debugging), but that also freezes.

Seeing as port forwarding is router dependent (and as I had recently swapped my notebook's hard-drive) I went in and disable it, but still had the same issue. Here's the code for the chat page.

<!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>
<style type="text/css">
#smileys{ 
display:none;
padding-top:3px;
}
button{
border-color:#000000;
border-width:1px;
}
#mn{
width:50px;
}
.ooo{
border:solid;
border-color:black;
border-width:1px;
}
#main{
position:absolute;
padding-bottom:2px;
height:inherit;
width:300px;
border:solid;
border-color:black;
border-width:2px;
}
#posts{ 
border-bottom:solid 1px;
height:401px;
overflow-y:scroll;
background-color:#e2e2e2;
}
</style>
<script type="text/javascript">
var scroller = function(){
posts = document.getElementById("posts");
posts.scrollTop = posts.scrollHeight; 
}
var menu=3;
var checksum = function(){
if (menu == 3){
 document.getElementById('smileys').style.display="block";
 document.bob.smileyhider.innerHTML="&minus;";
 menu=1;
 }
else{
 document.getElementById('smileys').style.display="none";
 document.bob.smileyhider.innerHTML="+";
 menu=3;
 }
}

//Chat ajax loader
function update(){
var xhr;
if (window.XMLHttpRequest){  xhr = new XMLHttpRequest(); }
else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
xhr.onreadystatechange = function(){
  if (xhr.readyState==4 && xhr.status == 200){
  document.getElementById('posts').innerHTML = xhr.responseText;
 }
}
setInterval(update, 200);
xhr.open("GET","chatlog<?php echo date("d");?>.txt",true);
xhr.send(null);
} 
update(); 
</script>
<!--chatting codes-->
<?php
//Chat Functions
function codes(){       
$n = (isset($_REQUEST["sig"]) ? $_REQUEST["sig"] : null);
$input = (isset($_REQUEST["input"]) ? $_REQUEST["input"] : null);
$d = date("h:i A");
$nm = "<font color='black' size='2' face='times new roman'><b>(". htmlcheck($n). ")</b></font><img/> &raquo; <font size='2'>". $d
. "</font><b>:</b></font>&emsp;<font size='3' face='times new roman'>"/*. smiles($input)*/. $input. "</font><br/>";
if($input==""||$n==""){
$nm = " ";
}
$file = "chatlog". date('d'). ".txt";
$data = fopen($file, 'a+');
fwrite($data, $nm);
fclose($data);
}

function smiles($ext){
$smile = array(        
    '<' => '&lt;',
    '>' => '&gt;',
    '&' => '&amp;'
    );
return (strtr($ext, $smile));
}

function htmlcheck($ext){
$code = array(        
    '<' => '&lt;',
    '>' => '&gt;',
    '&' => '&amp;'
    );
return (strtr($ext, $code));
}
?>
</head>
<form method="post" action="chat.php" name="bob">
<body onload="scroller(); update()"><div id="main">
<span id="liner"></form></span></form>
<div id="posts">
<!--insert include()code-->
<?php
//deals with above scripting code
codes();
include("chatlog". date('d'). ".txt");?>
</div><div align="center" id="buttons">
    <button type="submit" class="send">Shout!</button><button type="reset">Reset</button>
        <button onclick="checksum()" type="button" name="smileyhider">+</button><br/>
        <input type="text" disabled="true" id="mn" value="<?php echo (isset($_REQUEST["sig"]) ? $_REQUEST["sig"] : null);; ?>" name="sig" />
    <input name="input" id="input" type="text" class="ooo" maxlength="100" /></div></span></form>
<div id="smileys" align="justify"><center>
<p>Hidden Menu</p>
</center>
<a href="login.php" style="cursor:pointer;"><font color="grey" size="2">Sign-out</font></a>
</div></div></body></html>

It's written in XHTML as a preference; any help would be great, seeing as I can't test the php and javascript when the page is always freezing.

It's also worth mentioning the filesystem php functions work, as the chatlog file is created and named with the proper date. The main problem here is the freezing; since I first had this issue with wamp 64 bit, I tried removing it and re-installing it 32 bit, but the issue still appeared. Wamp doesn't seem like the likely candidate here, nor does the browser (since it appears in all). Any and all help would be nice.


Solution

  • The problem is in your javascript. If the browser locks up, it's because of something that got successfully delivered to it. Looking for fault in the server was misguided.

    In function update you are calling

    setInterval(update, 200);
    

    setInterval creates a recurring timer, so you're creating more and more of these timers every timer interval (at an exponential rate)... it won't take long to have a huge amount of timers all calling update every 200ms. Within one second, you'll have 32 active timers. Within 10s, it'll be 1125899906842624 active timers... or rather... Boom.

    Are you sure you didn't mean:

    setTimeout(update, 200);
    

    setTimeout creates a once-only timer.