mirror of
https://gitlab.com/berufsschul-ae/blitzchat.git
synced 2025-01-03 18:17:39 +01:00
79 lines
2.9 KiB
HTML
79 lines
2.9 KiB
HTML
|
<html>
|
||
|
|
<div>
|
||
|
|
<form onsubmit="join(event)">
|
||
|
|
Username: <input id="username">
|
||
|
|
<input type="submit" value="Join" id="joinButton">
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div style="width: 100%; height: 300px; overflow:scroll"id="chat"></div>
|
||
|
|
<div>
|
||
|
|
<form onsubmit="send(event)">
|
||
|
|
<input type="color" id="color">
|
||
|
|
<input id="text">
|
||
|
|
<input type="submit" value="send">
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var ws;
|
||
|
|
|
||
|
|
function send(e){
|
||
|
|
e.preventDefault();
|
||
|
|
const msg = {
|
||
|
|
event: 'msg',
|
||
|
|
msg: document.getElementById('text').value,
|
||
|
|
username: document.getElementById('username').value,
|
||
|
|
color: document.getElementById('color').value
|
||
|
|
};
|
||
|
|
ws.send(JSON.stringify(msg));
|
||
|
|
document.getElementById('text').value = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
function join(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
document.getElementById('joinButton').remove();
|
||
|
|
document.getElementById('username').setAttribute("readonly", "");
|
||
|
|
|
||
|
|
ws = new WebSocket('ws://' + window.location.hostname + ':3001');
|
||
|
|
ws.onopen = () => {
|
||
|
|
const msg = {
|
||
|
|
event: 'joining',
|
||
|
|
msg: '',
|
||
|
|
username: document.getElementById('username').value,
|
||
|
|
color: 'black'
|
||
|
|
}
|
||
|
|
const msgString = JSON.stringify(msg);
|
||
|
|
ws.send(msgString);
|
||
|
|
}
|
||
|
|
|
||
|
|
ws.onmessage = (msg) => {
|
||
|
|
const jsonObj = JSON.parse(msg.data);
|
||
|
|
console.log(jsonObj.color);
|
||
|
|
console.log(jsonObj.timestamp);
|
||
|
|
if(jsonObj.event === 'joining') {
|
||
|
|
document.getElementById('chat').innerHTML += getMessageSpan(jsonObj, jsonObj.username + ' has joined the chat!');
|
||
|
|
} else {
|
||
|
|
document.getElementById('chat').innerHTML += getTime(new Date(jsonObj.timestamp)) + '<span style="font-weight: bold">' + jsonObj.username + '</span>' + ': ' + getMessageSpan(jsonObj, jsonObj.msg);
|
||
|
|
}
|
||
|
|
console.log(msg.data);
|
||
|
|
};
|
||
|
|
|
||
|
|
function getTime(date) {
|
||
|
|
let hours = date.getHours();
|
||
|
|
let minutes = date.getMinutes();
|
||
|
|
if(hours < 10) {
|
||
|
|
hours = "0" + hours;
|
||
|
|
}
|
||
|
|
if(minutes < 10) {
|
||
|
|
minutes = "0" + minutes;
|
||
|
|
}
|
||
|
|
return '<span style="color: lightgray; font-weight: lighter" >' + hours + ":" + minutes + ' </span>';
|
||
|
|
}
|
||
|
|
|
||
|
|
function getMessageSpan(jsonObj, innerMessage){
|
||
|
|
return '<span style="color:' + jsonObj.color + '; font-weight: ' + jsonObj.style + '" >' + innerMessage + '</span>' + '<br>'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|