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
|
|
|
|
|
|
|
|
// 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-21 22:07:24 +02:00
|
|
|
socket.emit('message_send', $('.input_container input[name="message"]').val());
|
|
|
|
|
$('.input_container input[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 15:11:22 +02:00
|
|
|
document.getElementById('message_container').innerHTML +=
|
|
|
|
|
`<div class="message">
|
|
|
|
|
<img src="https://www.gravatar.com/avatar/${msg.mailHash}?s=48">
|
|
|
|
|
<div>
|
|
|
|
|
<span>${msg.username}</span>
|
|
|
|
|
<span>${date.getHours() + ':' + date.getMinutes()}</span>
|
|
|
|
|
<span>${msg.message}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>`;
|
2019-08-21 20:32:42 +02:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-08-21 22:07:24 +02:00
|
|
|
<style>
|
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;
|
|
|
|
|
}
|
|
|
|
|
div.input_container > form > input, div.input_container > button {
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
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-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="">
|
|
|
|
|
<input type="text" name="message"/>
|
|
|
|
|
<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>
|
