CppCMS
json_rpc_chat/index.html Header File
<!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>