如何解决 React.js socket.io 确认超时？

Question

I have a Node.js and React.js applications, server and client, respectively. I send data between them via socket.io and I am trying to implement acknoledgement but I get an error saying its been timed out:

Error: operation has timed out
at Timeout._onTimeout (C:\Project\gateway\node_modules\socket.io\dist\broadcast-operator.js:137:30)
at listOnTimeout (node:internal/timers:559:17)
at processTimers (node:internal/timers:502:7)

Here is my server code. Here the message variable prints Error: operation has timed out

 socket.emit((topic, message),function(message) {
        console.log('GOT MESSAGE');
        console.log(message);
    });  

Here is my client code:

 ioClient.on('triton/acs', (data, callback) => {
    callback("Message for server")
 }

Whhy is this not working and how to fix it?

Answer 1

As @darvine mentioned, there is not a lot of code to see how you implement socket.io server side and client side. However, from what I see above, I'm trying my best to answer your question in broad strokes since I am seeing a few syntax errors.

Your backend code:

socket.emit((topic, message),function(message) {
    console.log('GOT MESSAGE');
    console.log(message);
});  

It appears that you did not establish a connection to the client. You would achieve that by doing the following. Also, socket.emit is sending the data to the client. (There is no callback function in.emit). You send the data as the second parameter. If you want to receive data from the client then you use.on('listener', cb). See below;

//establish connection to the client
io.on('connection', (socket)=> {
      //sending a message to the client
      socket.emit('yourSentMessage', 'you are sending this message to the client');
      
      //receiving a message from the client.
      socket.on('yourReceivedMessage', (msg) => {
                console.log(msg) //this message was received from the client
             });
     });

On the frontend, it is important that you provide your socket instance appropriately. I would utilize context api. See this article for further information on this. You can wrap the components in the provider and have access to the socket instance. Again, it is also important to destinguish between.emit and.on on the frontend. If you want to send data to the backend, you utilize.emit (no callback). If you receive data from the backend, you utilize.on('listener', cb).

Lastly, react requires you to set the proxy server while you are running on localhost. You do that in the package.json file as shown in the screenshot below: