Questions and Thanks

[GimpMaster]

Thank you for the library. I was able to get it up and running pretty quickly.

I have a couple of questions

1. Why did you choose to have the source() method create a POST request instead of a GET request? From what I can see from my limited SSE searches is that most requests are GET as you are trying to get data. Is there a way to change this?

2. I want to initiate the SSE connection in a layout and then be able to use the store throughout a number of my pages. What would you recommend the best way to do this? Initiate the connection once and then import the store everywhere?

Thanks!

[razshare]

Hello @GimpMaster ,

Why did you choose to have the source() method create a POST request instead of a GET request? From what I can see from my limited SSE searches is that most requests are GET as you are trying to get data

Get requests may be cached by the browser, for example, through a service worker that rewrites the headers of an SSE request and unintentionally caches it as a normal request that fails to upgrade. Post requests are never cached. That's it.

Is there a way to change this?

Yes, there is now, make sure to update to version 0.13.3.

In your svelte component, set the method options on your connection to GET

<!-- +page.svelte -->
<script>
  import { source } from 'sveltekit-sse'
  const connection = source('/issue-55/events', {
    options: {
      method: 'GET',  // <=== This.
    },
  })
  const message = connection.select('message')
</script>

<h3>{$message}</h3>

And on your server you do the usual, but using GET instead

import { produce } from 'sveltekit-sse'

export async function GET() {
  return produce(async function start({ emit }) {
    //...
  })
}

I want to initiate the SSE connection in a layout and then be able to use the store throughout a number of my pages. What would you recommend the best way to do this? Initiate the connection once and then import the store everywhere?

I would use hooks.server.js, it's more secure and more centralized.

So something like this

// src/hooks.server.js
import { produce } from 'sveltekit-sse'

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
  if (event.url.pathname.startsWith('/all-events')) {
    return produce(function start({ emit }) {
      // Emit stuff here for the current client.
    })
  }

  const response = await resolve(event)
  return response
}

Judging by your question though, you will probably also want to pick and choose which client to respond to dinamically, I recommend reading this FAQ if that's indeed your use case.

---

Let me know if this answers your question.

[razshare]

Sorry @GimpMaster , I think I missunderstood the second part of your question.

I want to initiate the SSE connection in a layout and then be able to use the store throughout a number of my pages. What would you recommend the best way to do this? Initiate the connection once and then import the store everywhere?

If you're specifically talking about the client side, then yes, I would do that in a layout and either save the connection variable or pass it down as a prop to the actual pages.

[GimpMaster]

Thank you @razshare for the response. Yes I was referring to the client side. I will give these ideas a try. Thanks!