Question about fetch-messages event

[wzl778633]

Firstly, really nice work for chat plugins, a big appreciate for this project.
But I’m a little bit lost with the documentation. Right now I want to figure out the core event fetch-messages, here is my code for the callback function:

getThisRoomMessage({room, options} = data){
      //this is the var for messages-loaded prop
      this.message_fullyLoad_flag = false;
      this.rightNowRoomId = room.roomId;
    
      setTimeout(() => {
        let tmp = [ {
          _id: Math.random()*1000,
          indexId: Math.random()*1000,
          content: '<usertag>1234</usertag> test test test test test test ',
          senderId: 4321,
          username: 'qwe',
         ........
          usersTag:[
            {
              _id: 1234,
              username: 'John Doe',
              avatar: 'assets/imgs/doe.png',
              status: {
                state: 'online',
                lastChanged: 'today, 14:30'
              }
            },
          ]
        },
        ..... * 10 random messages,];
        tmp = tmp.concat(this.messages);
        this.messages = tmp;
        this.message_fullyLoad_flag = false;
      },3000)
    },

What I want to do is to make an infinite message loading loop to imitate loading with backend data. Each time I scroll up will load 10 more random messages. But right now it will only load once (when the room is opened) and then it will show the loading icon forever and never trigger this event again no matter how I scroll up, did I missing something? I cannot find some useful information about this part So I want to know why and how to solve this.
Also, the user tag that I set (format I showed above) for random messages will always shows “@unknown” in the chat room. I didn’t find any documentation about user tags logic. Could you explain more about how this part works?
I will really appreciate your help!

[antoine92190]

• You need to have enough messages when the room is opened so the infinite loader is not visible (hidden by the scroll). You can try to load 20 or 30 messages initially and it may fix your issue.
• For the usertag to work you need to set the content message as you did: content: '<usertag>1234</usertag> test test test test test test', but you also need to have the matching user in the rooms.users prop: https://github.com/antoine92190/vue-advanced-chat#rooms-prop

[oxavibes]

@antoine92190

• You need to have enough messages when the room is opened so the infinite loader is not visible (hidden by the scroll). You can try to load 20 or 30 messages initially and it may fix your issue.
• For the usertag to work you need to set the content message as you did: content: '<usertag>1234</usertag> test test test test test test', but you also need to have the matching user in the rooms.users prop: https://github.com/antoine92190/vue-advanced-chat#rooms-prop

Hi @antoine92190 , the thing is we need to stop the loader after messages has been loaded but if we set messagesLoaded to true the scroll will not work right? What are we missing?

[antoine92190]

The loader should automatically disappear as soon as at least one message is added. You don't need to do anything to manage the central loader.
messagesLoaded should be used when there is no more messages to load, or if there are 0 messages to load initially.

[oxavibes]

The loader should automatically disappear as soon as at least one message is added. You don't need to do anything to manage the central loader. messagesLoaded should be used when there is no more messages to load, or if there are 0 messages to load initially.

Understood, i'll check my logic then. Thank you for you quick response!

[antoine92190]

Please let me know if you solved it so we can close this issue.

[wzl778633]

@antoine92190 Thanks for your help! But I cannot solve problem 1 with your solution. I already load 30+ messages initially, But the infinite message loading loop still not working: in my scenario, when my site route to the chatroom page, the chat page will automatically scorll up a little bit. When I scroll to the top of this room, it will show the loading icon but never load new messages again. It will only load once (when I first open this room). I never set messagesLoaded to true but seems the fetch-messages (getThisRoomMessage) never get called again.
And also for 2nd question, I just copy the rooms.users prop from the example, so it should have a user which id called '1234':
{ _id: 1234, username: 'John Doe', avatar: 'assets/imgs/doe.png', status: { state: 'online', lastChanged: 'today, 14:30' } },
But I still get unknown for user tag.

This screenshot shows my first loading, the scrollbar automatically scroll up a little bit:

This screenshot shows the loading when I moved to the top:

[antoine92190]

Strange, would it be possible to have access to your project so I can reproduce and fix the issue?

[wzl778633]

Strange, would it be possible to have access to your project so I can reproduce and fix the issue?

I will try to make a demo to see if I can let you access it! Thanks!

[wzl778633]

