Untitled

<style type="text/css">
    td
    {
        font-family: verdana;
        font-size: 10pt;
        border: 1px solid black;
        padding: 8px;
        background-color: #EEE;
    }
</style>
<script type="text/javascript">
    var last;

    function init()
    {
        websocket = new WebSocket("ws://localhost/chat");

        websocket.onopen    = function(data) { onOpen(data);    };
        websocket.onclose   = function(data) { onClose(data);   };
        websocket.onmessage = function(data) { onMessage(data); };
        websocket.onerror   = function(data) { onError(data);   };
    }

    function onOpen(data)
    {
        addLine("SERVER","Connected.");
    }

    function onClose(data)
    {
        addLine("SERVER","Disconnected.");
    }

    function onMessage(data)
    {
        data = data.data;

        switch(data)
        {
            case "\x02":
                sendMessage(last);
                break;

            case "\x03":
                input  = document.getElementById("input");
                button = document.getElementById("button");

                input.value     = "";
                input.disabled  = false;
                button.disabled = false;

                break;

            default:
                pos = data.indexOf(" ");
                addLine(data.substring(0,pos),data.substring(pos,data.length));
                break;
        }
    }

    function onError(data)
    {
        addLine("ERROR",data.data);
    }

    function sendMessage(data)
    {
        websocket.send(data);
        last = data;
    }

    function send()
    {
        input  = document.getElementById("input");
        button = document.getElementById("button");

        sendMessage(input.value);

        input.disabled  = true;
        button.disabled = true;
    }

    function addLine(user,line)
    {
        log = document.getElementById("log");
        tr  = document.createElement("tr");
        td1 = document.createElement("td");
        td2 = document.createElement("td");

        td1.innerHTML = "<b>" + user + "</b>";
        td2.innerHTML = line;

        tr.appendChild(td1);
        tr.appendChild(td2);
        log.appendChild(tr);
    }
</script>
<body onLoad="init()">
    <table id="log" cellspacing="8" cellpadding="0">
    </table>
    <input id="input" type="text"/>
    <button id="button" onClick="send()">Send</button>
</body>