2019-08-21 20:32:42 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Socket.IO chat</title>
|
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
|
|
|
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
|
2019-08-21 22:07:24 +02:00
|
|
|
<link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
2019-08-21 20:32:42 +02:00
|
|
|
<script>
|
|
|
|
|
$(function () {
|
|
|
|
|
// Create socket
|
|
|
|
|
var socket = io();
|
2019-08-24 15:11:22 +02:00
|
|
|
const date = new Date();
|
2019-08-21 20:32:42 +02:00
|
|
|
|
2019-08-24 22:42:58 +02:00
|
|
|
// Add zero to values under 10 (time)
|
|
|
|
|
function addZero(i) {
|
|
|
|
|
if (i < 10) {
|
|
|
|
|
i = '0' + i;
|
|
|
|
|
}
|
|
|
|
|
return i;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Submit textarea on enter
|
|
|
|
|
$('div.input_container > form > textarea').on('keydown', function(event) {
|
|
|
|
|
if (event.keyCode == 13)
|
|
|
|
|
if (!event.shiftKey) {
|
|
|
|
|
event.preventDefault;
|
|
|
|
|
$('div.input_container > form').submit();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2019-08-21 20:32:42 +02:00
|
|
|
// Wait for server response and identify client
|
|
|
|
|
socket.on('user_identify', function(){
|
2019-08-21 21:29:48 +02:00
|
|
|
socket.emit('user_login', {
|
2019-08-22 15:56:03 +02:00
|
|
|
'username': 'BUUUUUUUUUURTE',
|
2019-08-21 21:29:48 +02:00
|
|
|
'mailHash': '289e66591abdb9c2d4cb15517f0fd8d8'
|
|
|
|
|
});
|
2019-08-21 20:32:42 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Send data to server on form submit
|
|
|
|
|
$('form').submit(function(e){
|
|
|
|
|
e.preventDefault();
|
2019-08-24 22:42:58 +02:00
|
|
|
socket.emit('message_send', $('.input_container textarea[name="message"]').val());
|
|
|
|
|
$('.input_container textarea[name="message"]').val('');
|
2019-08-21 20:32:42 +02:00
|
|
|
return false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Receive messages from server
|
|
|
|
|
socket.on('message_receive', function(msg){
|
2019-08-24 22:42:58 +02:00
|
|
|
if (msg.username !== 'Server') {
|
|
|
|
|
var date = new Date();
|
|
|
|
|
document.getElementById('message_container').innerHTML +=
|
2019-08-24 15:11:22 +02:00
|
|
|
`<div class="message">
|
|
|
|
|
<img src="https://www.gravatar.com/avatar/${msg.mailHash}?s=48">
|
|
|
|
|
<div>
|
|
|
|
|
<span>${msg.username}</span>
|
2019-08-24 22:42:58 +02:00
|
|
|
<span>${addZero(date.getHours()) + ':' + addZero(date.getMinutes())}</span>
|
2019-08-24 15:11:22 +02:00
|
|
|
<span>${msg.message}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>`;
|
2019-08-24 22:42:58 +02:00
|
|
|
} else {
|
|
|
|
|
document.getElementById('message_container').innerHTML +=
|
|
|
|
|
`<div class="servermessage">
|
|
|
|
|
<span>${msg.username}: ${msg.message}</span>
|
|
|
|
|
</div>`;
|
|
|
|
|
}
|
2019-08-21 20:32:42 +02:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-08-21 22:07:24 +02:00
|
|
|
<style>
|
2019-08-24 22:42:58 +02:00
|
|
|
body {
|
|
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
|
|
}
|
2019-08-24 15:11:22 +02:00
|
|
|
div.chat_container {
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
width: 500px;
|
|
|
|
|
}
|
|
|
|
|
div#message_container {
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
height: 500px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
div.input_container {
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
}
|
2019-08-24 22:42:58 +02:00
|
|
|
div.input_container > form > textarea, div.input_container > form > button {
|
2019-08-24 15:11:22 +02:00
|
|
|
margin: 10px;
|
2019-08-24 22:42:58 +02:00
|
|
|
width: calc(100% - 20px);
|
2019-08-24 15:11:22 +02:00
|
|
|
}
|
|
|
|
|
div.message {
|
|
|
|
|
background-color: white;
|
|
|
|
|
height: auto;
|
|
|
|
|
word-wrap: anywhere;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 48px auto;
|
|
|
|
|
}
|
|
|
|
|
div.message > div {
|
|
|
|
|
height: auto;
|
|
|
|
|
display: grid;
|
|
|
|
|
padding: 10px 10px 10px 20px;
|
|
|
|
|
grid-template-areas:
|
|
|
|
|
'username time'
|
|
|
|
|
'message message';
|
|
|
|
|
}
|
|
|
|
|
div.message > img { padding: 10px; }
|
|
|
|
|
div.message > div > span:nth-child(1) { grid-area: username; border-left: 3px solid black; padding-left: 5px;}
|
|
|
|
|
div.message > div > span:nth-child(2) { grid-area: time; text-align: right;}
|
|
|
|
|
div.message > div > span:nth-child(3) { grid-area: message; border-left: 3px solid black; padding-left: 5px;}
|
2019-08-24 22:42:58 +02:00
|
|
|
div.servermessage > span { color: purple; border-left: 3px solid purple; padding-left: 5px; margin-left: 10px;}
|
2019-08-22 15:56:03 +02:00
|
|
|
</style>
|
2019-08-21 22:07:24 +02:00
|
|
|
<div class="chat_container">
|
2019-08-24 15:11:22 +02:00
|
|
|
<div id="message_container">
|
2019-08-21 22:07:24 +02:00
|
|
|
<!-- JS will push messages here -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input_container">
|
|
|
|
|
<form action="">
|
2019-08-24 22:42:58 +02:00
|
|
|
<textarea name="message"></textarea>
|
2019-08-21 22:07:24 +02:00
|
|
|
<button type="submit"><i class="fas fa-paper-plane"></i> Send</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2019-08-21 20:32:42 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
