Cannot read properties of undefined (reading 'socketId') - node.js

Question

This is Messenger.jsx page
import "./messenger.css";
import Topbar from "../../components/topbar/Topbar";
import Conversation from "../../components/conversations/Conversation";
import Message from "../../components/message/Message";
import ChatOnline from "../../components/chatOnline/ChatOnline";
import { useContext, useEffect, useRef, useState } from "react";
import { AuthContext } from "../../context/AuthContext";
import axios from "axios";
import { io } from "socket.io-client";
export default function Messenger() {
const [conversations, setConversations] = useState([]);
const [currentChat, setCurrentChat] = useState(null);
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState("");
const [arrivalMessage, setArrivalMessage] = useState(null);
const [onlineUsers, setOnlineUsers] = useState([]);
const socket = useRef();
const { user } = useContext(AuthContext);
const scrollRef = useRef();
const client = axios.create({
baseURL: "http://localhost:8800/api"
});
useEffect(() => {
socket.current = io("ws://localhost:8900");
socket.current.on("getMessage", (data) => {
setArrivalMessage({
sender: data.senderId,
text: data.text,
createdAt: Date.now(),
});
});
}, []);
useEffect(() => {
arrivalMessage &&
currentChat?.members.includes(arrivalMessage.sender) &&
setMessages((prev) => [...prev, arrivalMessage]);
}, [arrivalMessage, currentChat]);
useEffect(() => {
socket.current.emit("addUser", user._id);
socket.current.on("getUsers", (users) => {
setOnlineUsers(
user.followings.filter((f) => users.some((u) => u.userId === f))
);
});
}, [user]);
useEffect(() => {
const getConversations = async () => {
try {
const res = await client.get("/conversations/" + user._id);
setConversations(res.data);
} catch (err) {
console.log(err);
}
};
getConversations();
}, [user._id]);
useEffect(() => {
const getMessages = async () => {
try {
const res = await client.get("/messages/" + currentChat?._id);
setMessages(res.data);
} catch (err) {
console.log(err);
}
};
getMessages();
}, [currentChat]);
const handleSubmit = async (e) => {
e.preventDefault();
const message = {
sender: user._id,
text: newMessage,
conversationId: currentChat._id,
};
const receiverId = currentChat.members.find(
(member) => member !== user._id
);
socket.current.emit("sendMessage", {
senderId: user._id,
receiverId,
text: newMessage,
});
try {
const res = await client.post("/messages", message);
setMessages([...messages, res.data]);
setNewMessage("");
} catch (err) {
console.log(err);
}
};
useEffect(() => {
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
return (
<>
<Topbar />
<div className="messenger">
<div className="chatMenu">
<div className="chatMenuWrapper">
<input placeholder="Search for friends" className="chatMenuInput" />
{conversations.map((c) => (
<div onClick={() => setCurrentChat(c)}>
<Conversation conversation={c} currentUser={user} />
</div>
))}
</div>
</div>
<div className="chatBox">
<div className="chatBoxWrapper">
{currentChat ? (
<>
<div className="chatBoxTop">
{messages.map((m) => (
<div ref={scrollRef}>
<Message message={m} own={m.sender === user._id} />
</div>
))}
</div>
<div className="chatBoxBottom">
<textarea
className="chatMessageInput"
placeholder="write something..."
onChange={(e) => setNewMessage(e.target.value)}
value={newMessage}
></textarea>
<button className="chatSubmitButton" onClick={handleSubmit}>
Send
</button>
</div>
</>
) : (
<span className="noConversationText">
Open a conversation to start a chat.
</span>
)}
</div>
</div>
<div className="chatOnline">
<div className="chatOnlineWrapper">
<ChatOnline
onlineUsers={onlineUsers}
currentId={user._id}
setCurrentChat={setCurrentChat}
/>
</div>
</div>
</div>
</>
);
}
This is the error iam getting:
a user connected.
a user connected.
D:\MYPROJECTS\cfg\mern tutorials\chatapp\socket\index.js:35
io.to(user.socketId).emit("getMessage", {
^
TypeError: Cannot read properties of undefined (reading 'socketId')
I have created a node app to initiate socket. In the index.js file of socket-app i made all connections. Iam having socket error, it is saying socket app crashed.
index.js page:
const io = require("socket.io")(8900, {
cors: {
origin: "http://localhost:3000",
},
});
let users = [];
const addUser = (userId, socketId) => {
!users.some((user) => user.userId === userId) &&
users.push({ userId, socketId });
};
const removeUser = (socketId) => {
users = users.filter((user) => user.socketId !== socketId);
};
const getUser = (userId) => {
return users.find((user) => user.userId === userId);
};
io.on("connection", (socket) => {
//when ceonnect
console.log("a user connected.");
//take userId and socketId from user
socket.on("addUser", (userId) => {
addUser(userId, socket.id);
io.emit("getUsers", users);
});
//send and get message
socket.on("sendMessage", ({ senderId, receiverId, text }) => {
const user = getUser(receiverId);
io.to(user.socketId).emit("getMessage", {
senderId,
text,
});
});
//when disconnect
socket.on("disconnect", () => {
console.log("a user disconnected!");
removeUser(socket.id);
io.emit("getUsers", users);
});
});

Answer 1

from this socket.on("sendMessage", ({ senderId, receiverId, text }) => {
const user = getUser(receiverId);
io.to(user.socketId).emit("getMessage", {
senderId,
text,
});
});
to
socket.on("sendMessage", ({ senderId, receiverId, text }) => {
const user = getUser(receiverId);
io.to(user?.socketId).emit("getMessage", {
senderId,
text,
});
});