I'm trying to build a basic chat site and have four files: chat.html, scripts.html, load.php, and send.php.
Here they are:
chat.html:
<html>
<head>
<title>Josh's Python Chat Website</title>
<script type="text/javascript" src="chatscripts.js">
</script>
</head>
<body>
<div id="divUsername" style="
position: absolute;
padding: 0px;
margin: 0px;
top: 10px;
left: 10px;
height: 26px;
width: 400px;">
Username: <input type="text" id="username" />
</div>
<div id="display" style="
border-style: solid;
border-width: 1px;
overflow:auto;
position: absolute;
padding: 0px;
margin: 0px;
top: 46px;
left: 10px;
height:400px;
width:400px;">
</div>
<div id="divLineInput" style="
position: absolute;
padding: 0px;
margin: 0px;
top: 456px;
left: 10px;
height: 26px;
width: 400px;">
<input type="text" id="line" size="50" onkeydown="if(event.keyCode==13) send()" />
<input type="button" id="sendbutton" value="Send" onclick="send()" />
</div>
</body>
</html>
scripts.js:
function load(){
var xmlhttp = new XMLHttpRequest();
var params="";
xmlhttp.open("GET", "load.php", true);
// xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var display = document.getElementById("display");
display.innerHTML = xmlhttp.responseText;
display.scrollTop = display.scrollHeight;
}
}
xmlhttp.send(params);
}
function send(){
var xmlhttp = new XMLHttpRequest();
var url="send.php";
var d = new Date();
var username = document.getElementById("username");
if (username.value==null || username.value==""){
alert("Please enter a username.");
username.focus();
return false;
}
var line = document.getElementById("line");
var params= "time=" + d.getTime().toString() + "&user=" + username.value + "&line=" + line.value;
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function(){}
xmlhttp.send(params);
document.getElementById("line").value = "";
load();
line.focus();
}
load();
setInterval("load()", 3000);
load.php:
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "password";
$dbname = "website";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);
$query = "select * from chat";
$result = mysql_query($query);
$num = mysql_numrows($result);
$response = "";
$i = 0;
while($i < $num){
$response .= "<p>" . mysql_result($result, $i, "user") . ": " . mysql_result($result, $i, "line") . "</p>";
$i++;
}
mysql_free_result($result);
mysql_close($conn);
echo $response;
?>
and finally, send.php:
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "password";
$dbname = "website";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);
$query = "insert into chat (time, user, line) values ('" . $_GET['time'] . "', '" . $_GET['user'] . "', '" . $_GET['line'] . "')";
mysql_query($query);
mysql_close($conn);
?>
The site loads chat entries I put insert into the mysql database using the command line client. send.php works as well, since when i call
localhost/send.php?time=12345&user=Herrturtur&line=HelloWorld
in my browser's address bar, "Herrturtur: HelloWorld" shows up in the chat window upon reload.
The script for creating the database is as follows:
create table chat (time INT(16), user VARCHAR(256), line TEXT);
So I figure it must be the send() function in scripts.js. After changing the request type to GET I had no more luck than this way, so I'm posting this version. What's wrong with my code?