<!DOCTYPE html>
<html>
<head>
    <title>WebSockets Client</title>
    <style>
        body {
            font-family:Arial, Helvetica, sans-serif;
        }
        #container{
            border:5px solid grey;
            width:800px;
            margin:0 auto;
            padding:10px;
        }
        #chatLog{
            padding:5px;
            border:1px solid black;
        }
        #chatLog p {
            margin:0;
        }
        .event {
            color:#999;
        }
        .warning {
            font-weight:bold;
            color:#CCC;
        }
    </style>
</head>
<body>
    <div id="wrapper">
    
        <div id="container">
    
            <h1>WebSockets Client</h1>
    
            <div id="chatLog">
    
            </div>
            <p id="examples">e.g. try 'help or anything else</p>
    
            <p><input id="text" type="text" /> <button id="send_message">Send Message</button></p>
            
            <p><button id="disconnect">Disconnect from websocket server</button></p>
    
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if (!("WebSocket" in window)) {
                $('#chatLog, input, button, #examples').fadeOut("fast");
                $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
            } else {
                connect();
        
                function connect() {
                    var socket;
                    var host = "ws://{{ DOMAIN }}{{ PATH }}:{{ PORT }}/";
                    var querystring = {% if user.is_authenticated %}'?user_id={{ user.id }}'{% else %}''{% endif %}
        
                    try {
                        var socket = new WebSocket(host+querystring);
        
                        message('<p class="event">Socket Status: ' + socket.readyState);
                        
                        if(socket.readyState == 0){
                            message('<p class="event">WebSocket server not running or not configured correctly');
                        }
        
                        socket.onopen = function() {
                            message('<p class="event">Socket Status: ' + socket.readyState + ' (open)');
                        }
        
                        socket.onmessage = function(msg) {
                            message('<p class="message">Received: ' + msg.data);
                        }
        
                        socket.onclose = function() {
                            message('<p class="event">Socket Status: ' + socket.readyState + ' (Closed)');
                        }
        
                    } catch (exception) {
                        message('<p>Error' + exception);
                    }
        
                    function send() {
                        var text = $('#text').val();
        
                        if (text == "") {
                            message('<p class="warning">Please enter a message');
                            return;
                        }
                        try {
                            socket.send(text);
                            message('<p class="event">Sent: ' + text)
        
                        } catch (exception) {
                            message('<p class="warning">');
                        }
                        $('#text').val("");
                    }
        
                    function message(msg) {
                        $('#chatLog').append(msg + '</p>');
                    }
        
                    $('#text').keypress(function(event) {
                        if (event.keyCode == '13') {
                            send();
                        }
                    });
                    
                    $('#send_message').click(function(){
                        send();
                    });
        
                    $('#disconnect').click(function() {
                        socket.close();
                    });
        
                } //End connect
            } //End else
        });
    </script>
</body>
</html>
