Events are not fired when watching newly created `Channel`

[rantingmong]

I'm integrating stream in a react native app. We have a feature in our app where you can initiate conversation with other people. My code when creating a channel goes like this:

const channel = client.channel("messaging", { members: [ "id1", "id2" ] })

Then this channel instance is passed later in another screen that calls

await channel.watch()

I then attach events to the channel instance after watch returns by doing:

channel.on("all", ...) // "all" for testing events

I'm wondering why if its the first time a channel's being made to the server (even after await watch method returns) it does not emit any events. But when an entry's made, it emits fine.

[rantingmong]

Also is this normal? Its adding and removing a lot of events in a short span:

LOG  conversation - index render
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info connection:onlineStatusChanged() - Status changing to online. isHealthy: true ["connection"]
 LOG  info Attaching listener for notification.mutes_updated event ["event", "client"]
 LOG  conversation - index useEffect: create
 LOG  info client: get - Request - https://chat.stream-io-api.com/app ["api", "api_request", "client"]
 LOG  info connection:onlineStatusChanged() - Status changing to online. isHealthy: true ["connection"]
 LOG  info client: post - Request - https://chat.stream-io-api.com/channels/messaging/query ["api", "api_request", "client"]
 LOG  info client:get - Response - url: https://chat.stream-io-api.com/app > status 200 ["api", "api_response", "client"]
 LOG  info connection:onmessage() - onmessage callback ["connection"]
 LOG  info client:_handleClientEvent - Received event of type { notification.added_to_channel } ["event", "client"]
 LOG  info client: post - Request - https://chat.stream-io-api.com/channels/messaging/!members-redacted/query ["api", "api_request", "client"]
 LOG  info connection:onmessage() - onmessage callback ["connection"]
 LOG  info client:_handleClientEvent - Received event of type { user.watching.start } ["event", "client"]
 LOG  info channel:_handleChannelEvent - Received event of type { user.watching.start } on messaging:!members-redacted ["event", "channel"]
 LOG  info client:post - Response - url: https://chat.stream-io-api.com/channels/messaging/query > status 201 ["api", "api_response", "client"]
 LOG  info channel:watch() - started watching channel messaging:!members-redacted ["channel"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info client:post - Response - url: https://chat.stream-io-api.com/channels/messaging/!members-redacted/query > status 201 ["api", "api_response", "client"]
 LOG  info channel:watch() - started watching channel messaging:!members-redacted ["channel"]
 LOG  info Attaching listener for message.new event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for message.updated event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for message.deleted event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for message.read event on channel messaging:!members-redacted ["event", "channel"]
 LOG  render: conversation - content
 LOG  conversation - index useEffect: create done
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info Removing listener for connection.recovered event ["event", "client"]
 LOG  info Removing listener for connection.changed event ["event", "client"]
 LOG  info Removing listener for channel.deleted event ["event", "client"]
 LOG  info Removing listener for all event from channel messaging:!members-redacted ["event", "channel"]
 LOG  info Attaching listener for connection.recovered event ["event", "client"]
 LOG  info Attaching listener for connection.changed event ["event", "client"]
 LOG  info Attaching listener for channel.deleted event ["event", "client"]
 LOG  info Attaching listener for all event on channel messaging:!members-redacted ["event", "channel"]
 LOG  info connection:onmessage() - onmessage callback ["connection"]
 LOG  info client:_handleClientEvent - Received event of type { health.check } ["event", "client"]
 LOG  info connection:onmessage() - onmessage callback ["connection"]
 LOG  info client:_handleClientEvent - Received event of type { health.check } ["event", "client"]

UPDATE: I added the tags returned by the logger and added logs about react's stuff

[rantingmong]

Wow beautiful almost a month and not one dev has replied. And our client's going to pay $400/month for this 🤦🏻‍♂️

[ferhatelmas]

@rantingmong Sorry for the inconvenience of the missed question here.

This isn't a bug or a feature request regarding SDK but js event listener question. In general, for similar cases, you can get a faster reply in Stackoverflow. While we're here, let me clarify though.

Watch call is a server state update and as soon as it's called, server starts sending updates. However, if you don't register a callback by that time, listeners in the client code is empty so nothing is executed upon receiving an event. That's why you need to register a callback first then call watch to notify server you're ready to listen. Is it clearer now?

[rantingmong]

Tried doing that before and after watch. Same thing happens.

Also, I do take effort (three whole working days, in fact) in doing all machinations and permutations of the API you guys provided and documented before I post it an issue to make sure ITS NOT AN ISSUE FROM MY SIDE.

If you want, I can setup a meet with you guys so you can see it in action.

[vanGalilea]

Hi @rantingmong thanks for reaching out.

The following script I wrote works fine (please replace the api_key, secret, user_id and user_token with your credentials)

const StreamChat = require('stream-chat').StreamChat;

const serverClient = new StreamChat('api_key', 'secret');

const generateGuid = ()=> {
  var result, i, j;
  result = '';
  for(j=0; j<32; j++) {
    if( j == 8 || j == 12 || j == 16 || j == 20)
      result = result + '-';
    i = Math.floor(Math.random()*16).toString(16).toUpperCase();
    result = result + i;
  }
  return result;
}


const run = async () => {
  const userClient = new StreamChat('api_key');
  await userClient.connectUser({id: 'current_user_id'}, 'user_token');
  const newUserId = generateGuid();

  // create a new user, that new channel will be created with this new user and current user of chat as members
  await serverClient.upsertUser({
    id: newUserId
  });

  const newChannel = userClient.channel('messaging', {
    members: [
      'current_user_id',
      newUserId
    ]
  });

  newChannel.on('all', (event) => {
    console.log('received an event', event)
  });

  await newChannel.watch();

  await newChannel.sendMessage({
    text: 'Hello'
  });

  console.log('message sent')
};

run()

• Are you doing something different?
• What do you mean by "But when an entry's made, it emits fine." ?

[rantingmong]

This is an excerpt of our code in handling channel conversation:

  useEffect(() => {
    let channel: Channel<DefaultStreamChatGenerics> | null;
    let unsubEvent: () => void = () => {};

    switch (from.type) {
      case "new":
        channel = StreamClient.channel("messaging", {
          members: uniq(concat(from.value, profile.uid)),
          name: from.name,
        });
        break;
      case "exsiting":
        channel = from.value;
        break;
    }

    const flow = async (theChannel: Channel<DefaultStreamChatGenerics>) => {
      const channelDetails = await theChannel.watch();

      unsubEvent = theChannel.on("all", handleEvent).unsubscribe;

      // other member detail stuff

      Store.setState({
        channel, 
        // other store setting stuff
      });
    };

    console.log("create");

    flow(channel)
      .then()
      .catch(error => console.error(error));

    return () => {
      unsubEvent();
      channel?.stopWatching();

      Store.getState().reset();
    };
  }, []);

Where:

• handleEvent is just a function that console.logs stuff for now.
• from is an object that allows us to know whether to create a new conversation or use the existing channel object created.
• The client is initialized and a user is connected.

Our intention is to get events where the user has sent a message in the conversation to hide a UI. When a conversation is existing, this works. But when a conversation is new (passes through the case "new": line) it does not work.

Also this line unsubEvent = theChannel.on("all", handleEvent).unsubscribe; even if I put before channel.watch() has the same result. It does not emit any events.

[santhoshvai]

Hello @rantingmong thanks for giving us your code excerpt.

In our tests, we found that events do work for a new channel. We suspect then that it should somehow be your own implementation. Just to be sure, could you please check the dependencies array in the useEffect? Could it be set to [from, handleEvent] and checked again?

[vanGalilea]

@rantingmong we haven't heard from you in a while. I'll be closing this issue for now. Please don't hesitate to contact us in the future if this issue or any questions arise.