> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Polling

## Poll helper

Polling server để lấy thông tin mới cho page hiện tại là nhu cầu phổ biến, vì vậy Inertia cung cấp helper để giảm boilerplate. Helper tự động dừng polling khi page unmount.

Đối số bắt buộc duy nhất là khoảng thời gian polling tính bằng mili giây.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { usePoll } from '@inertiajs/vue3'

  usePoll(2000)
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  usePoll(2000)
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  usePoll(2000)
  ```
</CodeGroup>

Nếu cần truyền thêm request option cho poll helper, bạn có thể truyền bất kỳ option nào của `router.reload` làm tham số thứ hai.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { usePoll } from '@inertiajs/vue3'

  usePoll(2000, {
      onStart() {
          console.log('Polling request started')
      },
      onFinish() {
          console.log('Polling request finished')
      },
  })
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  usePoll(2000, {
      onStart() {
          console.log('Polling request started')
      },
      onFinish() {
          console.log('Polling request finished')
      },
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  usePoll(2000, {
      onStart() {
          console.log('Polling request started')
      },
      onFinish() {
          console.log('Polling request finished')
      },
  })
  ```
</CodeGroup>

Bạn cũng có thể truyền function trả về request options. Function được evaluate ở mỗi tick, cho phép poll phản ánh component state mới nhất.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { usePoll } from '@inertiajs/vue3'

  const props = defineProps({ counter: Number })

  usePoll(2000, () => ({
      data: { counter_seen: props.counter },
      only: ['last_received'],
  }))
  </script>
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  export default ({ counter }) => {
      usePoll(2000, () => ({
          data: { counter_seen: counter },
          only: ['last_received'],
      }))
  }
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  let { counter } = $props()

  usePoll(2000, () => ({
      data: { counter_seen: counter },
      only: ['last_received'],
  }))
  ```
</CodeGroup>

Nếu muốn kiểm soát hành vi polling chi tiết hơn, poll helper cung cấp các method `stop` và `start` để bạn chủ động bắt đầu hoặc dừng. Có thể truyền option `autoStart: false` để ngăn helper tự bắt đầu polling khi component mount.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { usePoll } from '@inertiajs/vue3'

  const { start, stop } = usePoll(2000, {}, {
      autoStart: false,
  })
  </script>

  <template>
      <button @click="start">Start polling</button>
      <button @click="stop">Stop polling</button>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  export default () => {
      const { start, stop } = usePoll(2000, {}, {
          autoStart: false,
      })

      return (
          <div>
              <button onClick={start}>Start polling</button>
              <button onClick={stop}>Stop polling</button>
          </div>
      )
  }
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  const { start, stop } = usePoll(2000, {}, {
      autoStart: false,
  })
  ```
</CodeGroup>

Poll helper cũng trả reactive value `polling` cho biết poll có đang chạy hay không, phù hợp để render nút pause/resume. Giá trị này không cho biết có request đang chạy hay không.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { usePoll } from '@inertiajs/vue3'

  const { start, stop, polling } = usePoll(2000)
  </script>

  <template>
      <button v-if="polling" @click="stop">Pause updates</button>
      <button v-else @click="start">Resume updates</button>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  export default () => {
      const { start, stop, polling } = usePoll(2000)

      return polling
          ? <button onClick={stop}>Pause updates</button>
          : <button onClick={start}>Resume updates</button>
  }
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
  import { usePoll } from '@inertiajs/svelte'

  const poll = usePoll(2000)
  </script>

  {#if poll.polling}
      <button onclick={poll.stop}>Pause updates</button>
  {:else}
      <button onclick={poll.start}>Resume updates</button>
  {/if}
  ```
</CodeGroup>

## Chế độ concurrency

Mặc định, poll helper gửi request mới ở mỗi tick kể cả khi request trước vẫn đang chạy. Bạn có thể kiểm soát bằng tùy chọn `mode`, nhận một trong ba giá trị: `overlap`, `cancel` hoặc `rest`.

Mode `overlap` mặc định cho phép request chạy song song. Mode `cancel` hủy request đang chạy khi tick tiếp theo xảy ra. Mode `rest` xem interval là khoảng thời gian giữa lúc request trước kết thúc và request sau bắt đầu, vì vậy request không bao giờ overlap.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { usePoll } from '@inertiajs/vue3'

  usePoll(2000, {}, {
      mode: 'rest',
  })
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  usePoll(2000, {}, {
      mode: 'rest',
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  usePoll(2000, {}, {
      mode: 'rest',
  })
  ```
</CodeGroup>

## Throttling

Mặc định, poll helper sẽ giảm 90% tần suất request khi tab trình duyệt ở background. Nếu muốn tắt hành vi này, truyền option `keepAlive`.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { usePoll } from '@inertiajs/vue3'

  usePoll(2000, {}, {
      keepAlive: true,
  })
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  usePoll(2000, {}, {
      keepAlive: true,
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  usePoll(2000, {}, {
      keepAlive: true,
  })
  ```
</CodeGroup>

***

## Tài liệu chính thức

Bài dịch này được đối chiếu từ [tài liệu Inertia.js v3 chính thức](https://inertiajs.com/docs/v3/data-props/polling). Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.