Nuxt•4mo ago

What's the best way to send heartbeat request from client to server

I started learning nuxt and trying something. I am trying to send an analytics like heartbeat request to the server side. So I think I can just attach a global interval and send a request to server each X seconds. I just don't know what's the best way to do it in nuxt. I might be thinking completely wrong, don't hesitate to guide me to the correct way. What I think so far: - Maybe I can just start an interval in the main layout so i'll have a single interval to send requests when user first time opens the website and it won't be replicated with page changes. - I can somehow use middlewares but as far as I understand middlewares are to intercept not to add something global.

5 Replies

kapa.ai•4mo ago

Hi @zigglearner1235. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The best way to send a heartbeat (analytics) request from the client to the server in a Nuxt application is to set up a single interval on the client side that triggers your request at the desired frequency. Your idea of starting the interval in the main layout is correct—this ensures the interval is created once when the app loads and is not duplicated on page navigation. How to implement: 1. Client-only Plugin or Main Layout:
Place your interval logic in a client-only plugin (e.g., plugins/heartbeat.client.ts) or inside the onMounted hook of your main layout. This ensures the code only runs in the browser and not during SSR. 2. Sending the Request:
Use $fetch or useFetch to send your heartbeat request to a server API route you define in server/api/heartbeat.ts. Example using a client plugin:

// plugins/heartbeat.client.ts
export default defineNuxtPlugin(() => {
  let interval: ReturnType<typeof setInterval> | null = null

  onMounted(() => {
    interval = setInterval(() => {
      $fetch('/api/heartbeat', { method: 'POST' })
    }, 60_000) // every 60 seconds
  })

  onBeforeUnmount(() => {
    if (interval) clearInterval(interval)
  })
})

// plugins/heartbeat.client.ts
export default defineNuxtPlugin(() => {
  let interval: ReturnType<typeof setInterval> | null = null

  onMounted(() => {
    interval = setInterval(() => {
      $fetch('/api/heartbeat', { method: 'POST' })
    }, 60_000) // every 60 seconds
  })

  onBeforeUnmount(() => {
    if (interval) clearInterval(interval)
  })
})

Key points: - Do not use middleware for this purpose; middleware in Nuxt is for intercepting and handling requests, not for running global client-side logic Docs > Guide > Concepts > Nuxt Lifecycle. - Using a composable or plugin ensures the interval is only set up once and is cleaned up properly. - Make sure your heartbeat logic only runs on the client by using a .client.ts plugin or checking import.meta.client. This approach is similar to how you would set up a global timer for other client-side tasks, as seen in solutions for updating a global time variable Stack Overflow: Nuxt3 global time variable for front-end. If you need to store or process the heartbeat on the server, create an API route in server/api/heartbeat.ts to handle the incoming requests Docs > Guide > Directory-structure > server. Let me know if you need a more detailed code example! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

zigglearner1235OP•4mo ago

It would be nice to hear if anyone confirms what AI suggests 😄

Zeeeth•4mo ago

Can confirm, do it as a client plugin

zigglearner1235OP•4mo ago

Thanks a lot @Zeeeth

Gaming

Programming

What's the best way to send heartbeat request from client to server

Did you find this page helpful?