ninegitea/templates/Websocket/sample.html.twig

67 lines
2.0 KiB
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 %}