examples/json_rpc_chat/index.html - master - zOMGdev/cppcms

examples/json_rpc_chat/index.html
91 строка2 KB
Artyom Beilis
Created a simple JsonRPC based chat server example, shows:
11 дек 2011, 13:02
11 дек 2011, 13:027da94a4
<!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>