{#==========================================
Demos - WebSockets
==========================================#}
{% extends "../demos.html" %}

{% block subSectionClasses %}demo_websockets{% endblock %}
{% block meta_title %}Demo - WebSockets{% endblock %}
{% block meta_description %}WebSockets demo and tutorial using Spincast{% endblock %}

{% block scripts %}
<script>
  
    app.addMessage = function(message) {
        var messages = $("#messages").val();
        $("#messages").val('').val(messages  +  message + "\n");
    }
    
    app.showcaseWebsocket = null;
    app.showcaseInit = function() {
        
        if(!window.WebSocket) {
            alert("Your browser does not support WebSockets!");
            return;
        }

        app.showcaseWebsocket = new WebSocket("{{ isHttps ? "wss" : "ws" }}://" + location.host + "/demos-tutorials/websockets/echo-all-endpoint");
        
        app.showcaseWebsocket.onopen = function(event) {
            app.addMessage("WebSocket connection established!"); 
        };
        
        app.showcaseWebsocket.onclose = function(event) {
            app.addMessage("WebSocket connection closed."); 
        };
        
        app.showcaseWebsocket.onmessage = function(event) {
            app.addMessage(event.data); 
        }; 
        
        $("#msgForm").on("submit", function() {
            var $msgField = $("#message");
            app.sendWebsocketMessage($msgField.val()); 
            $msgField.val(""); 
            $msgField.focus();
            return false;
        });
        
        $("#message").focus();
    };
    
    app.sendWebsocketMessage = function(message) {
        
        if(!window.WebSocket || !app.showcaseWebsocket) {
            return;
        }
        
        if(app.showcaseWebsocket.readyState != WebSocket.OPEN) {
            app.addMessage("The WebSocket connection is not open.");
            return;
        }
        
        app.showcaseWebsocket.send(message);
    };
    
    app.showcaseInit();
    
</script>
{% endblock %}


{% block subBody %}

<div class="container">

    <div id="sectionTitle" class="row"> 
        <div class="col-xs-12">
            <h2 class="shortTop">
                WebSockets demo
            </h2>
        </div>
    </div>
    
    <div class="row"> 
        <div class="col-xs-12">
            <p>
                Try opening multiple browser windows on this very page and then send some messages.
                You can even ask a friend to do so at the same time: you should see his messages...
            </p>
        </div>
    </div>

    <div class="row"> 
        <div class="col-xs-4">
            <p>
                <strong>Send a message:</strong>
            </p>
            <form id="msgForm">
                <input type="text" id="message" value="Hi!"/>
                <input type="submit" id="sendBtn" value="send" />
            </form>
            
        </div>
        <div class="col-xs-8">
            <p>
                <strong>Messages:</strong>
            </p>
            <textarea id="messages" readonly></textarea>
        </div>
     </div>
   
</div>

{% endblock %}