Wasp•3w ago

Server Sent Events Not Working

Since WASP does not support this, I created an api endpoint on wasp.main. It is POST endpoint with auth set to false. From the front end, I usethe fetch-event-source library so that I can send a body to the SSE endpoint (SSE normally only supports GET). When I send a request from the client, the server starts streaming the event. However, I see nothing on the front end or the developer network tab. Here is the front-end function that establishes the SSE connection:

export function startAiSSE(
  userMessage: string,
  onChunk: (chunk: string) => void,
  onClose: () => void,
  onError: (err: any) => void
) {
  const url = `http://localhost:3001/test`;

  fetchEventSource(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      userMessage: userMessage,
    }),
    onmessage(ev) {
      console.log("RAW DATA RECEIVED ON CLIENT:", ev.data);
      try {
        const parsedData = JSON.parse(ev.data);

        if (parsedData.event === 'response.content_part.delta' || parsedData.event === 'response.content_part.done') {

          const textChunk = parsedData.data?.part?.text || '';

          if (textChunk) {
            onChunk(textChunk);
          }
        }
      } catch (e) {
        console.error('Failed to parse SSE message data:', ev.data, e);
      }
    },
    onclose() {
      console.log('SSE connection closed.');
      onClose();
    },
    onerror(err) {
      console.error('SSE Error:', err);
      onError(err);
      throw err;
    },
  });
}

export function startAiSSE(
  userMessage: string,
  onChunk: (chunk: string) => void,
  onClose: () => void,
  onError: (err: any) => void
) {
  const url = `http://localhost:3001/test`;

  fetchEventSource(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      userMessage: userMessage,
    }),
    onmessage(ev) {
      console.log("RAW DATA RECEIVED ON CLIENT:", ev.data);
      try {
        const parsedData = JSON.parse(ev.data);

        if (parsedData.event === 'response.content_part.delta' || parsedData.event === 'response.content_part.done') {

          const textChunk = parsedData.data?.part?.text || '';

          if (textChunk) {
            onChunk(textChunk);
          }
        }
      } catch (e) {
        console.error('Failed to parse SSE message data:', ev.data, e);
      }
    },
    onclose() {
      console.log('SSE connection closed.');
      onClose();
    },
    onerror(err) {
      console.error('SSE Error:', err);
      onError(err);
      throw err;
    },
  });
}

Any ideas on how to resolve this? OpenAI's Responses API streams are SSE-based. Hence my need. Thank you!

12 Replies

kapa.ai•3w ago

Hi @neogeofun. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain specific information about implementing or troubleshooting Server-Sent Events (SSE) in Wasp. Wasp's real-time features are built around WebSockets using Socket.IO, and the official documentation and community discussions focus on this approach for streaming data between server and client. There is no mention of native SSE support or detailed guidance for custom SSE endpoints in Wasp. If you need real-time streaming in Wasp, the recommended and supported way is to use WebSockets, which are fully integrated and documented in Wasp. You can define your WebSocket logic on the server, enable it in your Wasp file, and use the provided React hooks (useSocket, useSocketListener) for client-side integration. This approach offers full-stack type safety and is the path most aligned with Wasp's architecture and tooling Docs: Web Sockets. If you must use SSE for compatibility with external APIs (like OpenAI's streaming responses), you may need to handle lower-level Node.js/Express logic yourself, but the knowledge sources do not provide guidance or examples for this. Be aware that CORS and proxying issues can also affect custom endpoints, and these are discussed in the context of HTTP APIs, not SSE specifically Api.post on custom HTTP Endpoint results in CORS Error. In summary:
- Wasp does not natively support SSE, and there is no official documentation or community guidance for it. - For real-time features, use Wasp's built-in WebSocket support. - If you continue with SSE, you will need to debug at the Node.js/Express level, outside of Wasp's abstractions. If you need help with WebSockets in Wasp, I can provide detailed guidance and examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @neogeofun, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

neogeofunOP•3w ago

CORS is allowed. Auth is disabled. I can send the POST request through fetch-event-source (https://github.com/Azure/fetch-event-source) library and log that the endpoint receives and starts streaming events on the server. However, I don't see those events in network tab or browser console.

toticozeni•3w ago

Hey @neogeofun. Unfortunately no native support for SEE in Wasp but it's on our roadmap. It's a bit weird that there aren't any errors but it still doesn't work. How do the logs on server side look like? Anything that would help us debug this would be helpful. Someone else managed to get their solution working by switching to GET. https://discord.com/channels/686873244791210014/1371732022472605766/1372440839921336361 Downside is that you send data through query strings which have a size limit. We also had an streaming example which is more of a UX hack: sever/streaming.ts client/MainPage.jsx main.wasp

neogeofunOP•2w ago

Thanks @franjo , I already implemented this exactly the way I wanted.

toticozeni•2w ago

Did you get it working? Can you tell us what fixed it then?

neogeofunOP•2w ago

I just coded it like a regular NodeJS endpoint. Used res/req rather than Wasp-provided tooling for action/query.

toticozeni•2w ago

Hm by default. Wasp always includes Auth middleware, and the an array of middleware which can be turned on/off. Other than that it just calls your function, so no behavaioral changes there.

const defaultGlobalMiddlewareConfig: MiddlewareConfig = new Map([
  ['helmet', helmet()],
  ['cors', cors({ origin: config.allowedCORSOrigins })],
  ['logger', logger('dev')],
  ['express.json', express.json()],
  ['express.urlencoded', express.urlencoded()],
  ['cookieParser', cookieParser()]
])

// other file
const allowedCORSOriginsPerEnv: Record<NodeEnv, string | string[]> = {
  development: '*',
  production: [frontendUrl]
}

const defaultGlobalMiddlewareConfig: MiddlewareConfig = new Map([
  ['helmet', helmet()],
  ['cors', cors({ origin: config.allowedCORSOrigins })],
  ['logger', logger('dev')],
  ['express.json', express.json()],
  ['express.urlencoded', express.urlencoded()],
  ['cookieParser', cookieParser()]
])

// other file
const allowedCORSOriginsPerEnv: Record<NodeEnv, string | string[]> = {
  development: '*',
  production: [frontendUrl]
}

This is the only thing that I can think of that might make a problem. Doing it that way you need to do all of this stuff yourself, like auth, which may be important to you.

neogeofunOP•2w ago

Middleware works; I didn't need to block them. Auth is true now. The problem was the inability to receive stream data.

toticozeni•2w ago

I didn't ask if you've used query/action, but we have a feature specifically for api endpoints: https://wasp.sh/docs/advanced/apis

Custom HTTP API Endpoints | Wasp

In Wasp, the default client-server interaction mechanism is through Operations. However, if you need a specific URL method/path, or a specific response, Operations may not be suitable for you. For these cases, you can use an api. Best of all, they should look and feel very familiar.

neogeofunOP•2w ago

Yes, I used api from the beginning.

toticozeni•2w ago

I will want to re-visit SSE in Wasp at some time, but currently I'm too overloaded with other priorities. I will let you know when I have something.

neogeofunOP•2w ago

No worries, it is working, I just needed to use res.send that was all I needed to do.

Gaming

Programming

Server Sent Events Not Working

Did you find this page helpful?