Reactjs - react ui kit v3 Sometimes able to connect sendbird server and on page refresh not able to connect with same appId, userID

Hello @Pooja_Kognole,

Are you receiving any errors in the console? Could you provide a code example that I can use to recreate this error message?

Hi Sendbird,

Scenario is I want to create a group channel with some members using react UI kit v3

suppose I have user list like:

chatMembers=[{name: “abc1”}, {name: “abc2”}]
Below code snippet i have used :

let params = new sdk.GroupChannelParams();
params.isPublic = false;
params.isEphemeral = false;
params.isDistinct = distinctChannel;
params.isSuper = false;
if (newChatMembers) {
params.addUserIds(chatMembers);
}
params.name = channelName;
createChannel(params)
.then(c => {
console.log(“custom comp called”, c);
setChannelUrl(c.url);
})
.catch(c => console.warn(c));

PFA of console error
image.png

Please help me to resolve this issue.
Thanks,
Pooja

Using this code snippet I am trying to create group channel with some custom users can you please help me with this

UIKit v3 uses the v4 of the Chat SDK. If you wish to create a channel utilizing the SDK in your example, you need to define your group channel params in an object like so.

const params = {
    invitedUserIds: ['User A', 'User B'],
    name: Your Channel Name,
    isEphemeral = false,
    isSuper = false,
    isDistinct: distinctChannel,
}

A full list of the properties can be found here. Then you would pass your params into sdk.groupChannel.createChannel(params)

You can refer to this page in the docs on creating group channels with the SDK: https://sendbird.com/docs/chat/v4/javascript/channel/creating-a-channel/create-a-channel#4-group-channel

Hi Sendbird,

What should be state parameter while using getSdk() getting below error

trying to use like : const sdk = sendbirdSelectors.getSdk(state);

image

image

I have tried this code snippet but getting below error

image

this is error code snippet

@Pooja_Kognole, are you able to provide the code instead of a screenshot? If you can, please recreate your example on https://codesandbox.io and send the link so we can look at it together.

HI @Ian we are using react uikit and facing the similar issue for a few users on their machine for our production Environment we tried with different browsers but still facing the same issue,where if same user try to login with different machine it is working fine .

attaching Screenshot below.
in this screenshot you can see,for user there are existing channels but we are not able to see channels in list(it is working perfectly fine on mobile application).
and when user try to create new channel it gives Uncaught TypeError: u.GroupChannelParams is not a constructor error.
can you please let me know what we are missing here

Hi @sharad, and welcome to the Sendbird Community.

If possible, are you able to provide a code sample of your application? Please provide the code for the channel list and your code for creating a new group channel.

HI @Ian thanks for reply,

Following is the code snippet for channel list and Create Group Channel

1.code for channel List component with SendBirdProvide

 <SendBirdProvider
          appId={appId}
          userId={userId}
          accessToken={accessToken}
          stringSet={stringSet}
          allowProfileEdit={false}
          disableUserProfile={true}
          colorSet={myColorSet}
          includeReactions={false}
        >
          <ChannelList
            sortChannelList={channelSort}
            disableAutoSelect={false}
            renderChannelPreview={CustomChannelListPreview}
            queries={{
              channelListQuery: {
                order: "latest_last_message",
                includeEmpty: true,
                limit: 100,
              },
              applicationUserListQuery: {
                userIdsFilter: clientList?.data?.map((c) => c.sendbird_user_id),
              },
            }}
          />
</SendBirdProvider>

2.Code for create group channel

                    let params = new sdk.GroupChannelParams();
                    params.isPublic = false;
                    params.isEphemeral = false;
                    params.isDistinct = true;
                 
                    params.operatorUserIds = selectedOperatorIds;
                    params.addUserIds(userIds );
                    params.name = "Group Channel";
                    createChannel(params)
                      .then((c) => {
                     
                      })
                      .catch((c) => {
                        console.warn(c);
                      });

Note: Please note that it is working fine for most of the users but for few users on their machine it is not working on any browser… so please let me know what i am missing here.

Hello @sharad,

We will continue working with you in your support case.

@Ian Can you let us know what port is used by Sendbird UIKit server & Also is it possible, that system firewall can block Sendbird UIkit server ?

@sharad,

Sendbird Chat utilizes port 443. If you are blocking HTTP/HTTPS ports, it could prevent Chat from connecting.