From a9f07b9e88565269e7b4d32ea31c947c0b62cf91 Mon Sep 17 00:00:00 2001 From: San Nguyen <22189661+sandangel@users.noreply.github.com> Date: Fri, 29 Nov 2024 06:35:37 +0900 Subject: [PATCH] Revert "Optionally require websocket connection in react-client (#1379)" (#1547) Reverts #1379 This is not working as intended. There are some race condition between events that we are subcribing to. So just revert and then we can implement a proper PR with tests. --- libs/react-client/README.md | 7 ++-- libs/react-client/src/useChatSession.ts | 47 +++---------------------- 2 files changed, 8 insertions(+), 46 deletions(-) diff --git a/libs/react-client/README.md b/libs/react-client/README.md index 4f2834d1b5..9cbce8f8d1 100644 --- a/libs/react-client/README.md +++ b/libs/react-client/README.md @@ -42,8 +42,8 @@ This hook is responsible for managing the chat session's connection to the WebSo #### Methods -- `connect`: Establishes a connection to the SocketIO server. -- `disconnect`: Disconnects from the SocketIO server. +- `connect`: Establishes a connection to the WebSocket server. +- `disconnect`: Disconnects from the WebSocket server. - `setChatProfile`: Sets the chat profile state. #### Example @@ -60,8 +60,7 @@ const ChatComponent = () => { userEnv: { /* user environment variables */ }, - accessToken: 'Bearer YOUR_ACCESS_TOKEN', // Optional Chainlit auth token - requireWebSocket: true // Optional, require WebSocket upgrade to be successful before user can interact with the chat bot. Will retry upgrade request every 500ms until successful. Please note if your server is behind a proxy, you will have to configure it to accept websocket upgrade request, otherwise users won't be able to interact with the app. You can check an example using nginx proxy here: https://nginx.org/en/docs/http/websocket.html. Default to false. + accessToken: 'Bearer YOUR_ACCESS_TOKEN' // Optional Chainlit auth token }); return () => { diff --git a/libs/react-client/src/useChatSession.ts b/libs/react-client/src/useChatSession.ts index 384a8f31fd..441e66d665 100644 --- a/libs/react-client/src/useChatSession.ts +++ b/libs/react-client/src/useChatSession.ts @@ -86,12 +86,10 @@ const useChatSession = () => { const _connect = useCallback( ({ userEnv, - accessToken, - requireWebSocket = false + accessToken }: { userEnv: Record; accessToken?: string; - requireWebSocket?: boolean; }) => { const { protocol, host, pathname } = new URL(client.httpEndpoint); const uri = `${protocol}//${host}`; @@ -121,49 +119,14 @@ const useChatSession = () => { }; }); - const onConnect = () => { + socket.on('connect', () => { socket.emit('connection_successful'); setSession((s) => ({ ...s!, error: false })); - }; + }); - const onConnectError = () => { + socket.on('connect_error', (_) => { setSession((s) => ({ ...s!, error: true })); - }; - - // https://socket.io/docs/v4/how-it-works/#upgrade-mechanism - // Require WebSocket when connecting to backend - if (requireWebSocket) { - // https://socket.io/docs/v4/client-socket-instance/#socketio - // 'connect' event is emitted when the underlying connection is established with polling transport - // 'upgrade' event is emitted when the underlying connection is upgraded to WebSocket and polling request is stopped. - const engine = socket.io.engine; - // https://github.com/socketio/socket.io/tree/main/packages/engine.io-client#events - engine.once('upgrade', () => { - // Set session on connect event, otherwise user can not interact with text input UI. - // Upgrade event is required to make sure user won't interact with the session before websocket upgrade success - socket.on('connect', onConnect); - }); - // Socket.io will not retry upgrade request. - // Retry upgrade to websocket when error can only be done via reconnect. - // This will not be an issue for users if they are using persistent sticky session. - // In case they are using soft session affinity like Istio, then sometimes upgrade request will fail - engine.once('upgradeError', () => { - onConnectError(); - setTimeout(() => { - socket.removeAllListeners(); - socket.close(); - _connect({ - userEnv, - accessToken, - requireWebSocket - }); - }, 500); - }); - } else { - socket.on('connect', onConnect); - } - - socket.on('connect_error', onConnectError); + }); socket.on('task_start', () => { setLoading(true);