app/src/Chat.js

@@ -3,10 +3,10 @@ import io from "socket.io-client";
 import ScrollableFeed from 'react-scrollable-feed';
 import {escape} from "html-escaper";
 
-
 function Chat({user}) {
 
 	var [messages, setMessages] = useState([]);
+	var [users, setUsers] = useState([]);
 	var [socket, setSocket] = useState();
 
 	useEffect(() => {
@@ -18,15 +18,12 @@ function Chat({user}) {
 			console.debug("message", message);
 			setMessages(messages => [...messages, message]);
 		});
+		socket.on("users", setUsers);
 		return () => socket.close();
 	}, []);
 
 	function sendMessage(content) {
-		var message =  {
+		var message = {content};
-			content,
-			author: user.name,
-			color: user.color
-		};
 		socket.emit("message", message);
 	}
 
@@ -34,6 +31,7 @@ function Chat({user}) {
 		<div className="Chat h-full flex flex-col">
 			<MessageList messages={messages} />
 			<ChatInput sendMessage={sendMessage} />
+			<UserList users={users} />
 		</div>
 	)
 }
@@ -81,6 +79,13 @@ function ChatInput({sendMessage}) {
 
 
 
+function UserList({users}) {
+	return <div className="Users fixed top-0 right-5 text-right max-w-xs">
+		<b>{users.length}</b> online: {users.map(user => <span style={{color: user.color}} className="mr-1">{user.name}</span>)}
+	</div>
+}
+
+
 export default Chat;
 
 

app/src/InitPage.js

@@ -3,7 +3,7 @@ import {useState} from "react";
 export default function InitPage({setUser}) {
 
 	var [name, setName] = useState(null);
-	var [color, setColor] = useState(null);
+	var [color, setColor] = useState(random_color());
 
 	function onSubmit(event) {
 		event.preventDefault();
@@ -26,4 +26,11 @@ export default function InitPage({setUser}) {
 			</form>
 		</div>
 	</div>
+}
+
+function random_color() {
+	var letters = '0123456789ABCDEF'.split('');
+	var color = '#';
+	for (let i = 0; i < 6; i++) color += letters[Math.floor(Math.random() * 16)];
+	return color;
 }

server/index.js

@@ -18,12 +18,20 @@ dbclient.connect().then(async () => {
 	io.on("connection", async socket => {
 		console.log("connection from", socket.handshake?.address);
 		socket.once("user", async user => {
-			socket.user = user;
+			user.name = user.name?.trim();
+			if (!user.name) user.name = "no name";
+			socket.data.user = user;
 			newMessage({color: "#00FF00", content:`${user.name} connected`});
+			broadcastUsers();
 			socket.on("disconnect", () => {
-				newMessage({color: "#FF0000", content: `${socket.user.name} disconnected`});
+				newMessage({color: "#FF0000", content: `${socket.data.user.name} disconnected`});
+				broadcastUsers();
 			});
-			socket.on("message", newMessage);
+			socket.on("message", message => newMessage({
+				content: message.content,
+				author: socket.data.user.name,
+				color: socket.data.user.color
+			}));
 			var history = await col.find().sort({timestamp: -1}).limit(100).toArray();
 			history = history.reverse();
 			socket.emit("messages", history);
@@ -39,4 +47,9 @@ dbclient.connect().then(async () => {
 		io.emit("message", message);
 		return message;
 	}
+
+	async function broadcastUsers() {
+		var users = await io.fetchSockets().then(sockets => sockets.map(socket => socket.data.user));
+		io.emit("users", users);
+	}
 });