search

RocketChat / EmbeddedChat

An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp
https://www.npmjs.com/package/@embeddedchat/react
107 stars 214 forks source link

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

Open Spiral-Memory opened 1 week ago

Spiral-Memory commented 1 week ago

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)

image

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 commented 1 week ago

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

Spiral-Memory commented 1 week ago

image

devanshkansagra commented 1 week ago

Yea sure I will be working on it

Spiral-Memory commented 1 week ago

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:

image