Creating a Server Side (Stream) Eventsouce Plugin

Dear Hallowed Plug-in Builders!

I’ve been smacking my head against a wall all week trying to figure this out please help!

I am building a plug-in that uses the JavaScript Server Sent Events API (aka the EventSource API) to receive real time text events
info: EventSource - Web APIs | MDN

I am using an API that will stream text data as it is being. I intend to display this client side as it is being streamed.

I need to make the call server side as the API uses its API key in the url request.

I cannot simply use the return function to get the data back after the request. Because it won’t stream the data real-time this way, it will just return it when done (or end the stream prematurely).

I need a way to get the streamed data client side as it is being streamed (a little lag is fine)

Ideas for this (but I’m stuck on each one)

  1. When EventSource.onMessage is triggered send the data over to an element in the plug-in to display the text without ending the function.
  2. POST the data each time it’s received to the bubble data API but this seems really inefficient as I’ll end up sending so many requests per second (and the lag may get annoying).

Please please help! I can’t seem to figure this out!

@vini_brito - do you know any way to do this bubble nativly?

genl reqmt → implementation where client opens ( socket.io ) generic conn to server.
server acts as proxy , making long running call ( observer to actual event stream source )
on behalf o client, the LR proc on server wraps native stream protocall events inside the socket io idiom, forwarding events back to client.

bubble does not support socket.io

an example of this kind of architecture would be found in apps featuring streaming process speech to text where the actual client to the STT API is server-side ( secure ) but where all the real time , recognized text shows up in the client UI

1 Like

Hey Rowntreerob, thank you so much for your insightful reply!

Is there no way to do this without an external server.
Eg set up a relay node module inside the plug-in to relay info client side.
(external api stream → parsed in bubble plug-in or backend → create a new EventSource → stream parsed data to client side)

Or would you know if there is a way to side step the relay and stream from server side action in the plug-in to an element in the same plug-in?

Oh hi! Can you receive this info in a webhook? I mean, receiving it in an exposed API workflow?
Because server side actions are not built for listening :yum:

2 Likes

Hidden as was actually incorrect :frowning:

Summary

@vini_brito @rowntreerob

I completely overlooked that you could hide info from client side with “private” keys! :man_facepalming:

I ended up just using SSE from client side in an element - hiding what i needed to with private keys.

Sometimes the simple solutions are staring right at you!!

Thank you both for your help!

1 Like

Damn! I was actually incorrect, you cannot use private keys in a function!

@vini_brito can you explain how you’d use webhook here?

You can in a server side action.

Don’t they offer you a webhook, I mean, won’t their server, their API, send requests to your API endpoint?
So they send something to you and you save it in the database, then you can do whatever with it, including displaying it in a page.

Ah yes I can use the normal API and consume it regularly but if i want to stream data from them in real time I need to use the Eventsource API

Wondering if anyone in this thread can help with my question? Stream response from OpenAI GPT-3 completion api

Hi @sniphairmail

Did you find a solution to this? If so, any guidance would be so appreciated.

@sniphairmail there is a plugin to stream API from open ai, you can search ChatGPT with Real-Time Streaming plugin bubble

1 Like