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();
|
|
|
|
|
|
|
|
|
|
// Wait for server response and identify client
|
|
|
|
|
socket.on('user_identify', function(){
|
2019-08-21 21:29:48 +02:00
|
|
|
socket.emit('user_login', {
|
|
|
|
|
'username': 'Bart',
|
|
|
|
|
'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-21 22:07:24 +02:00
|
|
|
$('.message_container').append($('<span>').html(msg.username + ': ' + msg.message));
|
|
|
|
|
$('.message_container').append($('<br>'));
|
2019-08-21 20:32:42 +02:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-08-21 22:07:24 +02:00
|
|
|
<style>
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<div class="chat_container">
|
|
|
|
|
<div class="message_container">
|
|
|
|
|
<!-- 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>
|
