iou1name/anonkun
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

receives messages one at a time, messagebox stays scrolled to bottom, added spans to messagebox

Browse Source
This commit is contained in:
iou1name 2018-06-14 18:04:12 -04:00
parent d1ed318e13
commit 51fa60036c
2 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
anonkun.py
View File

@ -63,8 +63,11 @@ def text(data):
""" """
Sent by a client when the user entered a new message. Sent by a client when the user entered a new message.
""" """
message = data["msg"] message = data["message"]
emit('message', {'msg': message}) name = data["name"]
date = int(time.time())
data["date"] = date
emit('message', data)
@app.template_filter("strftime") @app.template_filter("strftime")
@ -72,7 +75,7 @@ def unix2string(unix):
""" """
Converts a unix timestamp into a string. Converts a unix timestamp into a string.
""" """
form = "[%Y-%m-%d %H:%M:%S]" form = "%Y-%m-%d %H:%M:%S"
t = time.localtime(unix) t = time.localtime(unix)
return time.strftime(form, t) return time.strftime(form, t)

36
templates/index.html
View File

@ -5,7 +5,6 @@
<script type="text/javascript" src="{{ url_for('static', filename='socket.io.slim.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='socket.io.slim.js') }}"></script>
<script> <script>
var socket; var socket;
var messages_received = [];
var tid = setInterval( function () { var tid = setInterval( function () {
if ( document.readyState !== 'complete' ) return; if ( document.readyState !== 'complete' ) return;
clearInterval( tid ); clearInterval( tid );
@ -15,34 +14,43 @@
socket.emit('joined', {}); socket.emit('joined', {});
}); });
socket.on('message', function(data) { socket.on('message', function(data) {
if (messages_received.length >= 50) { date = new Date(data.date * 1000);
message_received.shift() date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()) + '-' + padToTwo(date.getDay()) + ' ';
} date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
messages_received.push(data.msg);
message_string = ''; msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> ';
for (var i = 0; i < messages_received.length; i++) { msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n';
message_string = message_string + '<tr><td>2018</td><td>Anonymous</td><td>' + messages_received[i] + '</td>'; msg_str += '<div class="message">' + data.message + '</div>\n';
}
document.getElementById('messages').innerHTML = message_string; mbox = document.getElementById('messageBox');
mbox.innerHTML = mbox.innerHTML + msg_str;
mbox.scrollTop = mbox.scrollHeight;
}); });
document.getElementById('text').addEventListener('keypress', function(event) { document.getElementById('text').addEventListener('keypress', function(event) {
if (event.key == 'Enter') { if (event.key == 'Enter') {
text = document.getElementById('text').value; text = document.getElementById('text').value;
document.getElementById('text').value = ''; document.getElementById('text').value = '';
socket.emit('text', {msg: text}); socket.emit('text', {message: text, name: 'Anonymous'});
} }
}); });
}, 100 ); }, 100 );
function padToTwo(number) {
if (number<=99) { number = ("0"+number).slice(-2); }
return number;
}
</script> </script>
</head> </head>
<body> <body>
<div id="document"> <div id="document">
<h1>Lol</h1> <h1>Chat</h1>
</div> </div>
<div id="messagebox" style="height:120px; width:320px; border:1px solid #ccc; overflow:auto;"> <div id="messageBox" style="height:120px; width:320px; border:1px solid #ccc; overflow:auto;">
{% for message in messages %} {% for message in messages %}
<div class="message"> <div class="message">
<div class="messageHeader">{{ message["name"] }} {{ message["date"] | strftime }}</div> <div class="messageHeader">
<span class="messageName">{{ message["name"] }}</span> <span class="messageDate">{{ message["date"] | strftime }}</span>
</div>
<div class="messageMessage">{{ message["message"] }}</div> <div class="messageMessage">{{ message["message"] }}</div>
</div> </div>
{% endfor %} {% endfor %}