@(url: String)
@main("Welcome to Play") {
    <h1>Welcome to Play WebSockets!</h1>
        <div id="messageContent"></div>
        <form>
            <textarea id="messageInput"></textarea>
            <button id="sendButton">Send</button>
        </form>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

        <script>
        var webSocket;
        var messageInput;

        function init() {
            initWebSocket();
        }

        function initWebSocket() {
            webSocket = new WebSocket("@url");
            webSocket.onopen = onOpen;
            webSocket.onclose = onClose;
            webSocket.onmessage = onMessage;
            webSocket.onerror = onError;
        }

        function onOpen(evt) {
            writeToScreen("CONNECTED");
        }

        function onClose(evt) {
            writeToScreen("DISCONNECTED");
            appendMessageToView(":", "DISCONNECTED");
        }

        function onError(evt) {
            writeToScreen("ERROR: " + evt.data);
            writeToScreen("ERROR: " + JSON.stringify(evt));
        }

        function onMessage(evt) {
            var receivedData = JSON.parse(evt.data);
            console.log("New Data: ", receivedData);
            appendMessageToView("Server", receivedData.body);
        }

        function appendMessageToView(title, message) {
            $("#messageContent").append("<p>" + title + ": " + message + "</p>");
        }

        function writeToScreen(message) {
            console.log("New message: ", message);
        }

        function doSend(protocolMessage) {
            if(webSocket.readyState == WebSocket.OPEN) {
                writeToScreen("SENT: " + protocolMessage.message);
                webSocket.send(JSON.stringify(protocolMessage));
            } else {
                writeToScreen("Could not send data. Websocket is not open.");
            }
        }

        window.addEventListener("load", init, false);


        $(".sendButton").click(function () {
            console.log("Submitting.");
            newMessage();
        });

        $(window).on("keydown", function (e) {
            if (e.which == 13) {
                console.log("Enter pressed.");
                newMessage();
                return false;
            }
        });

        function newMessage() {
            messageInput = $("#messageInput").val();
            $("#messageInput").val("");
            if ($.trim(messageInput) == "") {
                return false;
            }

            appendMessageToView("Me", messageInput);

            var message = {
                message: messageInput
            };

            doSend(message);
        }
    </script>
}