wip chat users and rooms base

tests_hugo/chat_node/chat_client/chat.html

@@ -32,13 +32,14 @@
 				<div class="control create drop_down">
 					<p class="_title" tabindex=0>create</p>
 					<div class="_items" tabindex=0>
-						<label for="input_outside"><p>direct chat</p></label>
+						<label for="input_outside"><p onclick="">direct chat</p></label>
 
 						<div class="drop_down _push">
 							<p class="_title" tabindex=0>room</p>
 							<div class="_items" tabindex=0>
-								<label for="input_outside"><p>test1</p></label>
-								<label for="input_outside"><p>test2</p></label>
+								<label for="input_outside"><p onclick="">public</p></label>
+								<label for="input_outside"><p onclick="">privte</p></label>
+								<label for="input_outside"><p onclick="">protected</p></label>
 							</div>
 						</div>
 
@@ -66,7 +67,7 @@
 				</div>
 			</div>
 
-			<button class="chat_item msg_send button" onclick="submit_new_message()">
+			<button class="chat_item msg_send button" onclick="send_msg()">
 				<p>send</p>
 			</button>
 
@@ -83,9 +84,12 @@
 			});
 		</script>
 
-		<script src="./chat_submit_msg.js"></script>
-		<script src="./chat_receive_msg.js"></script>
+		<script src="./chat_connection.js"></script>
+		<script src="./chat_send_msg.js"></script>
 		<script src="./chat_add_msg.js"></script>
 
+		<script src="./event_updatemsg.js"></script>
+		<script src="./chat_update_room.js"></script>
+
 	</body>
 </html>

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

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

tests_hugo/chat_node/chat_client/chat_receive_msg.js

@@ -1,5 +0,0 @@
-
-socket.on('chat_message', ({ data }) => {
-	add_new_message(data);
-});
-

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

tests_hugo/chat_node/chat_client/chat_submit_msg.js

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

tests_hugo/chat_node/chat_client/chat_update_room.js

@@ -0,0 +1,4 @@
+//socket.on('updateroom', (from, data) => {
+//	add_new_message(from, data);
+//});
+

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

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;

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

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

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

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