React Native Chat SDK, when trying to connect, get Websocket Connection Failed error

Sendbird Chat API/SDK JavaScript
1

Hi. I have 2 implementations of my app:

  1. React (web app),
  2. React Native.

My web app is connecting and fully functioning without problems. However, in React Native, when I try to connect using sb.connect(), I am getting the below errors:

API dummy call failed [SendBirdException: Request failed.]
SendBirdException: Websocket connection failed.

I’m running React Native with Expo Client & Expo CLI on my own Android device.

I’m just using the SDK called. I tried using getInstance() as well in my other SDK methods, but did not succeed.
Do I need to call sb.disconnect() in my web app? Does it have anything to do with that?
Do I need to create my own API call to the server to connect/create instances?

Here’s my code:

import Sendbird from 'sendbird';

function Connect(sbAppId, sbUserId) {

    return new Promise((resolve, reject) => {

        const sb = new Sendbird({ 'appId': sbAppId });

        sb.connect(sbUserId, (user, error) => {

            if (error) {

                reject('SendBird Connection Failed.');

            } else {

                resolve('success')

            }

        })

    })

}

export default Connect;
2

If “Websocket connection failed” is present, have you checked your device / simulator has internet connection?

You should move the const sb = new Sendbird({ … }) to the top and call it once.

3

You need to create sendbirdContext to use for react native

4

I am facing the same issue

this is my App.tsx:

import React from 'react';
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import { ThemeProvider, USER_TYPE } from '@app/theme';
import AppNavigation from '@customer/navigation';
import { ApolloProvider } from '@apollo/client';
import { createClient } from '@zedapp/data-access';
import { useAuth } from '@customer/modules/auth/login/hooks/useAuth';
import SendBird from 'sendbird';
import Config from 'react-native-config';
import { chatVar } from '@customer/reactivities';
import ChatProvider from './context';

const sendbird = new SendBird({ appId: Config.SENDBIRD_APP_ID });
// chatVar({ sendbird });
sendbird.setErrorFirstCallback(true);

const initialState = {
  sendbird,
};

const App = () => {
  const { authVar } = useAuth();
  const params = {
    authToken: authVar.token,
  };

  const client = createClient(params);
  return (
    <ChatProvider value={initialState}>
      <ApolloProvider client={client}>
        <NavigationContainer theme={DarkTheme} >
          <ThemeProvider value={{ userType: USER_TYPE.CUSTOMER }}>
            <AppNavigation />
          </ThemeProvider>
        </NavigationContainer>
      </ApolloProvider>
    </ChatProvider>
  );
};

export default App;

and my chat screen (where i’m getting the error):

import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Header, hp } from '@app/components';
import { useTheme } from '@app/theme';
import { useChatContext } from '@customer/app/context';
import { useCustomer } from '@customer/modules/profile/hooks/useCustomer';

const ChatWithAgentScreen = () => {
  const theme = useTheme();
  const { sendbird } = useChatContext();
  const { customerVar } = useCustomer();

  useEffect(() => {
    //   console.log(sendbird);
    // if (sendbird.connect) connect();
    connect();
  }, []);

  const connect = async () => {
    try {
      const user = await sendbird?.connect(customerVar?.idCustomerUser);
      console.log('connect_user', user);
    } catch (err) {
      console.log('connect_error', err);
    }
  };

  return (
    <>
      <Container.Flex style={styles.container}>
        <Header.AppHeader
          headerText={'Chat with Cx Service agent.'}
          headerTextColor={theme.main.white}
          containerStyle={{ backgroundColor: theme.main.secondary }}
          hideLeft={true}
        />
      </Container.Flex>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginBottom: hp(12),
    backgroundColor: '#fff',
  },
  body: { paddingHorizontal: 24, justifyContent: 'center' },
  moodSelector: {
    marginVertical: 12,
  },
});

export default ChatWithAgentScreen;