arne/arnweb-chat
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Going to add the ARNweb look tomorrow

Browse Source
This commit is contained in:
Arne van Iterson 2019-08-21 22:07:24 +02:00
parent c8c4ca463e
commit 1b3bc22a65
2 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -2,18 +2,9 @@
<html> <html>
<head> <head>
<title>Socket.IO chat</title> <title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script> <script>
$(function () { $(function () {
// Create socket // Create socket
@ -30,24 +21,47 @@
// Send data to server on form submit // Send data to server on form submit
$('form').submit(function(e){ $('form').submit(function(e){
e.preventDefault(); e.preventDefault();
socket.emit('message_send', $('#message').val()); socket.emit('message_send', $('.input_container input[name="message"]').val());
$('#message').val(''); $('.input_container input[name="message"]').val('');
return false; return false;
}); });
// Receive messages from server // Receive messages from server
socket.on('message_receive', function(msg){ socket.on('message_receive', function(msg){
$('#messages').append($('<li>').text(msg.username + ': ' + msg.message)); $('.message_container').append($('<span>').html(msg.username + ': ' + msg.message));
$('.message_container').append($('<br>'));
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<ul id="messages"></ul> <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=""> <form action="">
<input id="username" autocomplete="off" /> <input type="text" name="message"/>
<input id="message" autocomplete="off" /> <button type="submit"><i class="fas fa-paper-plane"></i> Send</button>
<button>Send</button>
</form> </form>
</div>
</div>
</body> </body>
</html> </html>

4
index.js
View File

@ -43,6 +43,7 @@ io.on('connection', function (socket) {
// Handle messages // Handle messages
socket.on('message_send', function (message) { socket.on('message_send', function (message) {
// Build message data for clients // Build message data for clients
if (message !== '') {
var msg = { var msg = {
'username': socket.username, 'username': socket.username,
'mailHash': socket.mailHash, 'mailHash': socket.mailHash,
@ -50,6 +51,9 @@ io.on('connection', function (socket) {
} }
// Send message to clients // Send message to clients
io.emit('message_receive', msg); io.emit('message_receive', msg);
} else {
socket.emit('message_receive', serverMsg(`Empty messages will not be sent.`));
}
}); });
}); });