advanced-chat / vue-advanced-chat

A beautiful chat rooms web component compatible with all Javascript frameworks
https://advanced-chat.github.io/vue-advanced-chat/
MIT License
1.73k stars 466 forks source link

Question about fetch-messages event #313

Closed wzl778633 closed 2 years ago

wzl778633 commented 2 years ago

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 commented 2 years ago
oxavibes commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

wzl778633 commented 2 years ago

@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: image This screenshot shows the loading when I moved to the top: image

antoine92190 commented 2 years ago

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

wzl778633 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

antoine92190 commented 2 years ago

@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 commented 2 years ago

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

wzl778633 commented 2 years ago

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

crystal96 commented 2 years ago

@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?

image

Morrowi commented 2 years ago

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 commented 2 years ago

Please use version 2.0.3, previous versions are not supported anymore. This issue is probably fixed by https://github.com/antoine92190/vue-advanced-chat/issues/354

Morrowi commented 2 years ago

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/], } } },

}

image
antoine92190 commented 2 years ago

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

Morrowi commented 2 years ago

@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 commented 2 years ago

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

antoine92190 commented 2 years ago

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

Morrowi commented 2 years ago

@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 commented 2 years ago

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

Morrowi commented 2 years ago

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

antoine92190 commented 2 years ago

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

Morrowi commented 2 years ago

chrom and safari node v16.13.2

antoine92190 commented 2 years ago

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

Screenshot 2022-09-22 at 13 22 20
Morrowi commented 2 years ago

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

antoine92190 commented 2 years ago

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 commented 2 years ago

Thank you! For a long time! That helped!

antoine92190 commented 2 years ago

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

antoine92190 commented 2 years ago

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

MaxZhurin commented 1 year ago

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",