El socket tiene que escuchar al servidor cuando envío un nuevo mensaje.
Los mensajes llegan porque cuando actualizo la página puedo verlos.
El zócalo del lado del servidor que sé está funcionando porque en otra aplicación frontend el mismo zócalo del cliente está funcionando.
Este socket se llama cada vez que el usuario selecciona un nuevo chat en la web.

Aquí está el servicio de socket en mi aplicación:

 import openSocket from "socket.io-client"; function connectToSocket() { return openSocket("http://localhost:8080"); } export default connectToSocket;

Y aquí está el código que se ejecuta cuando el usuario selecciona un chat:

 // how i am importing the socket import openSocket from "../../Services/socket-io" async function fetchMessages(ticketId) { try { const { data } = await api.get("/messages/" + ticketId, { params: { pageNumber }, }); if (ticketId === data.ticket.id) { await loadMessages(data, ticketId); } listenMessages(ticketId); } catch (err) { Toast.ToastError("Error trying to load messages"); } }; function listenMessages(ticketId) { const socket = openSocket(); socket.on("connect", () => socket.emit("joinChatBox", ticketId)); socket.on("appMessage", (data) => { if (data.action === "create") { console.log(data); } if (data.action === "update") { console.log(data); } }); }

Lo que ya probé:
Utilice la misma versión de socket tanto en el cliente como en el servidor (3.0.5).
Llamar a listenMessages cada vez que se envía un mensaje.
socket.io-cliente versión 4.