dark

app/src/App.js

@@ -11,7 +11,7 @@ export default function App() {
 	}
 
 
-	return <div className="App h-full">
+	return <div className="App h-full dark:bg-black dark:text-white">
 		{user ? <Chat user={user} /> : <InitPage setUser={setUser} />}
 	</div>
 }

app/src/Chat.js

@@ -12,13 +12,12 @@ function Chat({user}) {
 	useEffect(() => {
 		var socket = io(window.location.hostname === "localhost" ? "http://localhost:8535" : undefined);
 		setSocket(socket);
-
+		socket.emit("user", user);
 		socket.on("messages", setMessages);
 		socket.on("message", message => {
-			console.debug("server: message", message)
+			console.debug("message", message);
 			setMessages(messages => [...messages, message]);
 		});
-
 		return () => socket.close();
 	}, []);
 
@@ -49,8 +48,8 @@ function MessageList({messages}) {
 		<ul className="messages p-4 w-full flex-1 overflow-y-auto">
 			{messages.map(message =>
 				<li key={message._id} className="message" title={message.timestamp}>
-					<span className="author font-bold">{message.author}: </span>
-					<span className="content" style={{color: message.color}} dangerouslySetInnerHTML={{__html:processMessageContent(message.content)}}></span>
+					{message.author ? <span className="author font-bold">{message.author}: </span> : ''}
+					<span className={"content" + (message.author ? '' : " font-bold")} style={{color: message.color}} dangerouslySetInnerHTML={{__html:processMessageContent(message.content)}}></span>
 				</li>
 			)}
 			{/*<div ref={endRef}></div>*/}
@@ -71,7 +70,7 @@ function ChatInput({sendMessage}) {
 	}
 	return <form onSubmit={onSubmit}>
 		<input
-		 	className="p-4 w-full"
+		 	className="p-4 w-full dark:bg-black"
 			type="text"
 			onChange={event => setContent(event.target.value)}
 			value={content}

app/src/InitPage.js

@@ -10,33 +10,19 @@ export default function InitPage({setUser}) {
 		setUser({name, color});
 	}
 
-	return <div className="InitPage p-6 content-center">
-		<div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm m-auto">
+	return <div className="InitPage p-3">
+		<div className="">
 			<form onSubmit={onSubmit}>
-				<div>welcome to chat app</div>
-				<div>
-				<label for="name">enter name:</label>
-				<input type="text" id="name" className="form-control
-				block
-				w-full
-				px-3
-				py-1.5
-				text-base
-				font-normal
-				text-gray-700
-				bg-white bg-clip-padding
-				border border-solid border-gray-300
-				rounded
-				transition
-				ease-in-out
-				m-0
-				focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" value={name} onChange={event => setName(event.target.value)} />
+				<div className="m-1">welcome to chat app</div>
+				<div className="m-1">
+				<label for="name" className="mr-2">enter name:</label>
+				<input type="text" id="name" className="dark:bg-black border p-1" value={name} onChange={event => setName(event.target.value)} />
 				</div>
-				<div>
-				<label for="color">choose color:</label>
+				<div className="m-1">
+				<label for="color" className="mr-2">choose color:</label>
 				<input type="color" id="color" value={color} onChange={event => setColor(event.target.value)} />
 				</div>
-				<div><input type="submit" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" value="ok go"></input></div>
+				<div className="m-1"><input type="submit" className="border p-1" value="ok go"></input></div>
 			</form>
 		</div>
 	</div>

server/index.js

@@ -17,29 +17,26 @@ dbclient.connect().then(async () => {
 
 	io.on("connection", async socket => {
 		console.log("connection from", socket.handshake?.address);
-
-		socket.on("message", async message => {
-			message = { // filters out arbitrary properties
-				author: message.author,
-				content: message.content,
-				color: message.color,
-				timestamp: new Date(),
-				ip: socket.handshake?.address
-			}
-			var {insertedId} = await col.insertOne(message);
-			message._id = insertedId;
-			console.log("message", message);
-			delete message.ip;
-			io.emit("message", message);
+		socket.once("user", async user => {
+			socket.user = user;
+			newMessage({color: "#00FF00", content:`${user.name} connected`});
+			socket.on("disconnect", () => {
+				newMessage({color: "#FF0000", content: `${socket.user.name} disconnected`});
+			});
+			socket.on("message", newMessage);
+			var history = await col.find().sort({timestamp: -1}).limit(100).toArray();
+			history = history.reverse();
+			socket.emit("messages", history);
 		});
-
-		var history = await col.find().sort({timestamp: -1}).limit(100).toArray();
-		history = history.reverse();
-		socket.emit("messages", history);
-
 	});
 	server.listen(8535);
+
+	async function newMessage({author, content, color}) {
+		var message = {author, content, color, timestamp: new Date()};
+		var {insertedId} = await col.insertOne(message);
+		message._id = insertedId;
+		console.debug("newMessage", JSON.stringify(message));
+		io.emit("message", message);
+		return message;
+	}
 });
-
-
-