53 lines
1.6 KiB
HTML
53 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Meet the new anonkun.</title>
|
||
|
|
<script type="text/javascript" src="{{ url_for('static', filename='socket.io.slim.js') }}"></script>
|
||
|
|
<script>
|
||
|
|
var socket;
|
||
|
|
var messages_received = [];
|
||
|
|
var tid = setInterval( function () {
|
||
|
|
if ( document.readyState !== 'complete' ) return;
|
||
|
|
clearInterval( tid );
|
||
|
|
|
||
|
|
socket = io.connect('https://' + document.domain + ':' + location.port + '/chat');
|
||
|
|
socket.on('connect', function() {
|
||
|
|
socket.emit('joined', {});
|
||
|
|
});
|
||
|
|
socket.on('message', function(data) {
|
||
|
|
if (messages_received.length >= 50) {
|
||
|
|
message_received.shift()
|
||
|
|
}
|
||
|
|
messages_received.push(data.msg);
|
||
|
|
message_string = '';
|
||
|
|
for (var i = 0; i < messages_received.length; i++) {
|
||
|
|
message_string = message_string + '<tr><td>2018</td><td>Anonymous</td><td>' + messages_received[i] + '</td>';
|
||
|
|
}
|
||
|
|
document.getElementById('messages').innerHTML = message_string;
|
||
|
|
});
|
||
|
|
document.getElementById('text').addEventListener('keypress', function(event) {
|
||
|
|
if (event.key == 'Enter') {
|
||
|
|
text = document.getElementById('text').value;
|
||
|
|
document.getElementById('text').value = '';
|
||
|
|
socket.emit('text', {msg: text});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 100 );
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="document">
|
||
|
|
<h1>Lol</h1>
|
||
|
|
</div>
|
||
|
|
<div id="messagebox" style="height:120px; width:320px; border:1px solid #ccc; overflow:auto;">
|
||
|
|
{% for message in messages %}
|
||
|
|
<div class="message">
|
||
|
|
<div class="messageHeader">{{ message["name"] }} {{ message["date"] | strftime }}</div>
|
||
|
|
<div class="messageMessage">{{ message["message"] }}</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<textarea id="text" rows="3" cols="43" style="resize:none"></textarea>
|
||
|
|
</body>
|
||
|
|
</html>
|