ninegitea/templates/Websocket/sample.html.twig

61 lines
1.9 KiB
Twig

<div id="chat" class="text-center mt-5">
<div class="mb-2">online</div>
<div id="online" style="mt-2"></div>
</div>
{% if wssuse %}
<script>
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);
console.log(ret.log);
switch(ret.command) {
case "alive" :
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);
}
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();
</script>
{% endif %}