CppCMS
|
<!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>