Nuxt•4w ago

Get SSE data from nuxt

I've written this code to retrieve SSE data, but it doesn't work properly.

// autre
const output = ref<String>("");

onMounted(() => {
    const event = new EventSource(api_url+"projects/"+project_id+"/console?token="+useCookie("X-auth").value)

    event.addEventListener("message", (e) => {
        console.log(e);
        output.value += e.data;
    });
});

// autre
const output = ref<String>("");

onMounted(() => {
    const event = new EventSource(api_url+"projects/"+project_id+"/console?token="+useCookie("X-auth").value)

    event.addEventListener("message", (e) => {
        console.log(e);
        output.value += e.data;
    });
});

2 Replies

kapa.ai•4w ago

Hi @TheDreWen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To retrieve SSE (Server-Sent Events) data in Nuxt, you're on the right track, but there are a few improvements we can make to ensure it works properly. Let's modify your code based on the information from our knowledge sources:

const output = ref("");

onMounted(() => {
  const eventSource = new EventSource(`${api_url}projects/${project_id}/console?token=${useCookie('X-auth').value}`);

  eventSource.onmessage = (event) => {
    console.log(event.data);
    output.value += event.data;
  };

  // Don't forget to close the connection when the component is unmounted
  onUnmounted(() => {
    eventSource.close();
  });
});

const output = ref("");

onMounted(() => {
  const eventSource = new EventSource(`${api_url}projects/${project_id}/console?token=${useCookie('X-auth').value}`);

  eventSource.onmessage = (event) => {
    console.log(event.data);
    output.value += event.data;
  };

  // Don't forget to close the connection when the component is unmounted
  onUnmounted(() => {
    eventSource.close();
  });
});

Here are the key changes and explanations: 1. We're using eventSource.onmessage instead of addEventListener("message", ...). This is a more direct way to handle SSE messages Nuxt Docs: Data Fetching (https://nuxt.com/docs/getting-started/data-fetching#recipes). 2. We're logging event.data instead of the entire event object. This gives you the actual message content. 3. I've added an onUnmounted hook to close the EventSource connection when the component is unmounted. This is important for cleaning up resources. 4. Make sure your server is properly set up to send SSE. If you're using Nitro (Nuxt's server engine), you can set up an SSE endpoint like this Nitro Docs: WebSocket (https://nitro.unjs.io/guide/websocket#server-sent-events-sse):

export default defineEventHandler(async (event) => {
  const eventStream = createEventStream(event);

  const interval = setInterval(async () => {
    await eventStream.push(`Message @ ${new Date().toLocaleTimeString()}`);
  }, 1000);

  eventStream.onClosed(async () => {
    clearInterval(interval);
    await eventStream.close();
  });

  return eventStream.send();
});

export default defineEventHandler(async (event) => {
  const eventStream = createEventStream(event);

  const interval = setInterval(async () => {
    await eventStream.push(`Message @ ${new Date().toLocaleTimeString()}`);
  }, 1000);

  eventStream.onClosed(async () => {
    clearInterval(interval);
    await eventStream.close();
  });

  return eventStream.send();
});

This example sends a message every second. Adjust it according to your needs. If you're still having issues, make sure: 1. Your server is correctly configured to send SSE. 2. The URL you're using is correct and accessible. 3. The token in the cookie is valid and being sent correctly. Remember, SSE is unidirectional (server to client only). If you need bidirectional communication, consider using WebSockets instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

Get SSE data from nuxt