Scribd Logo
Upload

Welcome to Scribd!

  • Websocket

    Uploaded by

    Maury Ledesmaa
    22 views4 pages
    This document describes a WebSocket chat application. The application initializes a WebSocket connection to a server and defines event handlers for messages received and the connection closing. It includes functions to send messages by parsing a username and message from text inputs, logging messages and events to a display area, and reconnecting the WebSocket.

    Original Description:

    Original Title

    websocket

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes a WebSocket chat application. The application initializes a WebSocket connection to a server and defines event handlers for messages received and the connection closing. It includes functions to send messages by parsing a username and message from text inputs, logging messages and events to a display area, and reconnecting the WebSocket.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22 views4 pages

    Websocket

    Uploaded by

    Maury Ledesmaa
    This document describes a WebSocket chat application. The application initializes a WebSocket connection to a server and defines event handlers for messages received and the connection closing. It includes functions to send messages by parsing a username and message from text inputs, logging messages and events to a display area, and reconnecting the WebSocket.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    <html>

    <head>
        <title>WebSocket</title>
        <style type="text/css">
            html,
            body {
                font: normal 0.9em arial, helvetica;
            }

            #log {
                width: 600px;
                height: 300px;
                border: 1px solid #7F9DB9;
                overflow: auto;
            }

            #msg {
                width: 400px;
            }
        </style>
        <script type="text/javascript">
            var socket;

            function init() {
                var host = "ws://localhost:9000";
                try {
                    socket = new WebSocket(host);
                    log('WebSocket - status ' + socket.readyState);
                    socket.onopen = function (msg) {
                        log("Welcome - status " + this.readyState);
                    };
                    socket.onmessage = function (msg) {
                        var data = JSON.parse(msg.data)
                        var username = data.username;
                        var message = data.message;
                        log(`-${username}: ${message}`);
                    };
                    socket.onclose = function (msg) {
                        log("Disconnected - status " + this.readyState);
                    };
                }
                catch (ex) {
                    log(ex);
                }
                $("msg").focus();
            }

            function send() {
                var username, message;
                username = $("username").value;
                message = $("msg").value;

                if (!message) {
                    alert("Message can not be empty");
                    return;
                }
                if (!username) {
                    alert("Username can not be empty");
                    return;
                }
                $("msg").value = "";
                $("msg").focus();
                try {
                    var payload = { username, message }
                    socket.send(JSON.stringify(payload));
                    log(`${username}: ${message}`);
                } catch (ex) {
                    log(ex);
                }
            }
            function quit() {
                if (socket != null) {
                    log("Goodbye!");
                    socket.close();
                    socket = null;
                }
            }

            function reconnect() {
                quit();
                init();
            }

            // Utilities
            function $(id) { return document.getElementById(id); }
            function log(msg) { $("log").innerHTML += "<br>" + msg; }
        </script>

    </head>
    <body onload="init()">
        <h3>WebSocket v2.00</h3>
        <div id="log"></div>
        <label>
            <p>Apodo: <input id="username" type="text" /></p>
        </label>
        <br>
        <input id="msg" type="textbox" />
        <button onclick="send()">Send</button>
        <button onclick="quit()">Quit</button>
        <button onclick="reconnect()">Reconnect</button>
    </body>

    </html>

    You might also like