diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html index 736cd552..4843f16a 100644 --- a/tests_hugo/chat_node/chat_client/chat.html +++ b/tests_hugo/chat_node/chat_client/chat.html @@ -32,13 +32,14 @@ - @@ -83,9 +84,12 @@ }); - - + + + + + diff --git a/tests_hugo/chat_node/chat_client/chat_add_msg.js b/tests_hugo/chat_node/chat_client/chat_add_msg.js index 1a17b841..f284a2b2 100644 --- a/tests_hugo/chat_node/chat_client/chat_add_msg.js +++ b/tests_hugo/chat_node/chat_client/chat_add_msg.js @@ -1,17 +1,27 @@ -const add_new_message = (message, from = "others") => { +const add_message = (from, message ) => { const div_thread = document.getElementById('msg_thread'); //console.log("received message:"); //console.log(`[${message}]`); - div_thread.appendChild(build_new_message(message, from)); + div_thread.appendChild(build_new_message(from, message)); } -const build_new_message = (message, from) => { - const p = document.createElement("p"); - p.classList.add(from); - p.appendChild(document.createTextNode(message)); - return p; +const build_new_message = (from, message) => { + const div = document.createElement("div"); + const p_name = document.createElement("p"); + const p_msg = document.createElement("p"); + + div.classList.add(from); + p_name.classList.add("name"); + p_msg.classList.add("msg"); + + p_name.appendChild(document.createTextNode(from + " :")); + p_msg.appendChild(document.createTextNode(message)); + div.appendChild(p_name); + div.appendChild(p_msg); + + return div; } diff --git a/tests_hugo/chat_node/chat_client/chat_connection.js b/tests_hugo/chat_node/chat_client/chat_connection.js new file mode 100644 index 00000000..6b35beb4 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/chat_connection.js @@ -0,0 +1,4 @@ +socket.on('connect', () => { + //socket.emit('adduser', prompt("what's your name ?")); + socket.emit('adduser', "glurk"); +}); diff --git a/tests_hugo/chat_node/chat_client/chat_receive_msg.js b/tests_hugo/chat_node/chat_client/chat_receive_msg.js deleted file mode 100644 index 96b31d27..00000000 --- a/tests_hugo/chat_node/chat_client/chat_receive_msg.js +++ /dev/null @@ -1,5 +0,0 @@ - -socket.on('chat_message', ({ data }) => { - add_new_message(data); -}); - diff --git a/tests_hugo/chat_node/chat_client/chat_send_msg.js b/tests_hugo/chat_node/chat_client/chat_send_msg.js new file mode 100644 index 00000000..2e20662e --- /dev/null +++ b/tests_hugo/chat_node/chat_client/chat_send_msg.js @@ -0,0 +1,14 @@ +const send_msg = () => { + + const div_msg = document.getElementById('msg_write'); + const msg = div_msg.innerText.trim(); + + div_msg.innerText = ""; + div_msg.focus(); + + if (msg.length > 0) { + socket.emit('sendmsg', { data: msg }); + add_message("me", msg); + } +} + diff --git a/tests_hugo/chat_node/chat_client/chat_submit_msg.js b/tests_hugo/chat_node/chat_client/chat_submit_msg.js deleted file mode 100644 index effd921d..00000000 --- a/tests_hugo/chat_node/chat_client/chat_submit_msg.js +++ /dev/null @@ -1,22 +0,0 @@ - -const submit_new_message = () => { - - const div_msg = document.getElementById('msg_write'); - /* - const msg = div_msg.value; - const msg = div_msg.innerText; - */ - const msg = div_msg.innerText.trim(); - div_msg.innerText = ""; - div_msg.focus(); - - //console.log("msg:"); - //console.log(`[${msg}]`); - //console.log(msg.length); - - if (msg.length > 0) { - socket.emit('chat_message', { data: msg }); - add_new_message(msg, "me"); - } -} - diff --git a/tests_hugo/chat_node/chat_client/chat_update_room.js b/tests_hugo/chat_node/chat_client/chat_update_room.js new file mode 100644 index 00000000..4e8dd205 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/chat_update_room.js @@ -0,0 +1,4 @@ +//socket.on('updateroom', (from, data) => { +// add_new_message(from, data); +//}); + diff --git a/tests_hugo/chat_node/chat_client/event_updatemsg.js b/tests_hugo/chat_node/chat_client/event_updatemsg.js new file mode 100644 index 00000000..45b85239 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/event_updatemsg.js @@ -0,0 +1,5 @@ +socket.on('updatemsg', (from, data) => { + //console.log("data: " + data); + add_message(from, data); +}); + diff --git a/tests_hugo/chat_node/chat_client/style/drop_down_menu.css b/tests_hugo/chat_node/chat_client/style/drop_down_menu.css index b09ed8a9..c38add32 100644 --- a/tests_hugo/chat_node/chat_client/style/drop_down_menu.css +++ b/tests_hugo/chat_node/chat_client/style/drop_down_menu.css @@ -44,6 +44,9 @@ margin-left: 0px; cursor: pointer; } +.drop_down p._section { + color: rgb(100, 100, 100); +} .drop_down p._section:hover, .drop_down p._section:active { background-color: transparent !important; diff --git a/tests_hugo/chat_node/chat_client/style/msg_thread.css b/tests_hugo/chat_node/chat_client/style/msg_thread.css index 49307073..9605fbc7 100644 --- a/tests_hugo/chat_node/chat_client/style/msg_thread.css +++ b/tests_hugo/chat_node/chat_client/style/msg_thread.css @@ -10,18 +10,37 @@ padding: 5px; } -.chat_box #msg_thread p { +.chat_box #msg_thread div { white-space: pre-wrap; margin: 5px auto; padding: 5px; border-radius: 5px; } -.chat_box #msg_thread p.others { +.chat_box #msg_thread div.others { margin-left: 0px; background-color: rgb(210, 210, 210); } -.chat_box #msg_thread p.me { +.chat_box #msg_thread div.me { margin-right: 0px; background-color: rgb(210, 110, 10); } +.chat_box #msg_thread div.me p.name { + display: none; +} +.chat_box #msg_thread div.SERVER p.name { + display: none; +} +.chat_box #msg_thread div.SERVER p.msg { + margin: 0px auto; + font-size: 12px; + color: rgb(100, 100, 100); +} +.chat_box #msg_thread div p.name { + margin: 0px; + font-size: 12px; + color: rgb(100, 100, 100); +} +.chat_box #msg_thread div p.msg { + margin-top: 10px; +} diff --git a/tests_hugo/chat_node/chat_server/event_adduser.js b/tests_hugo/chat_node/chat_server/event_adduser.js new file mode 100644 index 00000000..9c0a1a72 --- /dev/null +++ b/tests_hugo/chat_node/chat_server/event_adduser.js @@ -0,0 +1,18 @@ +const add_user = (socket, usernames, username) => { + // store the username in the socket session for this client + socket.username = username; + // store the room name in the socket session for this client + socket.room = 'room1'; + // add the client's username to the global list + usernames[username] = username; + // send client to room 1 + socket.join('room1'); + // echo to client they've connected + socket.emit('updatemsg', 'SERVER', 'you have connected to room1'); + // echo to room 1 that a person has connected to their room + socket.broadcast.to('room1').emit('updatemsg', 'SERVER', username + ' has connected to this room'); + //socket.emit('updaterooms', rooms, 'room1'); +}; + +module.exports = add_user; + diff --git a/tests_hugo/chat_node/chat_server/event_sendmsg.js b/tests_hugo/chat_node/chat_server/event_sendmsg.js new file mode 100644 index 00000000..34aee1a2 --- /dev/null +++ b/tests_hugo/chat_node/chat_server/event_sendmsg.js @@ -0,0 +1,7 @@ +const send_msg = (socket, msg) => { +// console.log('message received: ' + msg); + socket.to(socket.room).emit('updatemsg', socket.username, msg); +}; + +module.exports = send_msg; + diff --git a/tests_hugo/chat_node/chat_server/server.js b/tests_hugo/chat_node/chat_server/server.js index b689ae26..6e7c2f22 100644 --- a/tests_hugo/chat_node/chat_server/server.js +++ b/tests_hugo/chat_node/chat_server/server.js @@ -1,9 +1,5 @@ -//let app = require('express')(); -//let server = require('http').createServer(app); -//let io = require('socket.io')(http); const express = require('express'); -//const cors = require('cors'); const app = express(); const http = require('http'); const server = http.createServer(app); @@ -15,29 +11,52 @@ const io = new Server(server, { origin: "*" } }); +const send_msg = require('./event_sendmsg'); +const add_user = require('./event_adduser'); -// cors : https://stackoverflow.com/questions/7067966/why-doesnt-adding-cors-headers-to-an-options-route-allow-browsers-to-access-my -// https://www.npmjs.com/package/cors -//app.use(cors()); - -//app.get("/", function (req, res) { -// console.log("req.headers: "); -// console.log(req.headers); -//}) +let usernames = {}; +let rooms = ['room1', 'room2', 'room3']; io.on('connection', (socket) => { console.log('a user is connected'); - socket.on('disconnect', function () { - console.log('a user is disconnected'); - }) + socket.on('adduser', (username) => { + add_user(socket, username); + }); - socket.on('chat_message', function (msg) { - console.log('message received: ' + msg); - socket.broadcast.emit('chat_message', msg); - //io.emit('chat_message', msg); - }) + socket.on('sendmsg', (msg) => { + send_msg(socket, msg); + }); + +// socket.on('sendmsg', function (data) { +// // we tell the client to execute 'updatechat' with 2 parameters +// io.sockets.in(socket.room).emit('updatemsg', socket.username, data); +// }); + + socket.on('switchroom', function(newroom){ + // leave the current room (stored in session) + socket.leave(socket.room); + // join new room, received as function parameter + socket.join(newroom); + socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom); + // sent message to OLD room + socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room'); + // update socket session room title + socket.room = newroom; + socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room'); + // socket.emit('updaterooms', rooms, newroom); + }); + + socket.on('disconnect', () => { + // remove the username from global usernames list + delete usernames[socket.username]; + // update list of users in chat, client-side + io.sockets.emit('updateusers', usernames); + // echo globally that this client has left + socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected'); + socket.leave(socket.room); + }); });