2023-09-12 22:52:05 +02:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Hello Asso</title>
|
2023-09-14 00:30:02 +02:00
|
|
|
<style>
|
|
|
|
|
.notif {
|
|
|
|
|
margin: 10px;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
border: 2px solid #1100ff;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2023-09-12 22:52:05 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-09-14 00:30:02 +02:00
|
|
|
<div id="msg"></div>
|
2023-09-12 22:52:05 +02:00
|
|
|
<script>
|
2023-09-14 00:30:02 +02:00
|
|
|
function addNode(msg){
|
|
|
|
|
let notifs = document.getElementsByClassName("notif");
|
|
|
|
|
if(notifs.length > 5)
|
|
|
|
|
{
|
|
|
|
|
notifs.slice(0,notifs.length-5).forEach(e => e.remove());
|
|
|
|
|
}
|
|
|
|
|
console.log(msg);
|
2023-09-13 00:14:14 +02:00
|
|
|
let ndiv = document.createElement('div');
|
2023-09-14 00:30:02 +02:00
|
|
|
ndiv.className='notif';
|
|
|
|
|
let data = document.createTextNode(msg);
|
2023-09-13 00:14:14 +02:00
|
|
|
ndiv.appendChild(data);
|
|
|
|
|
message = document.getElementById('msg');
|
|
|
|
|
document.body.insertBefore(ndiv,message);
|
2023-09-14 00:30:02 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const websocket = new WebSocket('ws://'+ location.host + '/notify');
|
|
|
|
|
websocket.addEventListener('message', ev => {
|
|
|
|
|
addNode(ev.data);
|
2023-09-13 00:14:14 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
websocket.addEventListener('error', ev => {
|
|
|
|
|
let div = document.createTextNode(ev);
|
|
|
|
|
document.body.append(div);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
websocket.addEventListener('close', ev => {
|
|
|
|
|
let div = document.createTextNode(ev);
|
2023-09-12 22:52:05 +02:00
|
|
|
document.body.append(div);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
