Complete initial features

public/index.html

@@ -57,10 +57,7 @@
             </div>
             <div class="pt-4">
                 <div class="card">
-                    <ul class="list-group list-group-flush">
+                    <ul class="list-group list-group-flush" id="messages">
-                        <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>
                 </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) {
+            if (author.length && content.length) {
-                var messageObj = { author, message }
+                var messageObj = { author, content }
             }
 
+            renderMessage(messageObj);
+
             socket.emit('sendMessage', messageObj);
         })
     </script>

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`)
 );