[Problem/Question]
Chat App showing “Trying to connect” after logging in the app and a user is unable to send a message:
It only works after a page refresh. Everything seems to be looking fine, the status is ‘authenticated’, we have the userId and APP_ID is correct.
[UIKit Version]
"@sendbird/chat": "^4.10.4",
"@sendbird/uikit-react": "^3.9.3",
"react": "18.2.0",
"next": "13.4.11",
[Reproduction Steps]
- Create Custom ChatApp:
'use client';
import ChannelHeader from '@sendbird/uikit-react/Channel/components/ChannelHeader';
import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';
import { ChannelProvider } from '@sendbird/uikit-react/Channel/context';
import ChannelListUI from '@sendbird/uikit-react/ChannelList/components/ChannelListUI';
import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';
import SBChannelSettings from '@sendbird/uikit-react/ChannelSettings';
import { useMemo, useState } from 'react';
export default function ChatApp() {
const [showSettings, setShowSettings] = useState(false);
const [channelUrl, setChannelUrl] = useState<string>('');
const query = useMemo(() => {
return {
channelListQuery: {
includeEmpty: true,
},
};
}, []);
return (
<div className="customized-app h-[calc(100dvh-12rem)]">
<div className="sendbird-app__wrap">
<ChannelListProvider
onChannelSelect={(channel) => {
setChannelUrl(channel?.url ?? '');
}}
queries={query}
>
<ChannelListUI
renderHeader={() => (
<span className="text-[18px]/[24px] font-bold text-black">
Channels
</span>
)}
/>
</ChannelListProvider>
<div className="flex flex-grow">
<ChannelProvider
channelUrl={channelUrl}
onChatHeaderActionClick={() => {
setShowSettings(false);
}}
>
<ChannelUI
renderChannelHeader={() => <ChannelHeader />}
/>
</ChannelProvider>
</div>
</div>
{showSettings && (
<div className="sendbird-app__settingspanel-wrap">
<SBChannelSettings
channelUrl={channelUrl}
onCloseClick={() => {
setShowSettings(false);
}}
/>
</div>
)}
</div>
);
}
- Dynamic rendering of the component:
import dynamic from 'next/dynamic';
const DynamicChat = dynamic(
() => import('@/components/dashboard/chats/Chats'),
{
ssr: false,
},
);
export default function Page() {
return <DynamicChat />;
}
- Create a Sendbird Provider:
'use client';
import SBProvider from '@sendbird/uikit-react/SendbirdProvider';
import enGB from 'date-fns/locale/en-GB';
import { useSession } from 'next-auth/react';
import { ReactNode } from 'react';
type ProviderProps = {
children?: ReactNode;
};
const APP_ID = process.env.NEXT_PUBLIC_SENDBIRD_LOCAL_APP_ID;
export const SendbirdProvider = ({ children }: ProviderProps) => {
const { data, status } = useSession();
if (status === 'loading') {
return <>Loading...</>;
}
const myColorSet = {
'--sendbird-light-primary-400': '#D9D9D9',
'--sendbird-light-primary-300': '#474a50',
'--sendbird-light-onlight-02': '#bdbdbd',
'--sendbird-light-onlight-01': '#333333',
'--sendbird-light-background-100': '#00FF9D',
'--sendbird-light-background-200': '#00FF9D',
};
return (
<SBProvider
appId={APP_ID ?? ''}
userId={`${data?.user.id}`}
colorSet={myColorSet}
dateLocale={enGB}
// config={{ logLevel: 'debug' }}
>
{children}
</SBProvider>
);
};
- Wrap it around the app:
<main className="h-auto min-h-screen">
<NextAuthProvider>
<QueryProvider>
<LayoutProvider>
<SendbirdProvider>
<ContextProviders>
{children}
</ContextProviders>
</SendbirdProvider>
</LayoutProvider>
</QueryProvider>
</NextAuthProvider>
</main>
[Frequency]
Every time we login, and go to Chat part of the app.
[Current impact]
Bad UX, as they think it is not connecting at all, and after refresh it works…
,
