fix

app/src/App.js

@@ -50,12 +50,24 @@ function Chat({user, updateUser, theme, setTheme}) {
 	useEffect(() => {
 		document.getElementById("favicon").href = SERVER_BASE_URL+`/favicon.svg?num=${unread}`;
 	}, [unread]);
+
 	useEffect(() => {
-		document.addEventListener("visibilitychange", () => {
+		var fn = () => {
 			if (document.visibilityState === "visible") setUnread(0);
-		});
+		};
+		document.addEventListener("visibilitychange", fn);
+		return () => document.removeEventListener("visibilitychange", fn);
 	}, []);
 
+
+	var loadMessages = useCallback(function loadMessages() {
+		fetch(SERVER_BASE_URL+"/messages?secret="+user.secret).then(res => res.json()).then(messages => {
+			console.debug("messages", messages);
+			setMessages(messages);
+		});
+	}, [setMessages, user.secret]);
+	useEffect(loadMessages, []);
+
 	useEffect(() => {
 		var socket = io(SERVER_BASE_URL, {
 			transports: ["websocket", "polling"]
@@ -65,15 +77,16 @@ function Chat({user, updateUser, theme, setTheme}) {
 		socket.on("connect", () => {
 			console.debug("socket connect, id: " + socket.id);
 			socket.emit("user", user);
+			loadMessages();
 		});
 		socket.on("disconnect", () => console.debug("socket disconnect"));
-		{let emit = socket.emit; socket.emit = function() {
+		/*{let emit = socket.emit; socket.emit = function() {
 			emit.apply(socket, arguments);
 			console.debug("send", ...arguments);
 		}}
 		socket.onAny((eventName, ...args) => {
 			console.debug("receive", eventName, ...args)
-		});
+		});*/
 		socket.on("message", message => {
 			setMessages(messages => [...messages, message]);
 			if (document.visibilityState === "hidden") setUnread(unread => ++unread);
@@ -86,11 +99,12 @@ function Chat({user, updateUser, theme, setTheme}) {
 			setMice(mice => ({...mice, [socketid]: {x, y}}));
 		});
 		return () => socket.close();
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, []); // eslint-disable-line react-hooks/exhaustive-deps
+
 	useEffect(() => {
 		socket?.emit("user", user);
 	}, [socket, user]);
+
 	useEffect(() => {
 		var socketids = users.map(user => user.socketid);
 		setMice(mice => {
@@ -98,14 +112,9 @@ function Chat({user, updateUser, theme, setTheme}) {
 			return mice;
 		});
 	}, [users]);
-	useEffect(() => {
-		fetch(SERVER_BASE_URL+"/messages?secret="+user.secret).then(res => res.json()).then(messages => {
-			console.debug("messages", messages);
-			setMessages(messages);
-		});
-	}, [setMessages, user.secret]);
 
 	var sendMessage = useCallback(message => socket.emit("message", message), [socket]);
+	
 
 	return (
 		<div className="Chat flex flex-col">

server/index.js

@@ -50,13 +50,12 @@ app.get("/messages", (req, res, next) => {
 		if (afterDate) query.timestamp.$gt = afterDate;
 	}
 
-	messages.find(query || {}).project({"file.data": 0, "user.ip": 0, "user.secret": 0}).sort({timestamp: -1}).limit(100).toArray().then(messages => {
-		if (req.query.secret) {
-			for (let message of messages) {
-				if (message.user && message.user.secret === req.query.secret) {
-					message.user.you = true;
-				}
+	messages.find(query || {}).project({"file.data": 0, "user.ip": 0}).sort({timestamp: -1}).limit(100).toArray().then(messages => {
+		for (let message of messages) {
+			if (req.query.secret && message.user && message.user.secret === req.query.secret) {
+				message.user.you = true;
 			}
+			delete message.user?.secret;
 		}
 		res.send(messages.reverse());
 	}).catch(e => next(e));