web.html

<!DOCTYPE html>

<html lang="es">

    <head>
        <title>WebSocket Echo Test</title>
        <meta charset="utf-8" />
    </head>

    <body>

        <header>
            <h1>WEBSOCKET ECHO TEST</h1>
        </header>

        <section>

            <article>

                <h2>CONSOLE:</h2>

                <p><textarea id="console" cols="49" rows="15" readonly="readonly"></textarea></p>

                <p><input id="msgbox" type="text" size="50" placeholder="Escriba un mensaje, enter para enviar!" /></p>

                <p><input id="connect" type="button" value="CONNECT" /></p>

            </article>

        </section>

    </body>

    <script type="text/javascript">

        window.onload = $init;
        window.onbeforeunload = $finish

        var sock = null;
        var wsuri = "ws://localhost:1234/echo";
        var wscon = false;

        function $init()
        {
            document.getElementById("msgbox").focus();
            document.getElementById("msgbox").onkeypress = sender;

            document.getElementById("connect").onclick = active;
        }

        function $finish()
        {
            if(wscon)
                sock.send("$exit");
        }

        function active()
        {
            sock = new WebSocket(wsuri);

            sock.onopen = function()
            {
                wscon = true;
                consoleAdd("connected to " + wsuri +"\nType $exit to disconnect!.");
                document.getElementById("connect").disabled = true;
            }

            sock.onclose = function(e)
            {
                wscon = false;
                consoleAdd("connection closed (" + e.code + ")\n\n");
                document.getElementById("connect").disabled = false;
            }

            sock.onmessage = function(e)
            {
                consoleAdd("SERVER >> " + e.data);
            }
        }

        function sender(event)
        {
            if(event.keyCode == 13 && wscon)
                sock.send(this.value);
        }

        function consoleAdd(msg)
        {
            document.getElementById("console").value += msg + "\n";
            document.getElementById('console').scrollTop = document.getElementById('console').scrollHeight;

            document.getElementById("msgbox").value = "";
            document.getElementById("msgbox").focus();
        }

    </script>

</html>