Action runs after socket.io response but the botMessage does not appear in component

[ticpoi]

We are using socket.io to get some more complicated answers from server and the messaging is socket event based.

We defined multiple actions and two of them are to implement the server side responses.

As a sample you can find code below. All codes below are from ActionProvider.js

Socket initializer and the response event to client

const socketInitializer = async () => {
  // We just call it because we don't need anything else out of it
  await fetch("/api/socket/chatbotSocket")

  socket = io()

// Whenever a message is generated on server it reaches to this event on client as a socket message and works well
  socket.on('serverToClientMessage', (msg) => {
      console.log('msg returned on client: ', msg)
      addServerSideAnswerToMessages(msg)
  })
}

This action is for sending the message to server, response is not sync, it will come to the event defined above

const sendMessageToServer = async (_message) => {
    console.log('user message send to server: ', _message)
    socket.emit('clientToServerMessage', { author: 'user', message: _message })
}

This method also defined as an action, it writes the result to console and it works very well. When the event triggered this function runs with correct message

const addServerSideAnswerToMessages = (msg) => {
    const botMessage = createChatBotMessage(msg.message)
    console.log('botMessage: ', botMessage)

    setState((prev) => ({
        ...prev,
        messages: [...prev.messages, botMessage],
    }))
}

These two actions and the first socket listener works well and I see the result on console properly, but it does not appear on chat window.

<div>
{
React.Children.map(children, (child) => {
    return React.cloneElement(child, {
                 actions: {
                    sendMessageToServer, // Send to server
                    addServerSideAnswerToMessages, // Runs when the server responds over socket message
                    handleHello, // Client side hello
                    handlePolicy, // Client side another test
                },
            })
        })
    }
</div>

What could be the problem? Any one has any experience using with socket.io?

Thanks.

[ticpoi]

https://github.com/FredrikOseberg/react-chatbot-kit/issues/108

This issue may be related with the same problem with us.

Actions calling from MessageParser works properly, but when I call an action from another part related to another event, botMessage does not appear.

Wanted to share, because they could be related.

[leek1]

Found any solution for Action runs after socket.io response but the botMessage does not appear in component ? @ticpoi

[manu-ho]

I run into the same issue. Since I'm quite new to react, I cannot debug the issue effectively.

Does anyone have an idea how to fix this?

I would be willing to contribute, but currently have no clue how to fix this.