@antoine92190 After I tired, is hard to make a demo for my scenario isolated with my project. :( But I can share my screen or something like that to let you remotely control or testing (via zoom or something like that), is that ok for you?

[oxavibes]

@antoine92190 Fetch messages is called twice when i click on a chatroom is that a normal behaviour?

[antoine92190]

@oxavibes I guess the first one if when you load the room, and the second one is automatically triggered to load more messages. You can check if the first one has options.reset = true and the second one doesn't. If you don't want the second one to happen because you know there is no more messages to load, you can just set messagesLoaded to true.

[antoine92190]

@wzl778633 Can you first send me a video from the moment you load the app until the bug appears?

[wzl778633]

@antoine92190 https://youtu.be/rCwExOOO7xE Here is the video for the bugs description :)

[crystal96]

@antoine92190 Fetch messages is called twice when i click on a chatroom. And both times options.reset = true. How can I just trigger it once?

[Morrowi]

Hello! Thanks for your work. This is a super project!
I have a problem, the event is not called when scrolling messages up, there are no additional @fetch-messages calls, so I can’t load more messages, maybe I’m doing something wrong ?
I use the link where you can see the code I attach https://github.com/Morrowi/kabinet_kdm/blob/2a6bc559967c184f7b128a2ca9d908d7b0854797/src/components/BoardUser.vue#L558

I use socket to receive already formatted messages from the server and add them to the :messages="messages" property.

[antoine92190]

Please use version 2.0.3, previous versions are not supported anymore.
This issue is probably fixed by #354

[Morrowi]

Thanks for the answer. But I have a new problem, when registering a component in the browser (in the console), an error occurs on register (); https://github.com/Morrowi/kabinet_kdm/blob/dev/src/components/BoardUser.vue#L280
in vue.config.js registered
module.exports = {
chainWebpack:config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => ({
...options,
compilerOptions: {
// treat any tag that starts with ion- as custom elements
isCustomElement: tagName => tagName === 'vue-advanced-chat'
}
}))
},
outputDir:'home/public/',
configureWebpack: {
devServer: {
headers: { "Access-Control-Allow-Origin": "*" },
watchOptions: {
ignored: [/public/],
}
}
},

}

[antoine92190]

@Morrowi Please read the README file, you are not using the component correctly: https://github.com/antoine92190/vue-advanced-chat#usage

[Morrowi]

@MorrowiПожалуйста, прочтите файл README, который содержит стандартный компонент: https://github.com/antoine92190/vue-advanced-chat#usage.

Thank you for your time.
I also tried calling the component as described in the README, I'm attaching the link.
But I have the same error, it swears at register(); Object(...) is not a function.
Please tell me what can I do wrong

https://github.com/Morrowi/kabinet_kdm/blob/dev/src/components/BoardUser.vue#L240

[antoine92190]

The next branch is not maintained anymore. Please install the version from npm: npm install vue-advanced-chat

[antoine92190]

Actually, I see you updated the version in the dev branch. I made it work on you branch, you need to:

• Change the dependency to "vue-advanced-chat": "2.0.3",
• Remove the below code from your codebase, and update the old chat implementation in your Chat.vue file:

import 'vue-advanced-chat/dist/vue-advanced-chat.css'

[Morrowi]

@antoine92190 Thanks for helping me. I did everything as you wrote, but the result is the same.
he swears at register(); https://github.com/Morrowi/kabinet_kdm/blob/dev/src/components/BoardUser.vue#L278

I'm already starting to go crazy
Perhaps I'm registering the component incorrectly? Although I do as described in the documentation https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue

[antoine92190]

Did you delete node_modules and package-lock.json and run npm install again?

[Morrowi]

@antoine92190 Yes, I did it all. But the error is still the same

[antoine92190]

Strange, I cloned your project and it works on my side. Which browser are you using? And which node version?

[Morrowi]

chrom and safari
node v16.13.2

[antoine92190]

You forgot to stringify some props. Please double check your code.

[Morrowi]

I specified the details, but the problem remained. All changes to git

[antoine92190]

Try to delete the whole project locally, and clone it again. If it works on my side it should work on your side.
If it doesn't work, please open a new discussion, as it is not related to the original issue.

[Morrowi]

Thank you! For a long time! That helped!

[antoine92190]

@crystal96 @wzl778633 @oxavibes Can any of you reproduce the issue with latest chat version 2.0.3?

[antoine92190]

Closing this due to inactivity. Please reopen if the issue still exists.

[MaxZhurin]

Good afternoon
I can not understand. @fetch-messages="fetchMessages($event.detail[0])" is only called once when the chat is opened. when I scroll to the top nothing happens and @fetch-messages is not called a second time.

chat single room and messages a lot

what could it be?

windows 11, last chrome

"vue-advanced-chat": "^2.0.7",