I am working on a project using ReactJS, NodeJS and Socket.io

I am not able to understand why I am getting the "hi" part of socket but not the "code" part the "hi" part was for debugging and there are users in the room when I do console.log

this is the backend

socket.on('code_message', (data) => {
                console.log("code got",data)
                console.log(data_pin)
                const usersInRoom = io.sockets.adapter.rooms.get(data_pin);
                console.log("users in room", usersInRoom)
                socket.to(data_pin).emit('code', {code:data.code})
                io.emit('hi',{code:data.code})
            })

frontend

useEffect(()=>{
    socket.on('code',(data)=>{
    console.log("code received",data)

    })
     socket.on('hi',(data)=>{
      console.log(data)
      console.log("hello")
    })
  },[socket])

Here I am getting hello along with the data but not "code received"

so this is the context api

import { createContext, useContext } from "react";
import { io } from 'socket.io-client'

export const socket = io.connect("http://localhost:5000", { withCredentials: true })
export const socketcontext = createContext()

export function useSocketContext(){
    return useContext(socketcontext)
}

is the problem here? should i use useRef or something?

I am working on a project using ReactJS, NodeJS and Socket.io

I am not able to understand why I am getting the "hi" part of socket but not the "code" part the "hi" part was for debugging and there are users in the room when I do console.log

this is the backend

socket.on('code_message', (data) => {
                console.log("code got",data)
                console.log(data_pin)
                const usersInRoom = io.sockets.adapter.rooms.get(data_pin);
                console.log("users in room", usersInRoom)
                socket.to(data_pin).emit('code', {code:data.code})
                io.emit('hi',{code:data.code})
            })

frontend

useEffect(()=>{
    socket.on('code',(data)=>{
    console.log("code received",data)

    })
     socket.on('hi',(data)=>{
      console.log(data)
      console.log("hello")
    })
  },[socket])

Here I am getting hello along with the data but not "code received"

so this is the context api

import { createContext, useContext } from "react";
import { io } from 'socket.io-client'

export const socket = io.connect("http://localhost:5000", { withCredentials: true })
export const socketcontext = createContext()

export function useSocketContext(){
    return useContext(socketcontext)
}

is the problem here? should i use useRef or something?

• reactjs
• node.js
• socket.io

2 Answers 2

The result you get is because you emit from the socket, so the sender is excluded:

socket.to(data_pin)...

If you want for the sender to recieve it, then use io:

io.to(data_pin)...

see:

You can also broadcast to a room from a given socket:

io.on("connection", (socket) => {
 socket.to("some room").emit("some event");
});

In that case, every socket in the room excluding the sender will get the event.

https://socket.io/docs/v4/rooms/

The "hi" event is broadcast using io.emit('hi', { code: data.code }), which sends to all clients globally, including the sender.

The "code" event is sent using socket.to(data_pin).emit('code', { code: data.code }), which only sends to users in the specified room (data_pin).

here is solution: Use io.to(room).emit() instead of socket.to(room).emit() if you want the sender to receive the message too.

io.to(data_pin).emit('code', { code: data.code });