Implemented real time online status

rebeljelly2147 · Feb 7, 2025 · a1085f3 · a1085f3
1 parent 14316bb
commit a1085f3
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 34 deletions.
diff --git a/backend/socket/socket.js b/backend/socket/socket.js
@@ -6,7 +6,8 @@ const app = express();
 
 const server = http.createServer(app);
 const io = new Server(server, {
-	cors: { // Cross-Origin Resource Sharing (CORS) is a security concept that allows restricting the resources implemented in web browsers.
+	// Cross-Origin Resource Sharing (CORS) is a security concept that allows restricting the resources implemented in web browsers.
+	cors: {
 		origin: ["http://localhost:3000"],
 		methods: ["GET", "POST"],
 	},
@@ -18,9 +19,11 @@ export const getReceiverSocketId = (receiverId) => {
 
 const userSocketMap = {}; // {userId: socketId}
 
+//io.on is simply used to listen to the events. can be used both on client and server side
 io.on("connection", (socket) => {
-	console.log("a user connected", socket.id);
+	console.log("User connected : ", socket.id);
 
+	//this part of code is for telling that a user is online
 	const userId = socket.handshake.query.userId;
 	if (userId != "undefined") userSocketMap[userId] = socket.id;
 
@@ -29,7 +32,7 @@ io.on("connection", (socket) => {
 
 	// socket.on() is used to listen to the events. can be used both on client and server side
 	socket.on("disconnect", () => {
-		console.log("user disconnected", socket.id);
+		console.log("User disconnected : ", socket.id);
 		delete userSocketMap[userId];
 		io.emit("getOnlineUsers", Object.keys(userSocketMap));
 	});

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,7 +16,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.21.3",
-    "socket.io-client": "^4.7.4",
+    "socket.io-client": "^4.8.1",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

diff --git a/frontend/src/components/messages/Message.jsx b/frontend/src/components/messages/Message.jsx
@@ -9,7 +9,7 @@ const Message = ({ message }) => {
 	const formattedTime = extractTime(message.createdAt);
 	const chatClassName = fromMe ? "chat-end" : "chat-start";
 	const profilePic = fromMe ? authUser.profilePic : selectedConversation?.profilePic;
-	const bubbleBgColor = fromMe ? "bg-blue-500" : "";
+	const bubbleBgColor = fromMe ? "bg-pink-900" : "";
 
 	const shakeClass = message.shouldShake ? "shake" : "";
 

diff --git a/frontend/src/components/sidebar/Conversation.jsx b/frontend/src/components/sidebar/Conversation.jsx
@@ -11,8 +11,8 @@ const Conversation = ({ conversation, lastIdx, emoji }) => {
 	return (
 		<>
 			<div
-				className={`flex gap-2 items-center hover:bg-sky-500 rounded p-2 py-1 cursor-pointer
-				${isSelected ? "bg-sky-500" : ""}
+				className={`flex gap-2 items-center hover:bg-pink-950 rounded-lg p-2 py-1 cursor-pointer
+				${isSelected ? "bg-pink-900" : ""}
 			`}
 				onClick={() => setSelectedConversation(conversation)}
 			>

diff --git a/frontend/src/context/SocketContext.jsx b/frontend/src/context/SocketContext.jsx
@@ -15,7 +15,7 @@ export const SocketContextProvider = ({ children }) => {
 
 	useEffect(() => {
 		if (authUser) {
-			const socket = io("https://chat-app-yt.onrender.com", {
+			const socket = io("http://localhost:8000",{
 				query: {
 					userId: authUser._id,
 				},