From eb22f86f4aff11e11f43712be41df7cb1fa9fb16 Mon Sep 17 00:00:00 2001
From: GuilhermeWerner <guinerdinho@gmail.com>
Date: Mon, 1 Jun 2020 18:17:13 -0300
Subject: [PATCH] Complete initial features
---
public/index.html | 27 ++++++++++++++++++++-------
src/server.js | 17 +++++++++++++++--
2 files changed, 35 insertions(+), 9 deletions(-)
diff --git a/public/index.html b/public/index.html
index fcb6f97..dcc2f12 100644
--- a/public/index.html
+++ b/public/index.html
@@ -57,10 +57,7 @@
</div>
<div class="pt-4">
<div class="card">
- <ul class="list-group list-group-flush">
- <li class="list-group-item"><strong>Username:</strong> Message</li>
- <li class="list-group-item"><strong>Username:</strong> Message</li>
- <li class="list-group-item"><strong>Username:</strong> Message</li>
+ <ul class="list-group list-group-flush" id="messages">
</ul>
</div>
</div>
@@ -84,16 +81,32 @@
<script type="text/javascript">
var socket = io('http://localhost:3000');
+ function renderMessage(message) {
+ $('#messages').append(`<li class="list-group-item"><strong>${message.author}:</strong> ${message.content}</li>`);
+ }
+
+ socket.on('previousMessages', function (messages) {
+ for (message of messages) {
+ renderMessage(message);
+ }
+ });
+
+ socket.on('receiveMessage', function (message) {
+ renderMessage(message);
+ });
+
$('#chat').submit(function (event) {
event.preventDefault();
var author = $('input[name=username]').val();
- var message = $('textarea[name=message]').val();
+ var content = $('textarea[name=message]').val();
- if (author.length && message.length) {
- var messageObj = { author, message }
+ if (author.length && content.length) {
+ var messageObj = { author, content }
}
+ renderMessage(messageObj);
+
socket.emit('sendMessage', messageObj);
})
</script>
diff --git a/src/server.js b/src/server.js
index 4ed658b..df07c3e 100644
--- a/src/server.js
+++ b/src/server.js
@@ -7,7 +7,7 @@ const app = express();
* Declare HTTP and Websocket protocols
*/
const server = require('http').createServer(app);
-const socket = require('socket.io')(server);
+const io = require('socket.io')(server);
app.use(express.static(path.join(__dirname, '../public')));
@@ -22,6 +22,19 @@ app.use('/', (req, res) => {
res.render('index.html')
});
-app.listen(3000, () =>
+let messages = [];
+
+io.on('connection', socket => {
+ console.log(`Socket ${socket.id} connected`);
+
+ socket.emit('previousMessages', messages);
+
+ socket.on('sendMessage', data => {
+ messages.push(data);
+ socket.broadcast.emit('receiveMessage', data);
+ })
+})
+
+server.listen(3000, () =>
console.log(`Server listen on port: 3000`)
);