GetStream / stream-chat-react

React Chat SDK ➜ Stream Chat 💬
https://getstream.io/chat/sdk/react/
Other
702 stars 273 forks source link

Client event doesn't detect user.presence.changed, user.watching.start, etc. #192

Closed iamacatperson closed 4 years ago

iamacatperson commented 4 years ago

Basically I have this current set-up for livestream chat:

const chatClient = new StreamChat(OUR_KEY);

chatClient.setUser(
{
    id: OUR_USERID,
    name: USERNAME
},
STREAM_TOKEN
);

const channel = chatClient.channel("livestream", STREAM_CHANNEL_ID, {
    image: "",
    name: "Event Name"
});

channel.watch({ presence: true });

channel.on(event => {
    console.log("CHANNEL EVENT");
    console.log(event);
});

chatClient.on(event => {
    console.log("CLIENT EVENT");
    console.log(event);
});

I tried sending messages on the channel or adding reactions and I do get the log for that event. I also get health.check and connection.changed logs from client events.

However, it can't seem to detect user.presence.changed, user.watching.start, etc. I simulated this by logging-in as 2 different users (one in normal browser, the other in incognito). Then I trigger stopWatching() method upon some button click:

const stopWatching = async () => {
    const response = await channel.stopWatching();
    console.log(response);
};

And I also triggered:

chatClient.disconnect();

I also tried initialising the members of the chat as in:

const channel = chatClient.channel("livestream", STREAM_CHANNEL_ID, {
    image: "",
    name: "Event Name",
    members: ["member-id-1", "member-id-2"]
});

But I still don't get any logs. Anything wrong with the implementation and am I missing something?

Below are the react components that I use to render the chat:

<Chat client={chatClient} theme={"livestream light"}>
      <Channel channel={channel} Message={MessageLivestream}>
            <Window hideOnThread>
                <ChannelHeader live />
                <MessageList />
                <MessageInput Input={MessageInputSmall} focus />
            </Window>
            <Thread fullWidth />
     </Channel>
</Chat>
vishalnarkhede commented 4 years ago

Hey @iamacatperson , I will check and get back to you!

vishalnarkhede commented 4 years ago

@iamacatperson by default presence related events are disabled for livestream type channel. You can enable them in dashboard (dashboard -> your app -> chat overview -> livestream -> connect events toggle)

Screenshot 2020-04-01 at 10 03 43

It has certain limit though. @bogdan-getstream can you explain a bit on limits on number of watcher for presence events?

iamacatperson commented 4 years ago

@vishalnarkhede I restructured the component to use class-based component instead of functional with hooks. It's now working without me having to change the settings in the dashboard.

My question is, does the current react api not fully support functional component with hooks?

Yup it would be good to know about the limits also. And is it the same even for a paid account? As there may be up to a thousand+ participants in the chat at a point in time, although we would only query 10 users or so in one page.

bogdan-getstream commented 4 years ago

Currently we have no limits other that rate limit.

Limits will be added soon, in case you need to disable such events on some amount of channel watchers, that setting will be configurable from dashboard

vishalnarkhede commented 4 years ago

@vishalnarkhede I restructured the component to use class-based component instead of functional with hooks. It's now working without me having to change the settings in the dashboard.

My question is, does the current react api not fully support functional component with hooks?

class or functional components shouldn't matter. Could you share some code please?

vishalnarkhede commented 4 years ago

@iamacatperson I guess this question was resolved in https://github.com/GetStream/stream-chat-react/issues/207. So closing it for now. Please reopen if you have any more question!