diff --git a/tests_hugo/chat_node/README.md b/tests_hugo/chat_node/README.md index 71b095ec..866975b9 100644 --- a/tests_hugo/chat_node/README.md +++ b/tests_hugo/chat_node/README.md @@ -11,3 +11,4 @@ next time : anytime : nodemon server +- [ ] don't send message to oneself diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html index 33355042..2229c9ce 100644 --- a/tests_hugo/chat_node/chat_client/chat.html +++ b/tests_hugo/chat_node/chat_client/chat.html @@ -50,6 +50,7 @@ + diff --git a/tests_hugo/chat_node/chat_client/chat_add_msg.js b/tests_hugo/chat_node/chat_client/chat_add_msg.js new file mode 100644 index 00000000..013c5175 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/chat_add_msg.js @@ -0,0 +1,17 @@ + +const add_new_message = (message, from = "others") => { + const div_thread = document.getElementById('msg_thread'); + + console.log("received message:"); + console.log(`[${message}]`); + + div_thread.appendChild(build_new_message(message, from)); +} + +const build_new_message = (message, from) => { + const p = document.createElement("p"); + p.classList.add(from); + p.appendChild(document.createTextNode(message)); + return p; +} + diff --git a/tests_hugo/chat_node/chat_client/chat_receive_msg.js b/tests_hugo/chat_node/chat_client/chat_receive_msg.js index ec3fb1d2..96b31d27 100644 --- a/tests_hugo/chat_node/chat_client/chat_receive_msg.js +++ b/tests_hugo/chat_node/chat_client/chat_receive_msg.js @@ -1,20 +1,5 @@ socket.on('chat_message', ({ data }) => { - handle_new_message(data); + add_new_message(data); }); -const handle_new_message = (message) => { - const div_thread = document.getElementById('msg_thread'); - - console.log("received message:"); - console.log(`[${message}]`); - - div_thread.appendChild(build_new_message(message)); -} - -const build_new_message = (message) => { - const p = document.createElement("p"); - p.appendChild(document.createTextNode(message)); - return p; -} - diff --git a/tests_hugo/chat_node/chat_client/chat_submit_msg.js b/tests_hugo/chat_node/chat_client/chat_submit_msg.js index b8bfe12a..c7c972e1 100644 --- a/tests_hugo/chat_node/chat_client/chat_submit_msg.js +++ b/tests_hugo/chat_node/chat_client/chat_submit_msg.js @@ -12,7 +12,9 @@ const submit_new_message = () => { console.log(`[${msg}]`); console.log(msg.length); - if (msg.length > 0) + if (msg.length > 0) { socket.emit('chat_message', { data: msg }); + add_new_message(msg, "me"); + } } 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 6712251b..49307073 100644 --- a/tests_hugo/chat_node/chat_client/style/msg_thread.css +++ b/tests_hugo/chat_node/chat_client/style/msg_thread.css @@ -12,8 +12,16 @@ .chat_box #msg_thread p { white-space: pre-wrap; - margin: 5px auto 5px 0px; + margin: 5px auto; padding: 5px; border-radius: 5px; +} + +.chat_box #msg_thread p.others { + margin-left: 0px; background-color: rgb(210, 210, 210); } +.chat_box #msg_thread p.me { + margin-right: 0px; + background-color: rgb(210, 110, 10); +} diff --git a/tests_hugo/chat_node/chat_server/server.js b/tests_hugo/chat_node/chat_server/server.js index ca1ccd87..b689ae26 100644 --- a/tests_hugo/chat_node/chat_server/server.js +++ b/tests_hugo/chat_node/chat_server/server.js @@ -11,6 +11,7 @@ const { Server } = require("socket.io"); // https://socket.io/docs/v4/handling-cors/ const io = new Server(server, { cors: { + // change this for the real front origin origin: "*" } }); @@ -24,7 +25,7 @@ const io = new Server(server, { // console.log(req.headers); //}) -io.on('connection', function (socket) { +io.on('connection', (socket) => { console.log('a user is connected'); @@ -34,7 +35,8 @@ io.on('connection', function (socket) { socket.on('chat_message', function (msg) { console.log('message received: ' + msg); - io.emit('chat_message', msg); + socket.broadcast.emit('chat_message', msg); + //io.emit('chat_message', msg); }) });