Return to index.html CVS log

Up to [parser3project] / parser3 / tests / httpd / websocket-app

Annotation of parser3/tests/httpd/websocket-app/index.html, revision 1.1

1.1     ! moko        1: # The WebSocket demo: front and back in one file.
        !             2: # The browser opens the page using a usual request, then the JS opens it using ws://.
        !             3: 
        !             4: @main[]
        !             5: ^if($env:HTTP_UPGRADE eq websocket){
        !             6:        ^back[]
        !             7: }{
        !             8:        ^front[]
        !             9: }
        !            10: 
        !            11: 
        !            12: # ---------- the server ----------
        !            13: 
        !            14: @back[][message]
        !            15: ^websocket:accept[]
        !            16: ^while(true){
        !            17:        # wait for a message from the browser, but not longer than a second
        !            18:        $message[^websocket:receive(0.05)]
        !            19:        ^if($message is hash){
        !            20:                ^if($message.type eq close){
        !            21:                        ^break[]
        !            22:                }
        !            23:                ^answer[$message]
        !            24:        }
        !            25:        $counter($counter+1)
        !            26:        ^send_status[]
        !            27: }
        !            28: 
        !            29: 
        !            30: @answer[message]
        !            31: ^if($message.type eq binary){
        !            32:        ^send[ $.type[answer] $.text[got $message.data.size bytes] ]
        !            33: }($message.data eq ping){
        !            34:        ^send[ $.type[pong] ]
        !            35: }{
        !            36:        ^send[ $.type[answer] $.text[$message.data?] ]
        !            37: }
        !            38: 
        !            39: 
        !            40: # what the server tells about itself: the time and resources usage
        !            41: @send_status[]
        !            42: ^send[
        !            43:        $.type[status]
        !            44:        $.counter($counter)
        !            45:        $.time[^date:sql-string[].^eval($status:rusage.tv_usec/1000)[%03.0f]]
        !            46:        $.utime($status:rusage.utime)
        !            47:        $.used($status:memory.used)
        !            48:        $.allocated($status:memory.ever_allocated_since_compact)
        !            49: ]
        !            50: 
        !            51: @send[message]
        !            52: ^websocket:send[^json:string[$message]]
        !            53: 
        !            54: 
        !            55: # ---------- the page ----------
        !            56: 
        !            57: @front[]
        !            58: <!DOCTYPE html>
        !            59: <html>
        !            60: <head>
        !            61: <meta charset="utf-8">
        !            62: <title>WebSocket demo</title>
        !            63: </head>
        !            64: <body align="center">
        !            65: 
        !            66: <h1>WebSocket demo</h1>
        !            67: <p>Connection: <b id="state">connecting...</b> (to connect again, reload the page)</p>
        !            68: <p>Server: <span id="server">nothing yet</span></p>
        !            69: 
        !            70: <p><form onsubmit="sendText(); return false;">
        !            71:        <input id="text" value="Hello">
        !            72:        <button>Send</button>
        !            73:        <button type="button" onclick="sendPing()">Ping</button>
        !            74:        <button type="button" onclick="sendBytes()">Send 1MB</button>
        !            75:        <button type="button" onclick="socket.close(1000)">Close</button>
        !            76: </form></p>
        !            77: 
        !            78: <textarea id="log" cols="80" rows="20" readonly></textarea>
        !            79: 
        !            80: <script>
        !            81:        // same page, but the protocol is WebSocket
        !            82:        var socket = new WebSocket("ws://" + location.host + "/");
        !            83:        var state = document.getElementById("state");
        !            84:        var server = document.getElementById("server");
        !            85:        var log = document.getElementById("log");
        !            86:        var pingTime = 0;
        !            87: 
        !            88:        socket.onopen = function () {
        !            89:                state.textContent = "open";
        !            90:                addToLog("connected");
        !            91:        };
        !            92: 
        !            93:        socket.onclose = function (event) {
        !            94:                state.textContent = "closed";
        !            95:                addToLog("closed, code " + event.code);
        !            96:        };
        !            97: 
        !            98:        // the server has sent a message
        !            99:        socket.onmessage = function (event) {
        !           100:                var message = JSON.parse(event.data);
        !           101: 
        !           102:                if (message.type == "status") {
        !           103:                        server.textContent =  message.time + " message " + message.counter + ", CPU time " + message.utime.toFixed(2) + " s, " +
        !           104:                                "memory used " + message.used.toFixed() + " KB, allocated since last compact " + message.allocated.toFixed() + " KB";
        !           105:                } else if (message.type == "answer") {
        !           106:                        addToLog("server answered: " + message.text);
        !           107:                } else if (message.type == "pong") {
        !           108:                        addToLog("pong, it took " + (Date.now() - pingTime) + " ms");
        !           109:                }
        !           110:        };
        !           111: 
        !           112:        function send(data) {
        !           113:                if (socket.readyState != WebSocket.OPEN) {
        !           114:                        addToLog("not connected");
        !           115:                        return;
        !           116:                }
        !           117:                socket.send(data);
        !           118:                addToLog("sent: " + (typeof data == "string" ? data : data.length + " bytes"));
        !           119:        }
        !           120: 
        !           121:        function sendText() {
        !           122:                send(document.getElementById("text").value);
        !           123:        }
        !           124: 
        !           125:        function sendPing() {
        !           126:                pingTime = Date.now();
        !           127:                send("ping");
        !           128:        }
        !           129: 
        !           130:        // not a text but bytes
        !           131:        function sendBytes() {
        !           132:                send(new Uint8Array(1000000));
        !           133:        }
        !           134: 
        !           135:        function addToLog(line) {
        !           136:                log.value = new Date().toLocaleTimeString() + " " + line + "\n" + log.value;
        !           137:        }
        !           138: </script>
        !           139: 
        !           140: </body>
        !           141: </html>