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.

import { usePoll } from '@inertiajs/vue3'

usePoll(2000)

import { usePoll } from '@inertiajs/react'

usePoll(2000)

import { usePoll } from '@inertiajs/svelte'

usePoll(2000)

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.

import { usePoll } from '@inertiajs/vue3'

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

import { usePoll } from '@inertiajs/react'

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

import { usePoll } from '@inertiajs/svelte'

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

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.

<script setup>
import { usePoll } from '@inertiajs/vue3'

const props = defineProps({ counter: Number })

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

import { usePoll } from '@inertiajs/react'

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

import { usePoll } from '@inertiajs/svelte'

let { counter } = $props()

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

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.

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

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>
    )
}

import { usePoll } from '@inertiajs/svelte'

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

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.

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

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>
}

<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}

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.

import { usePoll } from '@inertiajs/vue3'

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

import { usePoll } from '@inertiajs/react'

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

import { usePoll } from '@inertiajs/svelte'

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

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.

import { usePoll } from '@inertiajs/vue3'

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

import { usePoll } from '@inertiajs/react'

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

import { usePoll } from '@inertiajs/svelte'

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

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. 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.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Poll helper

Chế độ concurrency

Throttling

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

​Poll helper

​Chế độ concurrency

​Throttling

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

Poll helper

Chế độ concurrency

Throttling

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