Sometime emit() is not working

[devlopersabbir]

I'm facing a simple issue but still now I didn't able to fix this issue.

I don't know how I can fix. I am trying to integrate socket.io in expo app.

• However, please check my code.
• I will try to share my all of required code.
• Remember it I'm using TypeScript.

My socket init with a very simple React hooks

import { io } from "socket.io-client";
import { baseURLSocket } from "../axios/axios";
import { useSelector } from "react-redux";

const useSocket = () => {
  const { auth } = useSelector((state: any) => state);
  const socket = io(baseURLSocket, {
    withCredentials: true,
    auth: {
      token: `Bearer ${auth?.access_token}`,
    },
    autoConnect: false,
  });
  return {
    socket,
  };
};
export default useSocket;

For the connect socket I was used

const { socket } = useSocket(); // imported from the hook
useEffect(()=>{
    socket.connect();
},[])

In the below section I'm trying to emit a message to the server

const { socket } = useSocket(); // imported from hook
  const [message, setMessage] = useState<string>(""); // A simple state to store our input message
  
  const submit = () =>{
    if(!message) return console.log("Message is empty")
    socket.emit("chat_message", message)
  }

So far I hope everything is ok.

Let's jump to the server side

For the server side I'm using only ExpressJs

One thing, for my comfort I used class.

import { Server as HttpServer } from "http";
import { Socket, Server } from "socket.io";
import { authencate } from "./middlewares/socketMiddleware";

export class SocketServer {
  public static instance: SocketServer;
  public io: Server;
  socket: Socket | null;

  constructor(server: HttpServer) {
    SocketServer.instance = this;
    this.io = new Server(server, {
      cors: {
        credentials: true,
        origin: "*",
      },
    });
    this.io.use(authencate);
    this.socket = null;
    console.log("Socket started");
    this.io.on("connect", this.StartListaning);
  }
  StartListaning = (socket: Socket) => {
    this.socket = socket;
    console.log(`Connected socket user: ${socket.data?.user?.username}`);
    socket.join(socket.data?.user?.uuid);

    /**
     * socket messesing
     */
    socket.on("chat_message", (msg) => {
      console.log(msg); // message is not coming
    });

    /**
     * if any user disconnect from chat
     */
    socket.on("disconnect", () => {
      console.log("Socket disconnected!", socket.data.user.username);
    });
  };
}

That's it. I hope anyone can find my issue.

Thanks 👍

[devlopersabbir]

I got the solution.

I will be happy to share what the issue was.

t was a socket connection issue

1. I'm using useEffect to connecting my socket when anyone enters this page.
2. When any user enters this page socket.connect() is triggered.
3. But when I tried to send a message, that time socket doesn't know what I do?
4. Like socket.emit() used or not?
5. What do you thank is the solution for this issue???

The solution is I think that remember (I'm not sure it's a really a solution or not)

const sendMessage = (e: FormEvent) => {
    e.preventDefault();
    socket.connect();
    socket.emit("message", message);
    setMessage("");
  };

When I am trying to send message after that I just reconnect my socket then it's working fine.