Real-Time Reactions, Message Edits, and Deletions Not Displaying Properly

When sending a new message, real-time features such as reactions, message edits, and deletions are not functioning as expected. These updates are not being displayed promptly or at all.

When i have creating channels the some time the channels taking long time to display in the channel list.

Hello, to assist you better, could you please share the versions of your SDK and UIKit, along with the relevant code? Thank you.

TS SDK version: 6.29.0
For the reaction code:-

const isMessageReactionRemoved = await ReactionRepository.removeReaction(
      'message',
      messageId,
      emoji,
    );

For the Delete code:-

const message = await MessageRepository.softDeleteMessage(this.msg.messageId);

For the Edit code:-

const updatedMessage = {
          data: {
            text: inputValue
          },
        };
        const { data: message } = await MessageRepository.updateMessage(this.msgUpdate.messageId, updatedMessage);

I have implement this code in angular 17 version.

Hello @girishspark, have you tried implementing the live collection from the TypeScript guide? Here’s the link: Live Objects/Collections.

Live Object and Live Collection helps in syncing data so you will always get the most recent one. New data gets automatically collected everytime when there is an update and user need not refresh to get the recent data

I reviewed the information, but it only covers posts, topics, and the subscribe function—there’s nothing related to message reactions, edits, or deletions.

How can I implement real-time updates for my messages and channels? I’m only working on chat with channels.

Hello @girishspark , Have you tried using the following function for real-time updates in your messages and channels?

const subscribeSubChannel = (subChannel: Amity.SubChannel) =>
  disposers.push(
    subscribeTopic(getSubChannelTopic(subChannel), (error) => {
      // handle error or updates here
    })
  );

subscribeSubChannel(subChannelData as Amity.SubChannel);

This should help in implementing real-time updates. Let me know if this addresses your needs or if you require further assistance.

I tried implementing the code for real-time message updates (editing, deleting, and reactions) within messages and channels, but it’s not working as expected. Could you please check the code to help me resolve this issue?

 getMessages(){
    const unsubscribe = MessageRepository.getMessages({
      subChannelId: this.channelId,
      limit: 100,
    }, ({ data: messages, onNextPage, hasNextPage, loading, error }) => {
      if (error) {
        // Handle any errors that occur during retrieving data
      }
      if (loading) {
        // Handle the loading state, e.g., show a loading spinner
      }
      if (messages) {
        this.getMessagesSort(messages)
        this.subscribeChannels(messages);
        this.nextPageFn = onNextPage
        this.hasMore = hasNextPage
        if (this.onFirst) {
          this.scrollToBottom();
          this.onFirst = false
        }
      }
    });
    this.disposers.push(unsubscribe);
  }
  private subscribeChannels(messages: Amity.Message[]) {
    messages.forEach(c => {
      if (!this.subscribedChannels.includes(c.messageId) && !c.isDeleted) {
        this.subscribedChannels.push(c.messageId);
        this.disposers.push(subscribeTopic(getChannelTopic(c)));
      }
    });
  }

async getChannels() {
    let param: any = {
      membership: 'member',
      limit: 100,
      types: ['conversation']
    }

    const unsubscribe = await ChannelRepository.getChannels(
      { ...param },
      ({ data: channels, onNextPage, hasNextPage, loading, error }) => {
        if (channels) {
          this.getFilter(channels, this.searchQuery)
        }
        this.subscribeChannels(channels);
        this.hasMore = hasNextPage;
        this.nextPageFn = onNextPage;
      },
    );
    this.disposers.push(unsubscribe);
  }
  private subscribeChannels(channels: Amity.Channel[]) {
    channels.forEach(c => {
      if (!this.subscribedChannels.includes(c.channelId) && !c.isDeleted) {
        this.subscribedChannels.push(c.channelId);
        this.disposers.push(subscribeTopic(getChannelTopic(c)));
      }
    });
  }
1 Like

@girishspark Hi, Your code is wrong for this part this.subscribeChannels(messages). The purpose of this function is to use in channel list page not in the chat room page and it need to be const subscribeChannels = (channels: Amity.Channel[]) not subscribeChannels(messages: Amity.Message[]).

I have one question. Were you able to receive messages in real-time when the user sent messages in the channel?

I mistakenly used the same function name, subscribeChannels, for both messages and channels. However, to subscribe to real-time updates, I used the correct Amity function, subscribeTopic, for both messages and channels. The duplicate function name was just a local oversight.

Yes, I receive messages in real time in the channel, but when I edit, delete, or react to a message, the updates are not reflecting.

Hello @girishspark , Upon further investigation, we identified the issue you reported, and it has been resolved in the latest version. We recommend updating to TS SDK version 6.29.2 and checking if the problem persists.

Please let us know if you encounter any further issues or need additional assistance.

I updated the SDK version, and now the real-time edit and delete functions are working fine. However, the real-time reactions have become worse. When I add a reaction to a message, the message gets removed, and the reaction is applied to the previous message from the user.

Hello @girishspark , We couldn’t reproduce the issue on our side. To assist you further, could you please provide the following:

  1. The code related to the issue.
  2. A screen recording showing the problem.
  3. Detailed steps to reproduce the issue.

This information will help us investigate further. Thank you!

Please check the video link where I have reproduced the issue:(Countable (Staging) - 26 August 2024 | Loom).

I sent a message, and another user also sent a message. When I reacted to that message, the previous message was removed from the message list.

Hello @girishspark , Thank you for providing additional info, we have passed it to our team to check this further.

1 Like

Hello @girishspark , We tried to replicate the issue on our end but couldn’t reproduce it. To help us investigate further, could you please provide the SDK logs? This will give us more insight into what’s happening and allow us to assist you more effectively.

Thank you for your cooperation.

There is to many logs in every behaviours so can you please suggest which specific logs you want to verify.

I have got another issue as well when i have removeing the rection the reaction api showing 404 error.

const isMessageReactionRemoved = await ReactionRepository.removeReaction(
      'message',
      id,
      emoji,
    );
{
    "referenceId": "66cd82f47643d961d7916608",
    "referenceType": "message",
    "reactionName": "đź‘Ť",
    "referenceVersion": 5
}

Hello @girishspark , We would need the logs from getMessages() right after adding or removing a reaction. These logs are essential to help us better understand and resolve the issue you’re encountering. Thank you for your cooperation.