Question 201673 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Problem with showing whether I joined or not in a chat app

I have a bit of experience with react and express. I am trying to build a chat app using socket io. I am first time using it. But I think I got it a little bit after reading some documentation and youtube videos. Now, when someone enters the same room they can communicate. Now, suppose I am already in the room and someone joins the room then I suppose to see that person joined the room and I successfully turned it into logic and it worked. But, when I enter the room I want to show the message to myself that "You entered the room" where others will see "myname entered the room". I put the logic but somehow it is not working. I tried chatgpt but I ended up making him understand the logic :/

I have parent component called App and two children components called Join that is the form to join the room and another Message component that is the message body. I take the inputs(name, room) from Join to parent app and pass them as props to Message. This is my state of the Message component –>

this.state = {
      messages: [],
      inputMessage: "",
      joinedName: "",
      joinedRoom: "",
    };

and this is the componentDidMount lifecycle to change the state whenever a person sends and message or joins the room –>

componentDidMount() {
    const { room, name } = this.props;
    this.props.socket.emit("join-room", { room, name });
    this.props.socket.on("joined-room", (receivedName) => {
      this.setState({
        joinedName: receivedName,
        joinedRoom: receivedName === name ? "me" : "other",
      });
    });

    this.props.socket.on("receive-message", (newMessage) => {
      this.setState((prevState) => ({
        messages: [...prevState.messages, { content: newMessage, sender: "other" }],
      }));
    });
  }

To understand more here is the relevant part of my server –>

socket.on("join-room", (data) => {
        socket.join(data.room);
        socket.to(data.room).emit("joined-room",data.name)
    })

As you can see I am sending the name and room whenever a person joins the room. And changing the state accordingly and I am checking if the name I received from server is the name I provided earlier from the props or not. If it is then joinedRoom is me otherwise other. Then later I am using the joinedRoom state to show whether me or others entered the room. Here is how –>

{joinedName && (
            <div
              className={`bg-light-gray br3 rounded-lg pa2 mb2 self-end`}
              style={{
                color: "#fff",
                background: "rgb(148, 61, 255)",
              }}
            >
              <p className="ma0">
                {joinedRoom === "me" ? "You" : joinedName} joined the room
              </p>
            </div>
          )};

Then I am rendering this div if anyone joined the room. And I am checking in the p tag whether it is me or not and rendering the p tag accordingly as you can see.

Now the problem is when I join the room I am not seeing that "You joined the room" div. But when others enter the room I can see that "theriname entered the room". What is the flaw here?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved the problem and I am posting the answer here so that in case someone else faces this they don't have to struggle like me. In my server I want sending the joined person's name in the joined-room socket to everyone in the room except the very person who joined the room by coding this line

    socket.to(data.room).emit("joined-room",data.name)

    This is a socket.io thing that it sends the corresponding data to everyone in the room except the person who sent it in the firsthand. To send it to all including the sender the code would be this

    io.to(data.room).emit("joined-room",data.name)

    This will send the data to everyone in the room including the sender himself :)


  2. 0

    can you give us a working code in codesandbox.io ?
    Meanwhile, can you check if

    socket.on("join-room", (data) => {
        socket.join(data.room);
        socket.to(data.room).emit("joined-room",data.name)
    })

    in this block, you are getting data.room and data.name properly for both the cases? (you/other joining)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search