[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:

[r3yc0n1c]

hey @devanshkansagra are you working on this? If not, I'm willing to fix it.

[devanshkansagra]

hey @r3yc0n1c, you can try it, but I don't think this is currently solvable because on integration side you are using react18 and in the storybook react17 is used so might be due to react versioning this is causing error. This thing we(I and @Spiral-Memory) have came across when I was working on this issue. The ddp error #600 is actually solved but this websocket still in connecting state error is not solved. This might be due to poor state management or something else causing in the backend side.

[r3yc0n1c]

have you tried upgrading storybook to react18 or downgrading the integration side?

[devanshkansagra]

Actually I have tried to upgrade it but still I have got same error. Idk whether this is backend side or client side issue

[devanshkansagra]

have you tried upgrading storybook to react18 or downgrading the integration side?

On downgrading the integration this error is resolved

[devanshkansagra]

maybe I don't know but when this project was introduced the react17 was very stable and react18 was a new commer. and earlier the integration was done on v17. we have some integration examples like e2e-react package, it is working on react 18 and you will observe this error over there

[r3yc0n1c]

got it, let me try this for v18

[devanshkansagra]

Hey @r3yc0n1c check this I am running this e2e-react package which is an EmbeddedChat integration and still there is error when running on react18