tuandm / laravue

Admin dashboard for enterprise Laravel applications built by VueJS and Element UI https://laravue.dev
https://laravue.dev
MIT License
2.21k stars 654 forks source link

Real time update on all users browser #288

Closed MarcosGit closed 3 years ago

MarcosGit commented 3 years ago

I want help to real time update all user browser when one user change some products information to reflect automatic to another user browsers without manual refresh

In advance thank you.

MarcosGit commented 3 years ago

I don't know if i did it the best way but i solved this problem with this code:

async getList() {

        const {
            limit,
            page
        } = this.query;
        this.loading = true;
        const {
            data,
            meta
        } = await serviceResource.list(this.query);
        this.list = data;
        //console.log(this.list);
        this.list.forEach((element, index) => {
            element['index'] = (page - 1) * limit + index + 1;
        });
        this.total = meta.total;
        this.loading = false;

    },

    async refreshPage(){
      const {
        limit,
        page
      } = this.query;

      const {
        data,
        meta
      } = await serviceResource.list(this.query);
      this.compare = data;
      //console.log(this.list);
      this.compare.forEach((element, index) => {
        element['index'] = (page - 1) * limit + index + 1;
      });
      this.total = meta.total;

      if(!this.arrayCompare(this.list, this.compare)){
        window.location.reload();
      }else{
        setTimeout(this.refreshPage, 10000);
      }

    },

  arrayCompare(array_1, array_2){

      let value_1 = JSON.stringify(array_1);
      let value_2 = JSON.stringify(array_2);

      if (value_1 === value_2){
        return true;
      }

      return false;
  },

Sorry for my english, if i did something wrong please tell me the right way to do that.

MarcosGit commented 3 years ago

I find the best way to solve de real time update with Laravel Echo and Websockets.