kaecy/chat.html

## chat.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>using ajax</title>
  <script language="javascript" src="jax.js"></script>
	<style language="css">
		input, textarea {
			font: 10pt courier
		}
	</style>
  </head>

  <body>
	<center>
		<form>
			<!-- mesages -->
			<textarea cols="87" rows="23" name="mesglog">message retrival failure</textarea>
			<br>
			<input type="text" size="10" name="user" value="user">
			<!-- inputer -->
			<input type="text" size="70" name="input" value="message">
			<input type="button" value="Send" onclick="sendData();">
		</form>
	</center>
  </body>
</html>

## collect.cgi
require "hpricot";

project_dir   		= %q(web\site);
content_length 			= Integer(ENV['CONTENT_LENGTH']);
content 				= STDIN.read(content_length);
user, input 			= content.split(" ", 2);

# remove elements

xml = Hpricot( IO.read(%Q(#{project_dir}\\mesg.xml)) );
while xml.children[0].children.length > 47
	xml.children[0].children.shift;
end

xml.children[0].children.last.after ("\t<mesg from=\"" + user + "\">" + input + "</mesg>\n");

# print

IO.write("#{project_dir}\\mesg.xml", xml.to_html);

## jax.js
var app;

function print() {
	app.ui.mesglog.value = retriveData();
}

onload = function() {
	app = {"ui": document.forms[0]};
	print(); // immediately retrive data when the page loads
	setInterval("print()", 5000);
}

function retriveData() {
	var httpRequest = new XMLHttpRequest();

	httpRequest.open("GET", "mesg.xml", false);
	httpRequest.send();

	if (httpRequest.status === 200) {
		var xml = httpRequest.responseXML;

		var ms = xml.getElementsByTagName("mesg");
		var mesgs = [];

		for (var a=0; a < ms.length; ++a)
			mesgs.push(ms[a].getAttribute("from") + ": " + ms[a].innerHTML);
		return mesgs.join("\n");
	}
}

function sendData() {
	var httpRequest = new XMLHttpRequest();
	var data = app.ui.user.value + " " + app.ui.input.value;

	httpRequest.open("POST", "collect.cgi", false);
	httpRequest.send(data);

	app.ui.input.value = '';
}

## mesg.xml
<log>
	<mesg from="ruth">hello</mesg>
	<mesg from="ruth">is anyone here</mesg>
	<mesg from="ruth">hello</mesg>
	<mesg from="ruth">can anyone hear me</mesg>
	<mesg from="ruth">oh right no one is here</mesg>
	<mesg from="ruth">testing 1,2,3</mesg>
	<mesg from="ruth">TESTING!</mesg>
</log>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	<head>
	<title>using ajax</title>
	<script language="javascript" src="jax.js"></script>
	<style language="css">
	input, textarea {
	font: 10pt courier
	}
	</style>
	</head>

	<body>
	<center>
	<form>
	<!-- mesages -->
	<textarea cols="87" rows="23" name="mesglog">message retrival failure</textarea>
	<br>
	<input type="text" size="10" name="user" value="user">
	<!-- inputer -->
	<input type="text" size="70" name="input" value="message">
	<input type="button" value="Send" onclick="sendData();">
	</form>
	</center>
	</body>
	</html>
	require "hpricot";

	project_dir = %q(web\site);
	content_length = Integer(ENV['CONTENT_LENGTH']);
	content = STDIN.read(content_length);
	user, input = content.split(" ", 2);

	# remove elements

	xml = Hpricot( IO.read(%Q(#{project_dir}\\mesg.xml)) );
	while xml.children[0].children.length > 47
	xml.children[0].children.shift;
	end

	xml.children[0].children.last.after ("\t<mesg from=\"" + user + "\">" + input + "</mesg>\n");

	# print

	IO.write("#{project_dir}\\mesg.xml", xml.to_html);
	var app;

	function print() {
	app.ui.mesglog.value = retriveData();
	}

	onload = function() {
	app = {"ui": document.forms[0]};
	print(); // immediately retrive data when the page loads
	setInterval("print()", 5000);
	}

	function retriveData() {
	var httpRequest = new XMLHttpRequest();

	httpRequest.open("GET", "mesg.xml", false);
	httpRequest.send();

	if (httpRequest.status === 200) {
	var xml = httpRequest.responseXML;

	var ms = xml.getElementsByTagName("mesg");
	var mesgs = [];

	for (var a=0; a < ms.length; ++a)
	mesgs.push(ms[a].getAttribute("from") + ": " + ms[a].innerHTML);
	return mesgs.join("\n");
	}
	}

	function sendData() {
	var httpRequest = new XMLHttpRequest();
	var data = app.ui.user.value + " " + app.ui.input.value;

	httpRequest.open("POST", "collect.cgi", false);
	httpRequest.send(data);

	app.ui.input.value = '';
	}
	<log>
	<mesg from="ruth">hello</mesg>
	<mesg from="ruth">is anyone here</mesg>
	<mesg from="ruth">hello</mesg>
	<mesg from="ruth">can anyone hear me</mesg>
	<mesg from="ruth">oh right no one is here</mesg>
	<mesg from="ruth">testing 1,2,3</mesg>
	<mesg from="ruth">TESTING!</mesg>
	</log>