chat sender dont receive own messages

tests_hugo/chat_node/chat_client/chat.html

@@ -50,6 +50,7 @@
 
 		<script src="./chat_submit_msg.js"></script>
 		<script src="./chat_receive_msg.js"></script>
+		<script src="./chat_add_msg.js"></script>
 
 	</body>
 </html>

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;
+}
+

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;
-}
-

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");
+	}
 }
 

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);
+}