[BUG]: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.

[Spiral-Memory]

Description

If you try to integrate this EmbeddedChat package into a React application created using create-react-app, as soon as you log in, you will encounter a warning or error similar to this:

Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
    at http://localhost:3002/rc-app-demo-page/static/js/bundle.js:5147:75
    at new Promise (<anonymous>)
    at t.<anonymous> (http://localhost:3002/rc-app-demo-page/static/js/bundle.js:5139:24)
    at http://localhost:3002/rc-app-demo-page/static/js/bundle.js:4962:19
    at Object.next (http://localhost:3002/rc-app-demo-page/static/js/bundle.js:4973:10)
    at http://localhost:3002/rc-app-demo-page/static/js/bundle.js:4896:35
    at new Promise (<anonymous>)
    at __awaiter$3 (http://localhost:3002/rc-app-demo-page/static/js/bundle.js:4876:12)
    at a.send (http://localhost:3002/rc-app-demo-page/static/js/bundle.js:5136:16)
    at t.<anonymous> (http://localhost:3002/rc-app-demo-page/static/js/bundle.js:5063:33)

A similar issue can also be found sometimes while in development, such as when Storybook hot reloads. Open the console log, and try to trigger actions like clicking on the page or typing something. You will notice a console error related to DDP:

Uncaught (in promise) Error: [ddp] sending without open connection
    at ddp.js:296:1
    at new Promise (<anonymous>)
    at Socket.<anonymous> (ddp.js:294:1)
    at step (ddp.js:60:1)
    at Object.next (ddp.js:41:1)
    at ddp.js:35:1
    at new Promise (<anonymous>)
    at push.../../node_modules/@rocket.chat/sdk/lib/drivers/ddp.js.__awaiter (ddp.js:31:1)
    at Socket._this.send (ddp.js:291:1)
    at Socket.<anonymous> (ddp.js:352:1)

The problem most likely lies in the connect function of the app in the EmbeddedChatAPI file. In the connect function, after connect({}) has been called, we call the resume function and pass the token. It seems like the connect function needs some time to establish the connection, and only after the connection is successfully established should other real-time DDP methods be called. If you comment out the section of code after connect({}), things will start working fine. I have been seeing this issue for a long time, since January when I first started contributing, but I don't know how to fix it.

Any help from other contributors would be really helpful.

Expected behavior

Real-time communication should be initiated only after a successful connection is made.

Update: As a temporary solution, Use "react": "^17.0.2" and "react-dom": "^17.0.2" in your project to avoid encountering this error during integration.

[Spiral-Memory]

Hey @devanshkansagra, this is the issue i was talking about, any help from your side will be greatly appreciated.

[Spiral-Memory]

[devanshkansagra]

Yea sure I will be working on it

[Spiral-Memory]

Let me also explain when we call the connect function defined in EmbeddedChatApi in packages/api and how it works. In EmbeddedChat.js in packages/react, within useEffect, we register a callback function into authListener. As soon as the authentication status changes (which occurs when notifyAuthListeners is called), a function will be triggered if it detects a user. In this function, we attempt to establish real-time communication using the connect function and set the user's details: