<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="/scripts/json2.js"></script>
<script type="text/javascript" src="/scripts/jsonrpc.js"></script>
<title>Chat Room</title>
<script type="text/javascript">
// Global values:
// RPC object with two methods:
//
// get(counter), returns array of objects with properties author and message
// post(author,message) posts new chat message
//
rpc = new JsonRPC('/chat',['get'],['post']);
// Messages counter - where to get new messages from, parameter for rpc.get
message_count = 0;
function make_error(what,e)
{
document.getElementById('error_message').innerHTML = what + ': ' + e.type +': ' + e.error;
}
rpc.get.on_result = function(messages) {
var messagesHtml = document.getElementById('messages');
for(var i=0;i<messages.length;i++) {
m=messages[i];
messagesHtml.innerHTML+='<dt>' + m.author +'</dt>' +
'<dd>' + m.message + '</dd>';
message_count++;
}
restart();
}
rpc.get.on_error = function(e) {
make_error('Getting New Messages',e);
document.getElementById('reconnect').disabled = false;
}
rpc.post.on_result = function() {
// reset the form content
document.getElementById("message").value = '';
}
rpc.post.on_error = function(e) {
make_error('Posting New Messages',e);
}
function restart()
{
rpc.get(message_count);
}
function reconnect_to_server()
{
message_count = 0;
document.getElementById('error_message').innerHTML = '';
document.getElementById('messages').innerHTML = '';
document.getElementById('reconnect').disabled = true;
restart();
return false;
}
function send_data() {
author = document.getElementById('author').value;
message = document.getElementById("message").value;
rpc.post(author,message);
return false;
}
</script>
</head>
<body onload='restart()'>
<h1>Chat room</h1>
<form id="theform" >
<p>Name: <input id="author" type="text" value="" /></p>
<p>
Message: <input id="message" type="text" value="" /></p>
<input type="submit" value="Send" onclick="return send_data()"/>
<input disabled="disabled" id='reconnect' type='submit' value='Reconnect' onclick='return reconnect_to_server()'>
</p>
<p id='error_message'></p>
</form>
<dl id="messages">
</dl>
</body>
