Realtime fetching data

What exactly doesn't work with your ajax calls?

Also, WebSockets are a great solution for realtime data on a dashboard. Laravel offers this out of the box using broadcasting: https://laravel.com/docs/7.x/broadcasting#introduction

Thank you

that's my controller

class DashboardController extends Controller { public function index() {

    $id = Auth::id();
   
    $terminee = Courses::all()
    ->where('etat','Terminée')
    ->where('idclient',$id)
    ->count();

    $encours = Courses::all()
    ->where('etat','En cours','Non Récupéré')
    
    ->where('idclient',$id)
    ->count();

    $annulee = Courses::all()
    ->where('etat','Annulée')
    ->where('idclient',$id)
    ->count();
    
    return view ('client.home')->with('terminee',$terminee)
    ->with('encours',$encours)->
    with('annulee',$annulee);
        }  

and that's my ajax call :

{ $(document).ready(function() { setInterval(function () { $('#show').load('/../../app\Http\Controllers\Client\DashboardController.php') }, 3000); }); }

Bobby is right on. Need to use Websockets as polling a server is never good. Using websockets will observe data on the server ad then notify your server client that something has changed. Traditional client server approach would be highly inefficient with 99% of HTTP traffic pointless. Look at Pusher as they have great JS and Laravel integration, API’s and tutorials.

That said, if you have no choice then you can use something like this that I use for polling an endpoint for a response, but I use this for a short period or if the response window is variable.

// ./utils/client-fetch.js
export default async function fetchData(endpoint) {
  const {data} = await fetch(endpoint);
  return data;
}

// ./utils/api.js
import Vue from "vue";
// A simple wrapper around the native
// `fetch()` function.
import fetchData from "./client-fetch";

const ENDPOINTS = {
  get dashboard() {
    return `https://api/v1/dashboard`
  }
};

async function withPolling(callback, interval) {
  const data = await callback();
  // If no polling interval is given we return object
  if (!interval) return { data };
  // Otherwise, we create a new `Vue.observable` or Observable in JS and begin polling
  const observableData = Vue.observable({ data });
  const poll = () => {
    setTimeout(async () => {
      observableData.data = { ...(await callback()) };
      poll();
    }, interval);
  };
  poll();

  return observableData;
}

export default function api({ endpoint, interval }) {
  return withPolling(() => fetchData(ENDPOINTS[endpoint]), interval);
}

// ./services/dashboard.js
import api from "../utils/api";

export default {
  dashboard: () => api({ endpoint: "dashboard", interval: 2000 })
};


// ./App.vue component
<template>
</template>

<script>
import dashboardService from "./services/dashboard";

export default {
  name: "App",
  data() {
    return {
      dashboardResponse: { data: {} }
    };
  },
  async created() {
    this.dashboardResponse = await dashboardService.dashboard();
  }
};
</script>

Thanks guys for ur replys