ninegitea/templates/Websocket/sample.html.twig

{% extends 'base.html.twig' %}

{% block body %}
{{wssurl}}
<div id="chat" class="text-center mt-5">
    <div class="mb-2">online</div>
    <div id="online" style="mt-2"></div>
</div>
{% endblock %}

{% block localjavascript %}
{% if wssuse %}
    var conn;

    function connect() {
        conn = new WebSocket("{{wssurl}}");
        
        conn.onopen = function(e) {
            console.log("== CONNECT");
            {% set userkey = "" %}
            {% if app.user %}
                {% set userkey = app.user.apikey %}
            {%endif%}

            subscribe("home",1,"{{userkey}}");
            sendMessage({command: "alive"});
        };

        conn.onmessage = function(e) {
            ret=JSON.parse(e.data);

            switch(ret.command) {
                case "alive" :
                    if(!$('#online'+ret.from.id).length) {
                        console.log(ret);
                        html='<img id="online'+ret.from.id+'" src="'+ret.from.avatar+'" class="avatar ml-2 mr-2" title="'+ret.from.displayname+'">';
                        $("#online").append(html);
                    }
                    
                    if(ret.from.id!={{app.user.id}})
                        sendMessage({command: "meto"});
                break;

                case "adead" :
                    $('#online'+ret.from.id).remove();
                break;

                case "meto" :
                    if(!$('#online'+ret.from.id).length) {
                        html='<img id="online'+ret.from.id+'" src="'+ret.from.avatar+'" class="avatar ml-2 mr-2" title="'+ret.from.displayname+'">';
                        $("#online").append(html);
                    }
                break;
            }
        };

        conn.onclose = function(e) {
            console.log("== DISCONNECT");
            $('#online img').remove();
            console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
            setTimeout(function() { connect(); }, 1000);        
        };
    }

    connect();
{% endif %}
{% endblock %}